滚筒效果

最新推荐文章于 2022-09-14 11:41:24 发布

baoleilei6

最新推荐文章于 2022-09-14 11:41:24 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/qq_34629352/article/details/52372250

版权

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	#wrap{width: 320px;border: 1px solid #999;margin: 20px auto;}
	#wrap div{width: 100%;height: 40px;text-align: center;border-bottom: 1px solid lightgray;background: cyan;
	transform: rotateX(90deg);
	transition:all 1s cubic-bezier(1, 1.75, 0.88,-0.08);
	transform-origin: top;
	}
	span{display: block;line-height: 40px;}

	/#wrap:hover div{transform: rotateX(0);}/

	</style>
	</head>
	<body>
	<div id="wrap">
	<div><span>sapn1</span></div>
	<div><span>sapn2</span></div>
	<div><span>sapn3</span></div>
	<div><span>sapn4</span></div>
	<div><span>sapn5</span></div>
	<div><span>sapn6</span></div>
	<div><span>sapn7</span></div>
	<div><span>sapn8</span></div>
	<div><span>sapn9</span></div>
	<div><span>sapn10</span></div>
	<div><span>sapn11</span></div>
	<div><span>sapn12</span></div>
	</div>
	</body>
	<script type="text/javascript">
	var wrap = document.getElementById('wrap');
	var divs = wrap.getElementsByTagName('div');

	wrap.onclick = function(){
	for (var i = 0; i < divs.length; i++) {
	divs[i].style.transform = 'rotateX(0)';
	divs[i].style.transitionDelay = i*0.3 + 's';
	}
	}


	</script>
	</html>