纯CSS实现图片百叶窗展示效果


纯CSS图片百叶窗

首先给大家看一下完成效果
纯CSS实现图片百叶窗展示效果主要思路:其实这个百叶窗还是利用了一种障眼法,我们看上去是鼠标移动上去之后,图片展开了,其实这些图片在原地根本没有动,只不过是我们把这些图片放在了一个列表里,相互叠加,鼠标移动的同时改变列表的宽度。

第一步:构建一个百叶窗框架

html代码:

 <div class="container">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

css代码:

  *{
margin: 0;
padding: 0;
}
.container{
margin: 100px auto;
border: 2px solid #568bc7;
width: 800px;
height: 300px;
}
.container ul{
display: flex;
}
.container li{
width: 160px;
height: 300px;
list-style: none;
border-left: 1px solid #194b8d;
}
.container li img{
display: block;
width: 800px;
height: 300px;
}

需要注意一下:这里的li可能需要手动计算等分的宽度,虽然可以用弹性盒子实现自动等分,但是我后面加了hover之后发现会有BUG,大家可以试试,这里就不使用弹性盒子了
现在得到如下框架:
纯CSS实现图片百叶窗展示效果

第二步:插入图片,使用hover做出特效

我这里插入了五张油画

这里我们可以发现图片超过了我们容器的范围
纯CSS实现图片百叶窗展示效果

此时我们在外容器中添加,做一个溢出隐藏
overflow: hidden;

纯CSS实现图片百叶窗展示效果
这样一个百叶窗就出具规模了
如何让图片和演示GIF一样动起来呢?
这里涉及到一段核心代码

   .container ul:hover li{
width: 40px;
}
.container ul li:hover{
width: 600px;
}

这个Demo 其实是对:hover属性灵活运用的一个练习,
首先要注意,两行代码的顺序不可以更换
首先鼠标移入 ul 的大容器内时,我们首先要让 li 的宽度变小,紧接着触发下一行的hover ,移入到每一个 li 的时候,让 li 的宽度变大

第三步:细节处理

完成以上之后,我们看到整个过程非常的生硬
这里可以加入过渡属性,让变化变得更加平滑 ,同时给每一个 li 的左边框加上一点阴影效果,让他看起来更加的立体

    box-shadow: 0 0 25px #000;
transition: all 0.5s;

最后就完成啦

纯CSS实现图片百叶窗展示效果
这里是完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
margin: 100px auto;
border: 2px solid #568bc7;
width: 800px;
height: 300px;
overflow: hidden;
}
.container ul{
display: flex;
}
.container li{
width: 160px;
height: 300px;
list-style: none;
border-left: 1px solid #194b8d;
box-shadow: 0 0 25px #000;
transition: all 0.5s;
}
.container li img{
display: block;
width: 800px;
height: 300px;
}
.container ul:hover li{
width: 40px;
}
.container ul li:hover{
width: 600px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><img src="./img/tq1.jpg" alt=""></li>
<li><img src="./img/tq2.jpg" alt=""></li>
<li><img src="./img/tq3.jpg" alt=""></li>
<li><img src="./img/tq4.jpg" alt=""></li>
<li><img src="./img/tq5.jpg" alt=""></li>
</ul>
</div>
</body>
</html>

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

纯CSS实现图片百叶窗展示效果

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 纯CSS实现图片百叶窗展示效果
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏