纯css+html手风琴效果

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情

前言

大家好，这是我发的第一篇文章，给大家介绍一个纯css+html的手风琴效果。我的思路就是利用radio的特性来实现切换效果。

效果图

html代码

  <div class="main">
        <ul class="imglist">
            <li>
                <input type="radio" name="ok" checked>
                <div class="shadow"></div>
                <div class="bg">
                    <img src="./img/redmi.png" alt="">
                </div>
            </li>
            <li>
                <input type="radio" name="ok">
                <div class="shadow"></div>
                <div class="bg">
                    <img src="./img/note9.png" alt="">
                </div>
            </li>
            <li>
                <input type="radio" name="ok">
                <div class="shadow"></div>
                <div class="bg">
                    <img src="./img/mi.jpg" alt="">
                </div>
            </li>
            <li>
                <input type="radio" name="ok">
                <div class="shadow"></div>
                <div class="bg">
                    <img src="./img/kaoxiang.png" alt="">
                </div>
            </li>
        </ul>
    </div>

css代码

    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }



    .main {
        width: 1300px;
        height: 400px;
        margin: 160px auto;
    }

    .imglist li {
        position: relative;
        float: left;
    }

    /* 设置单选框的大小并隐藏 */
    .imglist li input {
        position: relative;
        z-index: 2;
        opacity: 0;
        width: 100px;
        height: 400px;
        transition: .5s;
    }

    /* 阴影层 */
    .imglist .shadow {
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        display: block;
        width: 100px;
        height: 404px;
        background-color: rgba(0, 0, 0, .5);
        transition: .5s;
        /* 定义transition效果开始的时候 */
        transition-delay: 0.4s;
    }

    .imglist li:nth-child(1) {
        background: url(./img/redmi.png) center/cover;
    }


    .imglist li:nth-child(2) {
        background: url(./img/note9.png)center/cover;
    }


    .imglist li:nth-child(3) {
        background: url(./img/mi.jpg)center/cover;
    }


    .imglist li:nth-child(4) {
        background: url(./img/kaoxiang.png)center/cover;
    }


    /* 底下大的背景图 */
    .imglist li .bg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: .5s;
        z-index: -1;
        /* 模糊*/
        filter: blur(5px);
        opacity: 0;
    }

    .imglist li .bg img {
        width: 100%;
        height: 100%;
    }

    /* 把被选中的宽度变大 */
    .imglist li input:checked {
        width: 1000px;

    }
    
    /* :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox) /*
    /* + 相邻兄弟选择器 可选择紧接在另一元素后的元素*/
    .imglist li input:checked+.shadow {
        opacity: 0;
        transition: none;
    }
    
    /* ~选择器则表示某元素后所有同级的指定元素，强调所有的 */
    .imglist li input:checked~.bg {
        opacity: 1;
    }