css+html做一個個人頭像預覽，或者說名片把
阿新 • • 發佈：2020-11-29
效果圖：
----
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>案例</title> <link rel="stylesheet" href="transition.css"> </head> <body> <div class="box clear"> <div class="info"> <div class="top"></div> <div class="thumb"> <img src="img/img4.jpg"> </div> <h1>Lucy</h1> <p>web前端</p> <div class="bottom"></div> </div><div class="info"> <div class="top"></div> <div class="thumb"> <img src="img/img4.jpg"> </div> <h1>Lucy</h1> <p>web前端</p> <div class="bottom"></div> </div> <div class="info"> <div class="top"></div> <div class="thumb"> <img src="img/img4.jpg"> </div> <h1>Lucy</h1> <p>web前端</p> <div class="bottom"></div> </div> <div class="info"> <div class="top"></div> <div class="thumb"> <img src="img/img4.jpg"> </div> <h1>Lucy</h1> <p>web前端</p> <div class="bottom"></div> </div> </div> <div class="main"></div> </body> </html>
---
transition.css
body,h1,p{ margin:0; } .box{ width: 800px; margin:30px auto; display: flex;/*設定彈性盒子*/ justify-content: space-between;/*設定兩端對齊*/ } .box .info{ position: relative; margin:10px; width:180px; height:280px; border:1px solid #ccc; text-align: center; font-size: 16px; overflow:hidden; box-sizing: border-box; } .box .info .thumb{ width:120px; height:120px; border:1px solid #ccc; border-radius:50%; margin:20px auto; overflow:hidden; background-color: #f94a69; } .box .info img{ width:100%; height:100%; border-radius:50%; transition: all 1s;/*過渡時間1s*/ } .box .info h1{ color:#333; line-height:50px;/*設定行高*/ } .box .info p{ color:#555; } .box .info .bottom{ position:absolute;/*絕對定位*/ bottom: -31px;/*將底部元素放到盒子外邊31px*/ width:100%; height:30px; background-color: #fd748c;/*背景顏色*/ transition:1s; } .box .info:hover .bottom{ bottom:0; } .box .info .top{ position:absolute; top:-91px; z-index: -1; width:100%; height:90px; border-radius: 0px 0px 50% 50%;/*設定半圓*/ background-color:#fd748c; transition:1s; } .box .info:hover .top{ top:0; } .box .info:hover img{ transform: scale(1.5);/*縮放*/ box-shadow: 0 0 0 15px #fff;/*盒子投影*/ } .box .info:hover{ box-shadow:0 0 15px #000; }
--img4.jpg