css百叶窗

效果图：

 

 

 

 

 

css代码块：

<style>
    *{//默认样式清除
        margin: 0;
        padding: 0;
    }
    .content{//设置外层div的宽高，超出后隐藏
        margin: 100px auto;
        width: 1100px;
        height: 500px;
        overflow: hidden;
    }
    .content ul{
        display: flex;//让ul为flex布局
    }
    .content li{//设置li显示的宽高以及一些效果
        width: 160px;
        height: 500px;
        list-style: none;
        box-shadow: 0 0 25px #000;
        transition: all 0.7s;//延迟事件
    }
    .content li img{//设置图片为块状元素，设置图片的宽高，
        display: block;
        width: 1100px;
        height: 500px;
        object-fit: cover;//css备忘录里有记载
    }
    .content ul:hover li{//悬浮后改变其他li的宽
        width:50px;
    }
    .content ul li:hover{//悬浮后改变当前li的宽，让图片展示出来
        width:850px;
    }



</style>

html代码块：

<div class="content">
    <ul>
       <li><img src="../lol_img/lol_1.jpg" alt=""></li>
       <li><img src="../lol_img/lol_2.jpg" alt=""></li>
       <li><img src="../lol_img/lol_3.jpg" alt=""></li>
       <li><img src="../lol_img/lol_4.jpg" alt=""></li>
       <li><img src="../lol_img/lol_5.jpg" alt=""></li>
       <li><img src="../lol_img/lol_6.jpg" alt=""></li>
    </ul>
</div>