【HTML5学习笔记】12：尝试CSS层叠样式表和关键帧

最新推荐文章于 2021-10-09 10:34:58 发布

大桔骑士v

最新推荐文章于 2021-10-09 10:34:58 发布

阅读量925

点赞数

分类专栏： HTML 文章标签：层叠样式表 CSS animation keyframes div

本文链接：https://blog.csdn.net/shu15121856/article/details/72848237

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

跟着视频写的的3D隧道，用了CSS样式。建立了几个div块，用CSS改变了它的形状，然后添加关键帧使它朝着Y轴周期性移动，就形成了3D隧道的效果。

*测试代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="Keywords" content="关键词，关键字">
	<meta name="Description" content="描述信息">
	<title>3D隧道</title>

	<!-- CSS层叠样式表 -->
	<style type="text/css">
		*{margin: 0;}
		body{overflow: hidden;}/*溢出隐藏*/
		.content{
			width: 100px;
			height: 100px;
			position: absolute;
			top: 400px;
			left: 47%;
			transform-style: preserve-3d;/*添加3D属性*/
			animation: Play 3s;

		}
		.d{
			width: 100px;
			height: 100px;
			font-size: 50px;
			text-align: center;
			line-height: 100px;
			background: url(images/ok.png);
			position: absolute;
		}
		.d1{
			animation: runA 3s linear infinite;
		}
		.d2{
			animation: runA 3s 1s linear infinite;
		}
		.d3{
			animation: runA 3s 2s linear infinite;
		}

		.b1{
			animation: runB 3s linear infinite;
		}
		.b2{
			animation: runB 3s 1s linear infinite;
		}
		.b3{
			animation: runB 3s 2s linear infinite;
		}

		.c1{
			animation: runC 3s linear infinite;
		}
		.c2{
			animation: runC 3s 1s linear infinite;
		}
		.c3{
			animation: runC 3s 2s linear infinite;
		}

		.k1{
			animation: runK 3s linear infinite;
		}
		.k2{
			animation: runK 3s 1s linear infinite;
		}
		.k3{
			animation: runK 3s 2s linear infinite;
		}

		/*定义关键帧*/
		@keyframes runA{
			from{transform:perspective(10px) rotateX(17deg) rotateZ(180deg) translateY(200px)}
			to{transform:perspective(10px) rotateX(17deg) rotateZ(180deg) translateY(-100px)}/*做了移动*/
		}
		@keyframes runB{
			from{transform:perspective(10px) rotateX(-17deg) translateY(200px)}
			to{transform:perspective(10px) rotateX(-17deg) translateY(-100px)}
		}
		@keyframes runC{
			from{transform:perspective(10px) rotateY(17deg) rotateZ(-90deg) translateY(200px)}
			to{transform:perspective(10px) rotateY(17deg) rotateZ(-90deg) translateY(-100px)}
		}
		@keyframes runK{
			from{transform:perspective(10px) rotateY(-17deg) rotateZ(90deg) translateY(200px)}
			to{transform:perspective(10px) rotateY(-17deg) rotateZ(90deg) translateY(-100px)}
		}
		@keyframes Play{
			from{transform: rotate(0deg);}
			to{transform: rotate(180deg);}
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="d d1"></div>
		<div class="d d2"></div>
		<div class="d d3"></div>

		<div class="d b1"></div>
		<div class="d b2"></div>
		<div class="d b3"></div>

		<div class="d c1"></div>
		<div class="d c2"></div>
		<div class="d c3"></div>

		<div class="d k1"></div>
		<div class="d k2"></div>
		<div class="d k3"></div>
	</div>
</body>
</html>

运行效果：