HTML+CSS+JS实现 ❤️乐队成员图片展示ui特效❤️....background: url(../imgs/ba

效果演示：

代码目录：

主要代码实现：

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天

大家可以点赞、收藏、关注、评论我啦、需要完整文件随时联系我或交流哟~！

在这里插入图片描述