通过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 ...
随机推荐
- Codeforces Round #346 (Div. 2) B. Qualifying Contest 水题
B. Qualifying Contest 题目连接: http://www.codeforces.com/contest/659/problem/B Description Very soon Be ...
- 前端UED网站汇总
爱词霸UED团队 MED | 营销展现研究专家 携程UED-携程旅行前端开发团队 支付宝前端开发车间 Taobao UED Team: 淘宝网用户体验团队博客,有关用户体验设计和研究的经验分享. - ...
- Java容器-引用分类与部分Map用法
目录 1.引用分类 2.了解WeakHashMap.IdentityHashMap.EnumMap 3.同步控制与只读设置 代码实现 1.引用分类(面试) 强引用(StrongReference):引 ...
- HDU 4691 Front compression （2013多校9 1006题 后缀数组）
Front compression Time Limit: 5000/5000 MS (Java/Others) Memory Limit: 102400/102400 K (Java/Othe ...
- 按字母顺序排列的IDC函数列表
http://www.2cto.com/shouce/ida/162.htm 按字母顺序排列的IDC函数列表 下面是函数描述信息中的约定: 'ea' 线性地址 'success' 0表示函数失败:反之 ...
- MySQL审计功能
http://blog.itpub.net/29733787/viewspace-1604392/
- Asp.Net Session的三种方法及Web.Config设置
转载:http://user.gw-ec.com/login/safelog/redirectt?session=so%2f%2bSjyZURMOe54xgk%2bUhL2CgGqDjOKEbYwZS ...
- FAQ：枚举和常规的值，到底哪种更符合程序使用？
问: 枚举和常规的值,到底哪种更符合程序使用? 答: 肯定是根据不同的场景,做出不同的选择. 如果是不同的值需要不同的逻辑,肯定是枚举好一些.如果只是表示某个取值范围且这个范围会动态变化,用常规的值 ...
- 负载均衡---在window与linux下配置nginx
最近有些时间,开始接触负载均衡方面的东西,从硬件F5再到Citrix Netscalar.不过因为硬件的配置虽然不复杂,但昂贵的价格也让一般用户望而却步(十几万到几十万),所以只能转向nginx,sq ...
- 尝试PWA
1.一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能. 2.创 ...