css实现图片百叶窗效果

作品很翻车啊：

用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="data:images/1.jpg"><div class="zc">zvc</div></li><li><img src="data:images/2.jpg"><div class="zc">zvc</div></li><li><img src="data:images/3.jpg"><div class="zc">zvc</div></li><li><img src="data:images/4.jpg"><div class="zc">zvc</div></li><li><img src="data:images/5.png"><div class="zc">zvc</div></li></ul>
</body>

css实现图片百叶窗效果相关推荐

html5如何将图片堆叠代码,css实现图片堆叠效果的方法介绍
css实现图片堆叠效果的方法介绍发布时间:2020-04-03 13:49:30 来源:亿速云阅读:51 作者:小新今天小编给大家分享的是css实现图片堆叠效果的方法介绍,很多人都不太了解,今天 ...
html图片轮播怎么写,用js和CSS写图片切换效果（轮播图）
用js和CSS写图片切换效果(轮播图). ** 学习前提** 了解CSS伪类元素,css3过度效果对js拥有基础的了解. 清楚图片切换原理. CSS3轮播图 body{ background:#cc ...
css实现图片悬浮效果
css实现图片悬浮效果 HTML代码 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
纯CSS实现图片百叶窗展示效果
纯CSS图片百叶窗首先给大家看一下完成效果主要思路:其实这个百叶窗还是利用了一种障眼法,我们看上去是鼠标移动上去之后,图片展开了,其实这些图片在原地根本没有动,只不过是我们把这些图片放在了一个列表 ...
html图片自动滚动播放器,jQuery+css实现图片滚动效果(附源码)
bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间 ...
css背景图片半透明效果
css 设置背景色半透明效果,参数 background:rgba(x,x,x,x) 最后一个a表示半透明,取值是0-1
code block怎样实现图形界面_纯CSS实现图片百叶窗展示效果
主要思路:其实这个百叶窗还是利用了一种障眼法,我们看上去是鼠标移动上去之后,图片展开了,其实这些图片在原地根本没有动,只不过是我们把这些图片放在了一个列表里,相互叠加,鼠标移动的同时改变列表的宽度. ...
HTML和CSS实现图片翻转效果
实现图片翻转,首先来分析一下我们希望实现的是怎样的翻转效果?又该如何去实现呢? 一.希望实现的效果页面上的图片在光标悬停在上面的时候会发生翻转效果,翻转过后显示出背面的说明文字. 鼠标没有悬停在上面 ...
如何做一个炫酷的动画网站-css实现图片上下浮动效果
目前网站制作技术已经非常成熟.所以要实现一个炫酷的动画网站还是非常容易,现在通过js和css就都能实现.直接css就能实现各种效果,下面我们来通过一个小动画看看如何用css来实现让你的网站图片上下浮动 ...

css实现图片百叶窗效果

css实现图片百叶窗效果相关推荐

最新文章

热门文章