CSS制作百叶窗效果

在网上冲浪无意中看到一个百叶窗效果，就想小试牛刀，用html+css手搓出来。

一、素材准备

整个百叶窗效果的动画素材仅需几张照片即可，我的成品是有5张照片的，这里仅展示了三张，但无伤大雅，接下来进入正题

二、页面元素搭建

其实整个百叶窗就在盒子里，所以也很简单

html代码:

<div class="box">
	<ul>
            <li><img src="../img/danji.jpg" ></li>
            <li><img src="../img/dianwei.jpg" ></li>
            <li><img src="../img/diaochan.jpg" ></li>
            <li><img src="../img/kai.jpg" ></li>
            <li><img src="../img/lanlinwang.jpg" ></li>
	</ul>
</div>

css代码:

*{
	margin: 0;
	padding: 0;
}
body{
	background: url(../img/wbg.png);
}
.box{
	width: 800px;
	height: 360px;
	margin: 200px auto;
	/*溢出部分隐藏*/
	overflow: hidden;
}
.box img{
	width: 640px;
	height: 360px;
}
li{
	list-style: none;
	width: 155px;
	height: 360px;
	float: left;
	border-left: 5px solid white;
	box-shadow: -5px 0px 10px black;
	transition: all 0.5s linear;
}

至此页面就已经完成了，接下来是动画效果，别眨眼，超简单

百叶窗动画效果

css代码:

/*鼠标悬浮在ul上，让ul变小*/
.box ul:hover li{
	width: 35px;
}
/*鼠标悬浮到某个li上，让li变大*/
.box ul li:hover{
	width: 635px;
}

你没看错，是的，就这几行css代码就可以实现百叶窗效果，以上就是百叶窗效果的实现过程

TitanIDE项目部署

#### 三、后语 本次制作使用的开发工具是[TitanIDE](https://www.cloudtogo.cn/product-TitanIDE?jjwp_11)，它是一款云原生集成开发工具,内置海量开发模板，python、java、golang等开发语言模板，浏览器打开即可使用，无需配置繁琐的开发环境

同时内置gpt4.0辅助开发工具，比通义灵码更好用，更快捷

除此以外还是分享链接式协助开发，可以做到实时编辑、同步运行、比git版本控制更快捷、更高效

感兴趣的掘友们快去试试吧，会给你带来不少惊喜的！！！