代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/huawei.css"> <link rel="stylesheet" href="./font_2764063_rvx5t1sbs4m/iconfont.css"> </head> <body> <div class="father"> <h2>推荐信息</h2> <ul class="list"> <li class="p50"> <img src="./images/p50-cn-p.jpg" alt=""> <div class="bg"></div> <div class="text"> <div>产品</div> <div>HUAWEI P50 系列</div> <div>万象新生</div> <div>了解更多 <i class="iconfont icon-arrow-right"></i></div> </div> </li> </ul> </div> </body> </html>
.css文件
* { margin: 0; padding: 0; } h2 ul li { list-style: none; } .father { width: 83.625%; height: 1000px; margin: 0 auto; box-sizing: border-box; } h2 { width: 130px; height: 55px; margin: 0 auto; color: #333333; text-align: center; font-weight: 500px; margin-bottom: 70px; } .list .p50 { position: relative; width: 705px; height: 304px; overflow: hidden; box-sizing: border-box; } .list .p50 img { width: 705px; height: 304px; transition: all .5s; } .list .p50 .bg { position: absolute; top: 0; left: 0; width: 706px; height: 341px; background-image: linear-gradient( transparent, rgba(0,0,0,.6) ); opacity: 0; } .p50 .text { position: absolute; left: 0; bottom: -50px; width: 705px; height: 165px; padding: 25px 30px; color: #ffffff; transition: transform .5s; box-sizing: border-box; } .p50 .text div:nth-child(2) { font-size: 20px; } .p50 .text div:nth-child(3) { font-size: 12px; margin-top: 2px; margin-bottom: 24px; } .p50 .text div:nth-child(4) { font-size: 12px; } .p50 .text .icon-arrow-right { color: red; } /* hover */ .father .p50:hover img { transform: scale(1.1); } .father .p50:hover .text { transform: translateY(-50px); } .father .p50:hover .bg { opacity: 1; }
阴影效果+移动效果+iconfont图标使用
下方的text盒子有一个整体上移动的效果，这个是可以先margin：-50px，之后将盒子向上移动50px就可以了，注意过渡动画不是all，而是transform。这样子的话就是排除margin，padding的干扰。
