css3 transition实现图片轮播百叶窗效果

最新推荐文章于 2023-03-28 19:49:04 发布

Supreme_lwl

最新推荐文章于 2023-03-28 19:49:04 发布

阅读量1.1k

点赞数 1

分类专栏： css 前端

本文链接：https://blog.csdn.net/qq_42515626/article/details/104660158

版权

前端同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

css3 transition实现图片轮播百叶窗效果：

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
	<title>css3百叶窗</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		.container{
			
			height: 500px;
			width: 800px;
			margin: 100px auto;
			position: relative;
		}
		ul,li{
			list-style: none;
		}
		.box li{
			width: 200px;
			height: 500px;
			float: left;
			position: relative;
			overflow: hidden;
		}
		.box li div{
			width: 200px;
			height: 500px;
			position: absolute;
			left: -200px;
		}
		.box li div:nth-child(1){
			background-image: url(http://img4.imgtn.bdimg.com/it/u=3613118327,4162567377&fm=26&gp=0.jpg);
		}
		.box li div:nth-child(2){
			background-image: url(https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg);
		}
		.box li:nth-child(1) div{
			background-position: 0;
		}
		.box li:nth-child(2) div{
			background-position: -200;
		}
		.box li:nth-child(3) div{
			background-position: -400;
		}
		.box li:nth-child(4) div{
			background-position: -600;
		}

	/*~获取相邻兄弟改变div的位置*/
		input#ra1:checked ~ .box li div:nth-child(1){left:0;transition:0.6s;}
        input#ra2:checked ~ .box li div:nth-child(2){left:0;transition:0.6s;}

	</style>
</head>
<body>
	<div class="container">

		<input type="radio" id="ra1" name="choose" checked><label for="ra1">1</label>
        <input type="radio" id="ra2" name="choose"><label for="ra2">2</label>
     


		<ul class="box">
			<li><div></div><div></div></li>
			<li><div></div><div></div></li>
			<li><div></div><div></div></li>
			<li><div></div><div></div></li>
		</ul>
	</div>
</body>
</html>