通过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 ...
随机推荐
- leetcode187. Repeated DNA Sequences
https://leetcode.com/problems/repeated-dna-sequences/#/description https://leetcode.com/problems/r ...
- 点广告获取一些BTC(比特币)的网站
免费获取比特币:http://freebtc.qiniudn.com/freebtc.html free btc:http://freebtc.qiniudn.com/freebtc.html ...
- CentOS 6.9设置阿里云源/163源
阿里云: 1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 2.下载新的CentOS ...
- 3DShader之法线贴图(normal mapping)
凹凸贴图(bump mapping)实现的技术有几种,normal mapping属于其中的一种,这里实现在物体的坐标系空间中实现的,国际惯例,上图先: 好了讲下原理 可以根据高度图生成法线量图,生成 ...
- Javascript：前端利器 之 JSDuck
背景 文档的重要性不言而喻,对于像Javascript这种的动态语言来说就更重要了,目前流行的JDoc工具挺多的,最好的当属JSDuck,可是JSDuck在Windows下的安装非常麻烦,这里就写下来 ...
- opencv CxImage 互转 (Mat)
//to Mat CxImage img; img.Load("C:\\f.jpg"); uint8_t* buf=NULL; int32_t len=0; bool rs =im ...
- A4纸的象素分辨率计算[转]
在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(Dots Per Inch)指标.在Windows系统的网页打印中默认采用的是96dpi,Mac系统中默认的是72dpi. A4纸张的尺寸是2 ...
- ajax成功返回数据中存在多余字符的处理
ajax里有需要判断反馈的字符串是否为“ok”,在浏览器里调试,看到返回的内容明明是“ok”,但是if(“ok”==data)判断为false,用alert打印内容也是ok,但是打印长度的时候却是3. ...
- iOS：转载：IOS谓词--NSPredicate
IOS谓词--NSPredicate 分类: IOS应用2013-02-19 17:24 6792人阅读 评论(1) 收藏 举报 Cocoa 提供了NSPredicate 用于指定过滤条件,谓词是指在 ...
- 数学图形(1.20)N叶草
有N个叶子的草 相关软件参见:数学图形可视化工具,使用自己定义语法的脚本代码生成数学图形.该软件免费开源.QQ交流群: 367752815 vertices = t = to (*PI) r = n ...