css代码实现百叶窗效果

最新推荐文章于 2024-07-25 15:07:09 发布

小林哥233

最新推荐文章于 2024-07-25 15:07:09 发布

阅读量410

点赞数 1

分类专栏：百叶窗文章标签： html css

本文链接：https://blog.csdn.net/qq_51223089/article/details/117106672

版权

百叶窗专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css实现百叶窗效果
如果不知道百叶窗效果是什么样子的小伙伴，建议百度一下哦
1.首先，让我们看一下文件结构哦。
注意，我们要使用的是云听下的images哦
以下是代码实现部分

<!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>百叶窗</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        body{
            background-color: rgb(73, 212, 166);
        }
        .box{
            width: 800px;
            height: 300px;
            margin: 200px auto;
            overflow: hidden;
        }
        .box li{
            float: left;
            position: relative;
            width: 200px;
            height: 300px;
        }
        li{
            list-style: nones;
        }
        .box li .text{
            position: absolute;
            left: 0;
            bottom: 0;
            font-size: 16px;
            color: #fff;
            width: 100%;
            line-height: 30px;
            text-align: center;
            background-color: rgba(0,0,0,.3);           
        }
         .box:hover li{     
            width: 66px;
        } 
        .box li:hover{
            width: 600px;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>
            <img src="./云听/images/教主.jpg" alt=""width=700px height="300px">
            <div class="text">xiaolin</div>
        </li>
        <li>
            <img src="./云听/images/数羊.jpg" alt=""width=600px height="300px">
            <div class="text">xiaolin</div>
        </li>
        <li>
            <img src="./云听/images/许嵩.jpg" alt=""width=600px height="300px">
            <div class="text">xiaolin</div>
        </li>
        <li>
            <img src="./云听/images/说唱.jpg" alt=""width=600px height="300px">
            <div class="text">xiaolin</div>
        </li>
    </ul>
</body>
</html>

看效果图
在这里插入图片描述

小林哥233

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css代码实现百叶窗效果

css实现百叶窗效果如果不知道百叶窗效果是什么样子的小伙伴，建议百度一下哦1.首先，让我们看一下文件结构哦。注意，我们要使用的是云听下的images哦以下是代码实现部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
复制链接

扫一扫

专栏目录