通过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>
通过CSS3,实现元素覆盖效果的更多相关文章
- 基于css3的轮播效果
花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...
- 使用 CSS3 伪元素实现立体的照片堆叠效
CSS3 里引入的伪元素让 Web 开发人员能够在不需要额外添加 HTML 标签的情况下制作出复杂的视觉效果.例如,:before 和 :after 这个两个 CSS3 伪元素就可以帮助你实现很多有趣 ...
- WOW.js – 在页面滚动时展现动感的元素动画效果
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...
- Stickup – 轻松实现元素固定效果的 jQuery 插件
粘贴是一个简单的 jQuery 插件,在页面滚动的时候固定一个元素到浏览器窗口的顶部,让其总是保持在视图中可见.这个插件作用于多页的网站,但是对于单页的布局有额外的功能.借助 CSS,还可以实现当前视 ...
- ScrollReveal.js – 帮助你实现超炫的元素运动效果
ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力.只需要给元素增加 data-scrollreveal 属性,当元素进入可视区域的时候会自动被触发设置 ...
- 用css3实现各种图标效果
原文:用css3实现各种图标效果 公共样式 应该说现在绝大多数公司的项目前端都是一团乱,不仅仅是js写的没有任何框架而言,css同样也是如此,导致项目如果要升级或者说有新的变更维护起来就特别困难. 最 ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- Javascript 及 CSS3 实现进度条效果
Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条: 在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...
- css3 模拟标牌震荡效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
随机推荐
- 最短路:我的理解--Dijkstra算法
最短路径:Dijkstra算法 用来计算从一个点到其他所有点的最短路径的算法,是一种单源最短路径算法.也就是说,只能计算起点只有一个的情况. Dijkstra的时间复杂度是O (N2),它不能处理存在 ...
- iOS Masonry的使用需要注意的地方
自动布局最重要的是约束:UI元素间关系的数学表达式.约束包括尺寸.由优先级和阈值管理的相对位置.它们是添加剂,可能导致约束冲突 .约束不足造成布局无法确定 .这两种情况都会产生异常. 使用前:Auto ...
- Surface Mount Package Details
http://www.centralsemi.com/product/packages/index2.php http://www.infineon.com/cms/cn/product/packag ...
- 软件包管理 rpm yum apt-get dpkg
http://blog.csdn.net/ljq1203/article/details/7401616
- vue项目条形码和二维码生成工具试用
项目开发需要,优惠券分不同类型,简单的使用id生成条形码供店铺使用,麻烦点的需要多个字段的就需要使用二维码来展示了,对应的效果如下 条形码(一维码)使用工具code128 需引入code128.js ...
- Ruby:Sublime中开发Ruby需要注意的Encoding事项
背景 最近在用Sublime作为开发环境学习Ruby,本文就记录一下Ruby和Sublime在编码方面的问题. Sublime相关 默认的文件存储编码:UTF8 Sublime文件默认存储编码为UTF ...
- STL源码剖析——hashtable
二叉搜索树具有对数时间的搜索复杂度,但是这样的复杂度是再输入数据有足够的随机性的假设上哈希表在插入删除搜索操作上也具有常数时间的表现,而且这种表现是以统计为基础,不需要依赖输入元素的随机性 hasht ...
- 比較不错的一个ios找茬游戏源代码
找茬游戏源代码 .这个是一款很不错的ios找茬游戏源代码,该游戏的兼容性很好的.并且还能够支持ipad和iphone.UI界面设计得也很美丽,游戏源代码真的是一款很完美.并且又很完整的一款休闲类的游戏 ...
- [置顶] JDK工具(一)–Java编译器javac
1.概述 javac.exe: Java编译器,将Java源代码转换成字节码. 2.用法 javac <选项> <源文件> (使用过程中发现,javac <源 ...
- 使用ssh向sqlserver2005数据库中保存image类型的二进制图片
1.首先设计数据库表,其中photo.photo2字段均为image类型的. 2.建立实体bean对象,设置两个字段为byte[]如:private byte[] photo; private byt ...