css3 实现纸带翻转效果

最新推荐文章于 2023-04-11 19:35:13 发布

高菊红

最新推荐文章于 2023-04-11 19:35:13 发布

阅读量356

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/gaojuhong/article/details/79411283

版权

CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>css3 实现纸带翻转效果</title>
		<style type="text/css" media="screen">
			*{margin:0;padding:0;}
			html,body{display:flex;flex-direction:column;justify-content:center;align-items: center;width:100%;height:100%;background-color:#334D5C;}
			.msg{color:#fff;margin:20px 0;}
			.cont{display:flex;perspective: 1000px;transform-style: preserve-3d;transform:translate3d(0,0,0) rotateY(40deg);}
			.fold{width:20px;height:150px;background-color:rgba(255,255,255,.8);animation:move 4s infinite ease;transform-origin:center top;}
			.fold:nth-of-type(1){animation-delay: .05s;}
			.fold:nth-of-type(2){animation-delay: .1s;}
			.fold:nth-of-type(3){animation-delay: .15s;}
			.fold:nth-of-type(4){animation-delay: .2s;}
			.fold:nth-of-type(5){animation-delay: .25s;}
			.fold:nth-of-type(6){animation-delay: .3s;}
			.fold:nth-of-type(7){animation-delay: .35s;}
			.fold:nth-of-type(8){animation-delay: .4s;}
			.fold:nth-of-type(9){animation-delay: .45s;}
			.fold:nth-of-type(10){animation-delay: .5s;}
			.fold:nth-of-type(11){animation-delay: .55s;}
			.fold:nth-of-type(12){animation-delay: .6s;}
			.fold:nth-of-type(13){animation-delay: .65s;}
			.fold:nth-of-type(14){animation-delay: .7s;}
			.fold:nth-of-type(15){animation-delay: .75s;}
			.fold:nth-of-type(16){animation-delay: .8s;}
			.fold:nth-of-type(17){animation-delay: .85s;}
			.fold:nth-of-type(18){animation-delay: .9s;}
			.fold:nth-of-type(19){animation-delay: .95s;}
			.fold:nth-of-type(20){animation-delay: 1s;}
			.fold:nth-of-type(21){animation-delay: 1.05s;}
			.fold:nth-of-type(22){animation-delay: 1.1s;}
			.fold:nth-of-type(23){animation-delay: 1.15s;}
			.fold:nth-of-type(24){animation-delay: 1.2s;}
			.fold:nth-of-type(25){animation-delay: 1.25s;}
			.fold:nth-of-type(26){animation-delay: 1.3s;}
			.fold:nth-of-type(27){animation-delay: 1.35s;}
			.fold:nth-of-type(28){animation-delay: 1.4s;}
			.fold:nth-of-type(29){animation-delay: 1.45s;}
			.fold:nth-of-type(30){animation-delay: 1.5s;}
			.fold:nth-of-type(31){animation-delay: 1.55s;}
			.fold:nth-of-type(32){animation-delay: 1.6s;}
			.fold:nth-of-type(33){animation-delay: 1.65s;}
			.fold:nth-of-type(34){animation-delay: 1.7s;}
			.fold:nth-of-type(35){animation-delay: 1.75s;}
			.fold:nth-of-type(36){animation-delay: 1.8s;}
			.fold:nth-of-type(37){animation-delay: 1.85s;}
			.fold:nth-of-type(38){animation-delay: 1.9s;}
			.fold:nth-of-type(39){animation-delay: 1.95s;}
			.fold:nth-of-type(40){animation-delay: 2s;}
			.fold:nth-of-type(41){animation-delay: 2.05s;}
			.fold:nth-of-type(42){animation-delay: 2.1s;}
			.fold:nth-of-type(43){animation-delay: 2.15s;}
			.fold:nth-of-type(44){animation-delay: 2.2s;}
			.fold:nth-of-type(45){animation-delay: 2.25s;}
			.fold:nth-of-type(46){animation-delay: 2.3s;}
			.fold:nth-of-type(47){animation-delay: 2.35s;}
			.fold:nth-of-type(48){animation-delay: 2.4s;}
			.fold:nth-of-type(49){animation-delay: 2.45s;}
			.fold:nth-of-type(50){animation-delay: 2.5s;}
			@keyframes move{
				0%{transform:rotateX(0);}
				100%{transform:rotateX(360deg);}
			}
		</style>
	</head>
	<body>
		<h1 id="msg" class="msg">Move the mouse around</h1>
		<div id="cont" class="cont">
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
			<div class="fold"></div>
		</div>
		<script>
			(function () {
				var cont = document.querySelector('#cont');
				document.addEventListener('mousemove',upRotation, false);
				function upRotation(e){
					document.querySelector('#msg').style.opacity = 0;
					cont.style.transform = 'rotateY(' + e.x / 10 + 'deg) rotateZ(-' + e.y / 10 + 'deg)'; 
				}
			})();
		</script>
	</body>
</html>

高菊红

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 实现纸带翻转效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;css3 实现纸带翻转效果&lt;/title&gt; &lt;style type="text/css" media="s
复制链接

扫一扫