通过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 ...
随机推荐
- 洛谷P4009 汽车加油行驶问题
题目描述 给定一个 N \times NN×N 的方形网格,设其左上角为起点◎,坐标(1,1)(1,1),XX 轴向右为正, YY 轴向下为正,每个方格边长为 11 ,如图所示. 一辆汽车从起点◎出发 ...
- poj 3624 Charm Bracelet 背包DP
Charm Bracelet Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://poj.org/problem?id=3624 Descripti ...
- python函数 divmod
divmod(a,b)函数 中文说明: divmod(a,b)方法返回的是a//b(除法取整)以及a对b的余数 返回结果类型为tuple 参数: a,b可以为数字(包括复数) from 2. Add ...
- Scala 元组
与列表一样,元组也是不可变的,但与列表不同的是元组可以包含不同类型的元素. 元组的值是通过将单个的值包含在圆括号中构成的.例如: val t = (1, 3.14, "Fred") ...
- 快速排序及查找第K个大的数。
本文提供了一种基于分治法思想的,查找第K个大的数,可以使得时间复杂地低于nlogn. 因为快排的平均时间复杂度为nlogn,但是快排是全部序列的排序, 本文查找第k大的数,则不必对整个序列进行排序.请 ...
- react-native-communications 电话、短信、邮件、浏览器
第一种方法:Linking:调用系统的电话.短信.邮件.浏览器等功能 Linking.canOpenURL(this.props.url).then(supported => { if (!su ...
- [置顶] think in java interview-高级开发人员面试宝典(三)
收集自Oracle公司的10次(60道)电话面试全部问答(英语) Q: What environment variables do I need to set on my machine in ord ...
- ArcGIS for Android 点击选择
public void onSingleTap(float arg0, float arg1) { //selFeatureLayer.selectFeature(5); Point p = mMap ...
- JS实现经典生产者消费者模型
因为node使用单线程的方式实现,所以,在此使用定时器timer取代线程thread来实现生产者消费者模型. 代码例如以下: var sigintCount = 0; var productArray ...
- 做考试系统用到的关于onbeforeunload一些兼容性问题
最近做考试系统,一些效果存在一些兼容性问题,尤其是ie6,本人js不是很好,通过查资料解决了这些问题,现总结下: 关于onbeforeunload问题: 考试时离开页面需要提示,但是直接用此方法或on ...