通过CSS3,实现元素覆盖效果
2015-06-05 10:40
603 查看
在很多网站中,我们都可以看到这样的效果,当用户鼠标进入某一个元素后,下方就会有遮罩层上浮动画,如图:
今天我们就用hover伪类加上css3实现,没有使用任何JS
效果点击这里
今天我们就用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 background
- CSS光标属性
- iOS开发 设置状态栏样式
- 使用 CSS 显示 XML
- CSS3 animation/transform
- CSS文本溢出显示省略号
- [html][css]我的编码习惯
- CSS 字体
- CSS Text文本格式
- CSS 背景
- 神奇的overflow:hidden及其背后的原理
- CSS 创建
- css
- CSS3 icon font完全指南(CSS3 font 会取代icon图标)
- HTML插入CSS样式表方法总结
- CSS3 可视化的格式模型
- css之css设置
- CSS float浮动的深入研究、详解及拓展
- css之css与div
- CSS 的继承性、层叠性、特殊性、重要性