HTML+CSS+JS实现 ❤️乐队成员图片展示ui特效❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️乐队成员图片展示ui特效❤️
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
????????效果演示：
?
???代碼目錄：
?
主要代碼實現：
CSS樣式：
@charset "utf-8"; /* CSS rest */body {font-size: 12px;font-family: "微軟雅黑"; }* {margin: 0;padding: 0; }a {text-decoration: none; }ul, li, ol {list-style: none; }img {border: none; }input, select {vertical-align: middle; }table {border-collapse: collapse;border-spacing: 0; }caption, th {text-align: left;font-weight: normal; }.tl {text-align: left !important; }.none {display: none; }.le {float: left; }.ri {float: right; }body {width: 100%;height: auto;background: url(../imgs/banner_02.jpg) #4365b3 no-repeat 50% 0; }.logo, .mainbody, .footer {width: 1003px;margin: 0 auto;overflow: hidden; }.artist h2, .message_board h2 {height: 80px;line-height: 80px;font-size: 26px;font-weight: 500;color: #dadada;text-align: center; }.member {height: auto;overflow: hidden; }.member li {width: 250px;height: 231px;text-align: center;float: left;margin-bottom: 15px; }.member li img {width: 145px;height: 145px;border: 5px solid #fff;border-radius: 50%;/* W3C syntax */transition: border-radius 1s;-moz-transition: border-radius 1s;/* Firefox 4 */-webkit-transition: border-radius 1s;/* Safari 和 Chrome */-o-transition: border-radius 1s;/* Opera */style.mozBorderRadius: 50%;style.webkitBorderRadius: 50%; }.member li img:hover {style.mozBorderRadius: 0;style.webkitBorderRadius: 0;border-radius: 0; }.member p {font-family: "時尚中黑簡體";line-height: 24px;color: #fff;font-size: 14px; }.member p span {font-size: 16px; }部分HTML代碼 :
<!DOCTYPE HTML> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>圖片劃過變方</title><link rel="stylesheet" type="text/css" href="css/conn.css"></head><body><div><div class="mainbody"><div class="artist"><h2>成員展示</h2><div class="member"><ul id="chengyuan"><li><a href="" class="tap" title="lx"><img src="imgs/1.jpg" /><p><span>主唱</span><br />樂團主唱</p></a></li><li><a href="" class="tap"><img src="imgs/2.jpg" /><p><span>主唱</span><br />樂團主唱</p></a></li><li><a href="" class="tap"><img src="imgs/3.jpg" /><p><span>主唱</span><br />樂團主唱</p></a></li><li><a href="#" class="tap"><img src="imgs/4.jpg" /><p><span>貝斯</span><br />樂團貝斯</p></a></li><li><a href="#" class="tap"><img src="imgs/5.jpg" /><p><span>貝斯</span><br />樂團笛子、蕭</p></a></li><li><a href="#" class="tap"><img src="imgs/6.jpg" /><p><span>貝斯</span><br />樂團鍵盤</p></a></li><li><a href="#" class="tap"><img src="imgs/7.jpg" /><p><span>貝斯</span><br />特邀嘉賓</p></a></li><li><a href="#" class="tap"><img src="imgs/8.jpg" /><p><span>更多神秘嘉賓</span></p></a></li></ul></div></div></div></div> </body></html>上面的img圖片替換成自己喜歡的圖片
精彩推薦更新中：
HTML5大作業實戰100套
??打卡 文章 更新? 39??/? 100天
大家可以點贊、收藏、關注、評論我啦 、需要完整文件隨時聯系我或交流喲~！
總結
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️乐队成员图片展示ui特效❤️的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《springcloud超级入门》Spr
- 下一篇： php通过标识加锁,PHP通过加锁实现并