通过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 ...
随机推荐
- NOIP200606金明的预算方案
试题描述: 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过N元钱就行”. ...
- git -- 简单命令
1.git init 当前目录初始化 2.git status 检查当前文件状态 Changes to be committed” 这行下面的,就说明是已暂存状态 Changed b ...
- Android Material Design-Working with Drawables(使用Drawable)-(五)
转载请注明出处:http://blog.csdn.net/bbld_/article/details/40584331 翻译自:http://developer.android.com/trainin ...
- [转].net reactor 学习系列(二)---.net reactor界面各功能说明
安装了.net reactor之后,可以在安装目录下找到帮助文档REACTOR_HELP.chm,目前没有中文版本,里面详细介绍了.net reactor的各功能及使用场景.本系列文章是基于此帮助文档 ...
- iOS8 NotificationCenter Extension 简介
在最新的WWDC14上面,苹果发布了iOS8的一些新特性,而其中最让程序员兴奋的特性莫过于Extension,或者称之为Widget. 下面就来尝鲜试验一把. 一.Extension简介 首先,苹果只 ...
- Redis 起步(linux)
Rdis和JQuery一样是纯粹为应用而产生的,这里记录的是在CentOS 5.7上学习入门文章: 1.Redis简介 Redis是 一个key-value存储系统.和Memcached类似,但是解决 ...
- unity3D总结的一些细节，不注意有些要折腾非常多天！
1. 注意!!ps保存图片时,若保存为ps格式,若关闭最大兼容将会导致unity导入失败!(n天) 2.switch 推断NGUI popuplist传来的value字符串时一定要trim一下去掉空格 ...
- Python学习（九）IO 编程 —— 文件夹及文件操作
Python 文件夹及文件操作 我们经常会与文件和目录打交道,对于这些操作,python可以使用 os 及 shutill 模块,其中包含了很多操作文件和目录的函数. os 可以执行简单的文件夹及文件 ...
- ZooKeeper目录
1. Zookeeper常用命令 (转) 2. ZooKeeper安装和配置(转) 3. Spark集群基于Zookeeper的HA搭建部署笔记(转)
- split-array-largest-sum（参考了discuss）
注意,第一种用法,涉及到一些Java的知识.就是采用Object作为HashMap的key的时候,需要重载这个Class的 equals 和 hashCode 这两个方法.其中equals需要判断一下 ...