效果演示：
代码目录：
主要代码实现：
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天
大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~！
