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

最新推荐文章于 2022-09-26 16:12:01 发布

热爱前端的小君同学

最新推荐文章于 2022-09-26 16:12:01 发布

阅读量534

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_37815596/article/details/80074967

前端专栏收录该内容

105 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现3D旋转动画的方法。通过设置不同元素的动画及变换属性，创建了一个立体的视觉效果。该效果包括多个方向的旋转动画，并控制了元素的透明度和位置。

效果图如下：

代码如下：

<!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>