uniapp+css百叶窗效果

css

<style lang="scss">
*{
	margin: 0;
	padding: 0;
}
.container{
	margin: 100px auto;
	border: 3px solid #194b8d;
	width: 500px;
	height: 200px;
	overflow: hidden;
}
.container ul{
	display: flex;
}
.container li{
	width: 160px;
	height: 500px;
	list-style: none;
	border-left: 1px solid #194b8d;
	box-shadow: 0 0 25px #000;
	transition: all 0.5;
}
.container li image {
	display: block;
	width: 500px;
	height: 200px;
}
.container ul:hover li{
	width: 40px;
}
.container ul li:hover{
	width: 300px;
}
</style>

html

<view class="container">
		<ul>
			<li><image src="/static/swiper/imageOne.jpg"></image></li>
			<li><image src="/static/swiper/imageThree.jpg"></image></li>
			<li><image src="/static/swiper/imageTwo.jpg"></image></li>
			<li><image src="/static/swiper/imageOne.jpg"></image></li>
			<li><image src="/static/swiper/imageTwo.jpg"></image></li>
		</ul>
	</view>