在非常多站点中,我们都能够看到这种效果。当用户鼠标进入某一个元素后,下方就会有遮罩层上浮动画,如图:
今天我们就用hover伪类加上css3实现,没有使用不论什么JS
<!DOCTYPE html> <html> <head lang="zh-cmn-Hans"> <meta charset="UTF-8"> <title></title> <style> #d1{ height: 100px; position: relative; 100px; overflow: hidden; } #d1:hover > #d3{ transform: translateY(-100%); } #d2{ background: red; height: 100px; 100px; } #d3{ color: white; background: #111; height: 100px; opacity: 0.6; transition: transform 0.5s ease; 100px; } </style> </head> <body> <div id="d1"> <div id="d2"></div> <div id="d3"></div> </div> </body> </html>