css实现图片百叶窗效果

最新推荐文章于 2024-05-10 10:59:14 发布

乘风破浪PL

最新推荐文章于 2024-05-10 10:59:14 发布

阅读量1k

点赞数 4

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_44699174/article/details/105949404

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

作品很翻车啊：

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

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

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

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

以下是完整的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：

<body>
    <ul class="main">
        <li>
            <img src="images/1.jpg">
            <div class="zc">zvc</div>
        </li>
        <li>
            <img src="images/2.jpg">
            <div class="zc">zvc</div>
        </li>
        <li>
            <img src="images/3.jpg">
            <div class="zc">zvc</div>
        </li>
        <li>
            <img src="images/4.jpg">
            <div class="zc">zvc</div>
        </li>
        <li>
            <img src="images/5.png">
            <div class="zc">zvc</div>
        </li>
    </ul>
</body>

乘风破浪PL

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
css实现图片百叶窗效果

作品很翻车啊：用css实现了一款百叶窗效果，但是不知道图片不能完全显出来，有谁知道怎样使大的图片自适应小窗口吗，太难了爬。。。css代码如下要修改哪里呢：*{ margin: 0; padding: 0;}ul,ol{ list-style: none;}body{ background: url("../images/bd.jpg");...
复制链接

扫一扫