如何用css实现百叶窗效果

好喜欢前端

已于 2022-11-08 20:11:47 修改

阅读量1.6k

点赞数 3

文章标签： html 前端

于 2022-10-27 00:08:29 首次发布

本文链接：https://blog.csdn.net/qq_53983648/article/details/127543363

版权

本文介绍了如何使用CSS创建百叶窗效果，包括创建div、设置无序列表及图片、调整样式，如宽高、外边距、边框、overflow、弹性布局，并通过transition设置过渡时间和hover伪类实现动画效果。

摘要由CSDN通过智能技术生成

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="