图片来自于阿里巴巴矢量图标库。
html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拟态图标</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="这是一组拟态图标"> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 整个大盒子 --> <div class="container"> <!-- 每个图标的小盒子 --> <div class="box"> <!-- 放图片的小盒子 --> <div class="img"> <img src="img/人民币.png" alt=""> </div> <!-- 图片名字 --> <p>人民币</p> </div> <div class="box"> <div class="img"> <img src="img/付款.png" alt=""> </div> <p>付款</p> </div> <div class="box"> <div class="img"> <img src="img/伞.png" alt=""> </div> <p>伞</p> </div> <div class="box"> <div class="img"> <img src="img/图表.png" alt=""> </div> <p>图标</p> </div> <div class="box"> <div class="img"> <img src="img/基金.png" alt=""> </div> <p>基金</p> </div> <div class="box"> <div class="img"> <img src="img/存钱罐.png" alt=""> </div> <p>存钱罐</p> </div> <div class="box"> <div class="img"> <img src="img/定位.png" alt=""> </div> <p>定位</p> </div> <div class="box"> <div class="img"> <img src="img/手机网银.png" alt=""> </div> <p>手机网银</p> </div> <div class="box"> <div class="img"> <img src="img/报告.png" alt=""> </div> <p>报告</p> </div> <div class="box"> <div class="img"> <img src="img/支票.png" alt=""> </div> <p>支票</p> </div> <div class="box"> <div class="img"> <img src="img/收据.png" alt=""> </div> <p>收据</p> </div> <div class="box"> <div class="img"> <img src="img/文件-加锁.png" alt=""> </div> <p>文件-加锁</p> </div> <div class="box"> <div class="img"> <img src="img/文件夹.png" alt=""> </div> <p>文件夹</p> </div> <div class="box"> <div class="img"> <img src="img/百分比.png" alt=""> </div> <p>百分比</p> </div> <div class="box"> <div class="img"> <img src="img/账本.png" alt=""> </div> <p>账本</p> </div> </div> </body> </html>
css代码：
* { margin: 0; padding: 0; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #efeeee; } .container { width: 700px; height: 600px; display: flex; justify-content: space-around; flex-wrap: wrap; align-items: center; } .container .box { display: flex; justify-content: space-around; flex-direction: column; align-items: center; align-content: center; width: 100px; height: 140px; margin: 20px; } .container .box .img { width: 100px; height: 100px; box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1), -18px -18px 30px rgba(255, 255, 255, 1); border-radius: 20px; display: flex; align-items: center; justify-content: center; background-color: #efeeee; transition: box-shadow .2s ease-out; position: relative; } .container .box .img img { width: 60px; transition: width 0.2s ease-out; } .container .box p { color: slategrey; } .container .box .img:hover { box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px rgba(255, 255, 255, 0.8), inset 18px 18px 30px rgba(0, 0, 0, 0.1), inset -18px -18px 30px rgb(255, 255, 255, 1); transition: box-shadow .2s ease-out; } .container .box .img:hover img { width: 58px; transition: width 0.2s ease-out; }
一些知识点：
vh/vw：相对于视区（即window.innerWidth/window.innerHeight，除去上栏和下栏剩下中间这块显示区域）的长度单位：1vh = 视区高度百分之一。