利用旋转的知识制作出隧道效果

╰+攻爆jí腚メ 2022-05-26 04:25 228阅读 0赞

效果图如下：

![70][]

代码如下：

<!doctype html>
    <html onselectstart = "return false">
    <head>
    	<meta charset="UTF-8">
    	<title>2</title>
    	<style type="text/css">
    		*{padding: 0;margin: 0;}
    		a{text-decoration: none;color: #fff;}
    		body{background: #000;overflow: hidden;}
    		#content{width: 100px;height: 100px;position: absolute;top: 200px;left: 47%;transform-style: preserve-3d;animation: run 3s linear infinite;}
    		.d{font-size: 50px;background: -webkit-linear-gradient(top, #28343b 0%,#828c95 16%,#828c95 87%,#28343b 100%);width: 100px;height: 100px;position: absolute;line-height: 100px;text-align: center;}
    		.d1{top: 100px;animation: runA 3s linear infinite;}
    		.d11{animation: runA 3s 1s linear infinite;opacity: 0;}
    		.d111{animation: runA 3s 2s linear infinite;opacity: 0;}
    		.d2{top: 0px;animation: runB 3s linear infinite;}
    		.d22{animation: runB 3s 1s linear infinite;opacity: 0;}
    		.d222{animation: runB 3s 2s linear infinite;opacity: 0;}
    		.d3{top: 50px;left: -50px;animation: runC 3s linear infinite;}
    		.d33{animation: runC 3s 1s linear infinite;opacity: 0;}
    		.d333{animation: runC 3s 2s linear infinite;opacity: 0;}
    		.d4{top: 50px;left: 50px;animation: runD 3s linear infinite;}
    		.d44{animation: runD 3s 1s linear infinite;opacity: 0;}
    		.d444{animation: runD 3s 2s linear infinite;opacity: 0;}
    		@keyframes runA{
    			from{transform:perspective(10px) rotateX(12.5deg) rotateZ(180deg) translateY(200px);opacity: 1;}
    			to{transform:perspective(10px) rotateX(12.5deg) rotateZ(180deg) translateY(-100px);opacity: 1;}
    		}
    		@keyframes runB{
    			from{transform:perspective(10px) rotateX(-12.5deg) translateY(200px);opacity: 1;}
    			to{transform:perspective(10px) rotateX(-12.5deg) translateY(-100px);opacity: 1;}
    		}
    		@keyframes runC{
    			from{transform:perspective(10px) rotateY(12.5deg) rotateZ(-90deg) translateY(200px);opacity: 1;}
    			to{transform:perspective(10px) rotateY(12.5deg) rotateZ(-90deg) translateY(-100px);opacity: 1;}
    		}
    		@keyframes runD{
    			from{transform:perspective(10px) rotateY(-12.5deg) rotateZ(90deg) translateY(200px);opacity: 1;}
    			to{transform:perspective(10px) rotateY(-12.5deg) rotateZ(90deg) translateY(-100px);opacity: 1;}
    		}
    		@keyframes run{
    			from{transform:rotateZ(0deg) scale(1);}
    			50%{transform:rotateZ(180deg) scale(3);}
    			to{transform:rotateZ(360deg) scale(1);}
    		}
    	</style>
    </head>
    <body>
    	<div id="content">
    		<div class="d d1">A</div>
    		<div class="d d1 d11">A</div>
    		<div class="d d1 d111">A</div>
    		<div class="d d2">B</div>
    		<div class="d d2 d22">B</div>
    		<div class="d d2 d222">B</div>
    		<div class="d d3">C</div>
    		<div class="d d3 d33">C</div>
    		<div class="d d3 d333">C</div>
    		<div class="d d4">D</div>
    		<div class="d d4 d44">D</div>
    		<div class="d d4 d444">D</div>
    	</div>
    </body>
    </html>

[70]: /images/20220526/988b717ad20d43fd9b67d1eba9de2709.png