在很多网站中，我们都可以看到这样的效果，当用户鼠标进入某一个元素后，下方就会有遮罩层上浮动画，如图：
今天我们就用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{ 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></head><body> <div id="d1"> <div id="d2"></div> <div id="d3"></div> </div></body></html>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
262
