在很多网站中，我们都可以看到这样的效果，当用户鼠标进入某一个元素后，下方就会有遮罩层上浮动画，如图：
今天我们就用hover伪类加上css3实现，没有使用任何JS
<meta charset="UTF-8"> <title></title> <style> #d1{ height: 100px; position: relative; width: 100px; overflow: hidden; } #d1:hover > #d3{ transition: transform 0.5s ease; transform: translateY(-100%); } #d2{ background: red; height: 100px; width: 100px; } #d3{ color: white; background: #111; height: 100px; opacity: 0.6; width: 100px; } </style> <div id="d1"> <div id="d2"></div> <div id="d3"></div> </div>
