通过CSS3，实现元素覆盖效果
2016-04-03 08:30
633 查看
在非常多站点中，我们都能够看到这种效果。当用户鼠标进入某一个元素后，下方就会有遮罩层上浮动画，如图：
今天我们就用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>效果点击这里
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 