通过CSS3，实现元素覆盖效果

在非常多站点中，我们都能够看到这种效果。当用户鼠标进入某一个元素后，下方就会有遮罩层上浮动画，如图：

今天我们就用hover伪类加上css3实现，没有使用不论什么JS

<!DOCTYPE html>
<html>
<head lang="zh-cmn-Hans">
  <meta charset="UTF-8">
  <title></title>
  <style>
    #d1{
      height: 100px;
      position: relative;
      width: 100px;
      overflow: hidden;
    }

    #d1:hover > #d3{
      transform: translateY(-100%);
    }

    #d2{
      background: red;
      height: 100px;
      width: 100px;
    }

    #d3{
      color: white;
      background: #111;
      height: 100px;
      opacity: 0.6;
      transition: transform 0.5s ease;
      width: 100px;
    }
  </style>
</head>
<body>
  <div id="d1">
    <div id="d2"></div>
    <div id="d3"></div>
  </div>
</body>
</html>

效果点击这里

时间： 2025-01-05 03:17:55

通过CSS3，实现元素覆盖效果的相关文章

CSS3 盒子模型子元素居中效果

实现效果: 效果代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> //在这里只设了webkit内核的实现效果,如果想让其它浏览器支持居中效果那么请用它们的前缀 div{width:200px;height:20

原文:CSS3图片轮播效果在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

用css3实现各种图标效果

原文:用css3实现各种图标效果公共样式应该说现在绝大多数公司的项目前端都是一团乱,不仅仅是js写的没有任何框架而言,css同样也是如此,导致项目如果要升级或者说有新的变更维护起来就特别困难. 最近领导决定花大时间整理一下css样式,用他的一句话来说就是为后来者造福. 首先我们在整理样式之前,必须得有一个自己团队的规范. 思考真的很重要,所谓的磨刀不误砍柴工,事实上也就是说你在做任何事情之前都要把大致的流程,大致的思路想清楚之后再动手,否则就可能做到一半发现这样不对,然后前面的工夫全白费了,

CSS3的3D转换效果详解介绍

CSS3的3D转换效果详解介绍:本章介绍一下CSS3的3D转换效果,此效果的实现依靠的是transform属性,3D转换只是此属性的部分应用,更多相关内容可以参阅CSS3的transform属性总略介绍一章节.掌握3D转换效果,可以从三个方法作为突破口,分别是rotateX, rotateY, rotateZ,在2D变换过程中rotate()函数的应用,它表示旋转的意思,由于是2D变换,所以它只是在一个平面进行旋转,所以无需细分,具体可以参阅CSS3的2D转换效果详细介绍一章节. 下面分别介绍一

基于css3的轮播效果

花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framework动画效果实现轮播效果以及之前提到的input:checked伪类来实现轮播的控制.在轮播的控制上不可避免的使用了js,一直想写出优雅的js代码,在看了自己写的代码之后发现自己还有很大的提升空间,也许该找个机会去阅读优秀框架的源代码了. 当然也借鉴了网上很多资料,有问题的是在ie下完全没有效果,对

CSS3中的动画效果记录

今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform 属性允许你修改CSS可视化模型的坐标控件.使用transform,元素可以安装设定的值变形.旋转.缩放.倾斜. 语法: transform : none | <transform-function> [ <transform-function> ]* 也就是: transform: r

CSS3控制元素排列

需求: 将改变为. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AB换位置</title> <style> * { margin: 0; padding: 0; } .box { width: 400px; height: 500px; margin: 50px auto; bor

使用 CSS3 伪元素实现立体的照片堆叠效

CSS3 里引入的伪元素让 Web 开发人员能够在不需要额外添加 HTML 标签的情况下制作出复杂的视觉效果.例如,:before 和 :after 这个两个 CSS3 伪元素就可以帮助你实现很多有趣的效果.本教程将告诉你如何使用 CSS3 为元素创建一组漂亮的图片堆叠效果. 效果演示插件下载您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计让网站动起来!12款优秀

javascript+css3简单的手风琴效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>javascript+css3简单的手风琴效果</title> <style>#imageMenu{width:500px;height:200px;overflow:hidden;}#imageMenu ul *{transition:all linear 0.2s;