css---百叶窗效果实现

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

下代码雨

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

阅读量439

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43452154/article/details/128147512

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、效果图：

二、实现功能：

鼠标悬浮在某个图片上后，会缓慢展开该图片，其他收缩起来。当失去鼠标悬浮后，将所有图片闭合起来。

三、代码实现：

<!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>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        width: 875px;
        height: 360px;
        margin: 200px auto;
        border: 3px solid #194b8d;
        overflow: hidden;
    }
    .container ul{
        display: flex;
    }
    ul li{
        width: 80px;
        height: 360px;
        border-left: 3px solid #194b8d;
        box-shadow: 0 0 25px #000000;
        list-style: none;
        /*缓慢收缩/展开效果*/
        transition: all 2s;
    }
    ul li img{
        display: block;
        width: 540px;
        height: 360px;
    }
    ul:hover li{
        width: 80px;
    }
    ul li:hover{
        width: 540px;
    }

</style>
<body>
    <div class="container">
        <ul>
            <li><img src="https://oss.zhaojiajuwang.com/img/goods/416/146832/371445_540X360.jpg"></img></li>
            <li><img src="https://oss.zhaojiajuwang.com/img/goods/418/149395/379287_540X360.jpg"></img></li>
            <li><img src="https://oss.zhaojiajuwang.com/img/goods/456/170379/436061_540X360.jpg"></img></li>
            <li><img src="https://oss.zhaojiajuwang.com/img/goods/399/166309/424304_540X360.jpg"></img></li>
            <li><img src="https://oss.zhaojiajuwang.com/img/goods/255/118977/307822_540X360.jpg"></img></li>
        </ul>
    </div>
</body>
</html>