HTML+css3实现 ❤️全屏图片手风琴效果❤️

2024-01-24 16:31:28

代码目录：

主要代码实现：

css样式：

* {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

.list {
    width: 1000px;
    height: 500px;
    margin: 150px auto 0;
}

.list li {
    /* float:left; 可以使块级元素宽度可以被内容撑开*/
    float: left;
    /* 不给宽高是因为内容会被撑开 */
    max-width: 700px;
    height: 500px;
    box-shadow: 0 0 10px #ccc;
}

/* 未选中时可以点击范围 */

input {
    /* poacity:0；点击框透明度为0 */
    opacity: 0;
    /* cursor:pointer鼠标变为小手标记 */
    cursor: pointer;
    width: 100px;
    height: 500px;
    /* 点击时过渡效果 */
    transition: 0.2s;
}

/* 选中是宽700px */

input:checked {
    width: 700px;
}

/* 背景图no-repeat不要平铺不要重复  center/cover居中/覆盖整个li */

.list li:nth-child(1),
.list ul :nth-child(1) .bj {
    background: url(../img/1.jpg) no-repeat center/cover;
}

.list li:nth-child(2),
.list ul :nth-child(2) .bj {
    background: url(../img/2.jpg) no-repeat center/cover;
}

/* 
.list li:nth-child(1)和.list ul :nth-child(1)都是选择同一个元素，啥原理不清楚
*/

.list ul :nth-child(3),
.list ul :nth-child(3) .bj {
    background: url(../img/3.jpg) no-repeat center/cover;
}

.list ul :nth-child(4),
.list ul :nth-child(4) .bj {
    background: url(../img/4.jpg) no-repeat center/cover;
}

.list li .bj {
    /* 让全部.bj的背景变透明不显示于页面之上 */
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    /* 100vw=100%视口高度
     100vh=100%视口宽度
  */
    width: 100vw;
    height: 100vh;
    /* 此时背景层级太高盖住.list了，用z-index让层级变成负数 */
    z-index: -1;
    /* css3滤镜效果 */
    filter: blur(2.3px);
}

/* 当点击input的时候inpu的兄弟.bj的背景就不透明了，显示于页面之上 */

input[name="swith"]:checked~.bj {
    opacity: 1;
}

html :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="list">
        <ul>
            <li>
                <input type="radio" name="swith">
                <div class="bj">
                    <div></div>
                </div>
            </li>
            <li>
                <input type="radio" name="swith" checked>
                <div class="bj">
                    <div></div>
                </div>
            </li>
            <li>
                <input type="radio" name="swith">
                <div class="bj">
                    <div></div>
                </div>
            </li>
            <li>
                <input type="radio" name="swith">
                <div class="bj">
                    <div></div>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>

精彩推荐更新中：

HTML5大作业实战100套

打卡文章更新 36 / 100天

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

码农公寓

代码目录：

主要代码实现：

css样式：

html :

精彩推荐更新中：

HTML5大作业实战100套

相关文章