如何用css实现百叶窗效果

1.效果图

利用纯css实现百叶窗效果

效果如下：

2.代码如下：

1.创建一个div

2.设置无序列表，插入事先准备好的图片


<!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>css实现百叶窗效果</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="./img/01.jpg" alt=""></li>
            <li><img src="./img/02.jpg" alt=""></li>
            <li><img src="./img/03.jpg" alt=""></li>
            <li><img src="./img/04.jpg" alt=""></li>
            <li><img src="./img/05.jpg" alt=""></li>
        </ul>
    </div>
</body>

</html>

3.设置样式

1.设置box的宽高外边距边框 overflow（溢出隐藏）

overflow：给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。（也可以利用overflow：hidden清除浮动）

注意：利用通配符*{

margin=0；

padding=0；

}

清除原有边框样式

利用选择器分别设置每个部分的样式

2. 因为ul是块级元素，所以为了方便可以把ul设置为弹性布局

因为ul li是自带内外边距的标签，可以更灵活方便的控制网页的标签

3.利用transition设置百叶窗过渡时间

transitition为css3动画内容，实现百叶窗效果的重要样式，过渡时间设置单位以s/ms为单位。

4.把img设置为块级元素，设置宽高

5.设置hover效果（hover为伪类选择器）

hover: 鼠标伪类，冒号（:）后面的hover 是固定的写法,冒号（:）前面是要添加hover伪类的目标

(目标尽量不要写成标签选择器)，指定的目标：最好是单一的。

作用：鼠标移入移出的时候触发指定样式

鼠标移入时；触发 hover的样式

鼠标移出时：回到初始样式。整个hover中的代码，都不会被加载

使用hover伪类时，将子代(后代)选择器写在hover之后会表示：

：前面是触发者

hover之后的是显示者

* {
    margin: 0;
    padding: 0;
}

.box {
    margin: 100px auto;
    border: 1px solid royalblue;
    width: 700px;
    height: 500px;
    overflow: hidden;
}
.box ul {
    display: flex;
}

.box li {
    width: 100px;
    height: 500px;
    list-style: none;
    border-left: 1px solid royalblue;
    box-shadow: 0 0 25px #000;
    transition: all 0.5s;
}
.box li img{
    display: block;
    width: 600px;
    height: 500px;
    background-repeat: on-repeat;
}
.box ul:hover li{
    width: 40px;
}
.box ul li:hover{
    width: 600px;
}

效果视频：

百叶窗

以上就是关于css制作百叶窗效果的，利用了css相关内容来实现的，有兴趣的小伙伴可以自己试一试。