HTML+CSS+JS实现 ❤️个人相册封面卡片❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️个人相册封面卡片❤️
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
??效果演示：??
代碼目錄：
?
主要代碼實(shí)現(xiàn)：
CSS樣式：
@charset "utf-8"; @import url("https://s2.pstatp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css"); body {background-color: #1F1F1F;overflow: hidden }.border {height: 369px;width: 290px;background: transparent;border-radius: 10px;transition: border 1s;position: relative; }.border:hover {border: 1px solid #fff; }.card {height: 379px;width: 300px;background: #808080;border-radius: 10px;transition: background 0.8s;overflow: hidden;background: #000;box-shadow: 0 70px 63px -60px #000;display: flex;justify-content: center;align-items: center;position: relative; }.card0 {background: url("../img/1.jpg") center center no-repeat;background-size: 300px; }.card0:hover {background: url("../img/1.jpg") left center no-repeat;background-size: 600px; }.card0:hover h2 {opacity: 1; }.card0:hover .fa {opacity: 1; }.card1 {background: url("../img/2.jpg") center center no-repeat;background-size: 300px; }.card1:hover {background: url("../img/2.jpg") left center no-repeat;background-size: 600px; }.card1:hover h2 {opacity: 1; }.card1:hover .fa {opacity: 1; }.card2 {background: url("../img/3.jpg") center center no-repeat;background-size: 300px; }.card2:hover {background: url("../img/3.jpg") left center no-repeat;background-size: 600px; }.card2:hover h2 {opacity: 1; }.card2:hover .fa {opacity: 1; }h2 {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;color: #fff;margin: 20px;opacity: 0;transition: opacity 1s; }.fa {opacity: 0;transition: opacity 1s; }.icons {position: absolute;fill: #fff;color: #fff;height: 130px;top: 226px;width: 50px;display: flex;flex-direction: column;align-items: center;justify-content: space-around; }部分HTML代碼 :
<!doctype html> <html><head><meta charset="utf-8"><title>CSS個(gè)人資料卡懸停效果</title><link type="text/css" href="css/style.css" rel="stylesheet" /></head><body><div class="container"><div class="card card0"><div class="border"><h2>Al Pacino</h2><div class="icons"><i class="fa fa-instagram" aria-hidden="true"></i><i class="fa fa-dribbble" aria-hidden="true"></i><i class="fa fa-twitter" aria-hidden="true"></i><i class="fa fa-facebook" aria-hidden="true"></i></div></div></div><div class="card card1"><div class="border"><h2>Ben Stiller</h2><div class="icons"><i class="fa fa-instagram" aria-hidden="true"></i><i class="fa fa-dribbble" aria-hidden="true"></i><i class="fa fa-twitter" aria-hidden="true"></i><i class="fa fa-facebook" aria-hidden="true"></i></div></div></div></body></html>?img圖片可換成自己喜歡的
源碼獲取
查看博主主頁或私信博主獲取
精彩推薦更新中：
HTML5大作業(yè)實(shí)戰(zhàn)100套
??打卡 文章 更新?40??/? 100天
大家可以點(diǎn)贊、收藏、關(guān)注、評(píng)論我啦 、需要完整文件隨時(shí)聯(lián)系我或交流喲~！
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️个人相册封面卡片❤️的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ❤️六W字《计算机基础知识》（四）（建议
- 下一篇： bash shell sed 获取第一行