css实现图片百叶窗效果

我就是我 2021-07-26 12:52 383阅读 0赞

作品很翻车啊：

![20200506135237186.gif][]

用css实现了一款百叶窗效果，但是不知道图片不能完全显出来，有谁知道怎样使大的图片自适应小窗口吗，太难了爬。。。

后续更新一下：只需在css中加入：

img{
        width: 805px;
        height: 320px;
    }

![20200515185338254.gif][]

这样即可，我太笨了。。。。。。。

以下是完整的css代码：

*{
        margin: 0;
        padding: 0;
    }
    
    ul,ol{
        list-style: none;
    }
    body{
        background: url("../images/bd.jpg");
    }
    img{
        width: 805px;
        height: 320px;
    }
    .main{
        width: 805px;
        height: 320px;
        margin: 150px auto;
        overflow: hidden;
    }
    li{
        width: 160px;
        float: left;
        border-left: 1px solid #fff;
        position: relative;
        transition: all 1s;
    }
    .zc{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color:#fff;
        background: rgba(0, 0, 0, 0.5);
    }
    .main:hover li {
        width: 40px;
    
    }
    .main li:hover{
        width: 640px;
    }

HTML：

[20200506135237186.gif]: /images/20210726/b77e747c0db048f6a930dc079e433ef6.png
[20200515185338254.gif]: /images/20210726/5b60ebbeb97949239b511b3ce1e41277.png