圖片來自於阿里巴巴矢量圖標庫。
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 = 視區高度百分之一。