先看效果图
直接上代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ padding: 0; margin: 0; box-sizing: border-box; } body{ width: 100vw; height: 100vh; background-color: #ecf0f3; display: flex; justify-content: center; align-items: center; } .container{ width: 800px; height: 600px; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; align-content: flex-start; } .container .box{ width: 150px; height: 150px; margin: 20px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .container .box .img{ width: 100px; height: 100px; border-radius: 20px; box-shadow: 8px 8px 20px #d1d9e6, -8px -8px 20px #fff; display: flex; flex-direction: column; justify-content: space-around; align-items: center; cursor: pointer; } .container .box .img img{ max-height: 100px; width: auto; overflow: hidden; transition: .2s; } .container .box p{ color: #7f8c8d; } .container .box .img:hover{ transition: box-shadow .1s ease; box-shadow: 0 0 0 #d1d9e6, 0 0 0 #fff, inset 8px 8px 15px #d1d9e6, inset -8px -8px 15px #fff; } .container .box .img:hover ~ p{ color: #000; } .container .box .img:hover img{ transform: scale(.9); } </style> </head> <body> <!-- 父容器--> <div class="container"> <!-- 循环子容器--> <div class="box"> <div class="img"> <img src="" alt=""> </div> <p>沙发躺</p> </div> <div class="box"> <div class="img"> <img src="" alt=""> </div> <p>打篮球</p> </div> <div class="box"> <div class="img"> <img src="" alt=""> </div> <p>吃美食</p> </div> <div class="box"> <div class="img"> <img src="" alt=""> </div> <p>吹气球</p> </div> <div class="box"> <div class="img"> <img src="" alt=""> </div> <p>玩游戏</p> </div> <div class="box"> <div class="img"> <img src="" alt=""> </div> <p>玩手机</p> </div> <div class="box"> <div class="img"> <img src="" alt=""> </div> <p>画画</p> </div> <div class="box"> <div class="img"> <img src="" alt=""> </div> <p>看书</p> </div> <div class="box"> <div class="img"> <img src="" alt=""> </div> <p>打网球</p> </div> <div class="box"> <div class="img"> <img src="" alt=""> </div> <p>学音乐</p> </div> <div class="box"> <div class="img"> <img src="" alt=""> </div> <p>去兼职</p> </div> <div class="box"> <div class="img"> <img src="" alt=""> </div> <p>睡觉</p> </div> </div> </body> </html>