纯css实现手风琴效果

最新推荐文章于 2024-06-12 20:47:03 发布

今天吃点啥‍️

最新推荐文章于 2024-06-12 20:47:03 发布

阅读量260

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/buaichiluobo/article/details/125523802

版权

效果图如下：鼠标放置到页面，完整展示一张图片，其他图片折叠显示

css部分我使用了less预处理语言

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.box{
    ul{
        width:470px;
        height: 120px;
        border: 2px solid #000;
        margin: 20px auto ;
        overflow: hidden;
        transition: all .3s;
        li{
            width: 90px;
            height: 120px;
            position: relative;
            float: left;
            transition: all .5s;
            img{
                width: 200px;
                height: 120px;
                display: inline-block;  
            }
            p{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height:100%;
                background-color: rgba(0, 0, 0, 0.3);
                transition: all .3s;
            }
            &:nth-child(1){
                width: 200px;
            }
        }
      
    }
    ul:hover li{
        width: 90px;
    }
    ul li:hover{
        width: 200px;
    }
    ul li p:hover{
        background-color:rgba(255, 255, 255, 0);
    }
}

html部分

<body>
    <div class="box">
        <ul>
            <li>
                <img src="./img/4.jpg" alt="">
                <p></p>
            </li>
            <li>
                <img src="./img/5.jpg" alt="">
                <p></p>
            </li>
            <li>
                <img src="./img/6.jpg" alt="">
                <p></p>
            </li>
            <li>
                <img src="./img/7.jpg" alt="">
                <p></p>
            </li>
        </ul>
    </div>
</body>