HTML+CSS实现百叶窗效果

最新推荐文章于 2024-04-29 02:24:27 发布

大聪明码农徐

最新推荐文章于 2024-04-29 02:24:27 发布

阅读量1.5k

点赞数 3

分类专栏：前端HTML+CSS常见问题与部分实践应用文章标签： css html css3

本文链接：https://blog.csdn.net/qq_45799465/article/details/122703002

版权

前端HTML+CSS常见问题与部分实践应用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

    <style>
        /* 清除默认边距 */
         *{
            margin: 0;
            padding: 0;
        }
        /* 去除li的默认样式 */
        li{
            list-style: none;
        }
        /* 去除a的下划线 */
        a{
            text-decoration: none;
        }
        /* 清除img撑大3像素问题 */
        img{
            display: block;
        }
        body{
            overflow: hidden;
            background-color: white;
        }
        ul{
            margin: auto;
            margin-top: 100px;
            width: 805px;
            height: 320px;
            /* 溢出隐藏 */
            overflow: hidden;
            display: flex;
            /* 盒子阴影 */
            box-shadow: 2px 2px 5px 5px ;
        }
        ul li {


/* 关键点一：当没有鼠标悬停时，正常宽度为160px */
            width: 160px;


            border-left: 1px solid black;
            position: relative;
            /* 过渡动画，不会的详见我的博客 css3过渡属性*/
            transition: 0.5s;
            box-shadow: -2px 0 5px 1px;
        }


/* 关键点二：当ul上有鼠标悬停时所有的li宽度都变为40px */
        ul:hover li{
            width: 40px;
        }


/* 关键点三 ：当某个li上有鼠标悬停时这个li的宽度为640px*/
        ul li:hover{
            width: 640px;
        }

        
        /* 设置图片下方半透明黑框以及字体 */
        ul li a{
            display: block;
            width: 640px;
            position: absolute;
            bottom: 0;
            padding: 20px;
            color: white;
            font-size: 30px;
            text-align: left;
            background-color: rgb(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <ul>
        <li><img src="img/img1.jpg" alt=""><a href="">功 夫 熊 猫</a></li>
        <li><img src="img/img2.jpg" alt=""><a href="">玩 具 总 动 员</a></li>
        <li><img src="img/img3.jpg" alt=""><a href="">外 星 人</a></li>
        <li><img src="img/img4.jpg" alt=""><a href="">飞 屋 历 险 记</a></li>
        <li><img src="img/img5.jpg" alt=""><a href="">汽 车 总 动 员</a></li>
    </ul>
</body>

运行结果：

码字不易，点个赞吧~~~

大聪明码农徐

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML+CSS实现百叶窗效果

<style> /* 清除默认边距 */ *{ margin: 0; padding: 0; } /* 去除li的默认样式 */ li{ list-style: none; } /* 去除a的下划线 */ a{ text-decoration: none; ...
复制链接

扫一扫