HTML CSS 简单动画

html 复制代码
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table{
				margin: auto;
			}
			td {
				width: 310px;
				height: 310px;
				background-color: darkcyan;
				overflow: hidden;
			}
			
			tr>td>div {
				width: 200px;
				height: 200px;
				background-color: red;
				margin: auto;
				border: 3px black solid;
				position: relative;
				overflow: hidden;
			}
			
			p {
				text-align: center;
			}
			
			@keyframes xz {
				from {
					transform: rotate(0deg);
				}
				to {
					transform: rotate(360deg);
				}
			}
			
			#d1 {
				width: 50px;
				height: 50px;			
				
				background-image:repeating-radial-gradient(at center center,blue 5%,yellow 40%);
				position: absolute;
				left: 75px;
				top: 75px;				
				animation: xz 3s linear infinite;
				
			}
			
			@keyframes sf {
				0% {
					transform: scale(1);
				}
				50% {
					transform: scale(3);
				}
				100% {
					transform: scale(1);
				}
			}
			
			#d2 {
				width: 50px;
				height: 50px;
				background: green;
				position: absolute;
				left: 75px;
				top: 75px;
				animation: sf 3s linear infinite;
				
			}
			
			@keyframes py {
				0% {
					transform: translateX(0);
				}
				25% {
					transform: translateX(-100px);
				}
				50% {
					transform: translateX(0);
				}
				75% {
					transform: translateX(100px);
				}
				100% {
					transform: translateX(0);
				}
			}
			
			#d3 {
				width: 50px;
				height: 50px;
				background: green;
				position: absolute;
				left: 75px;
				top: 75px;
				animation: py 3s linear infinite;
			}
			
			@keyframes py2 {
				0% {
					transform: translateY(0);
				}
				25% {
					transform: translateY(-100px);
				}
				50% {
					transform: translateY(0);
				}
				75% {
					transform: translateY(100px);
				}
				100% {
					transform: translateY(0);
				}
			}
			
			#d4 {
				width: 50px;
				height: 50px;
				background: green;
				position: absolute;
				left: 75px;
				top: 75px;
				animation: py2 3s linear infinite;
			}
			
			@keyframes x_xz {
				0% {
					transform: rotateX(0);
				}				
				100% {
					transform: rotateX(360deg);
				}
			}
			
			#d5 {
				width: 50px;
				height: 50px;
				background: green;
				position: absolute;
				left: 75px;
				top: 75px;
				animation: x_xz 3s linear infinite;
			}
			
			@keyframes y_xz {
				0% {
					transform: rotateY(0);
				}				
				100% {
					transform: rotateY(360deg);
				}
			}
			
			#d6 {
				width: 50px;
				height: 50px;
				background: green;
				position: absolute;
				left: 75px;
				top: 75px;
				animation: y_xz 3s linear infinite;
				perspective: 1000;
			}
			
			@keyframes xy_xz {
				0% {
					transform: rotateY(0);
				}				
				100% {
					transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
				}
			}
			
			#d7 {
				width: 50px;
				height: 50px;
				background: green;
				position: absolute;
				left: 75px;
				top: 75px;
				animation: xy_xz 3s linear infinite;
				perspective: 1000;
			}
			
			@keyframes xyz_xz {
				0% {
					transform: rotateY(0);
				}	
				50%{
					transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) scale(6);
				}			
				100% {
					transform: rotateX(0) rotateY(0) rotateZ(0) scale(1);
				}
			}
			
			#d8 {
				width: 50px;
				height: 50px;
				background: green;
				position: absolute;
				left: 75px;
				top: 75px;
				animation: xyz_xz 6s linear infinite;
				perspective: 1000;
			}
			
		</style>
	</head>

	<body>

		<table border="1" width="910">
			<tr>
				<td>
					<p>旋转的个体</p>
					<div>
						<div id="d1"></div>
					</div>
				</td>
				<td>
					<p>缩放的个体</p>
					<div>
						<div id="d2"></div>
					</div>
				</td>
				<td>
					<p>水平平移的个体</p>
					<div>
						<div id="d3"></div>
					</div>
				</td>
				<td>
					<p>垂直平移的个体</p>
					<div><div id="d4"></div></div>
				</td>
			</tr>
			<tr>
				<td>
					<p>x轴旋转的个体</p>
					<div><div id="d5"></div></div>
					
				</td>
				<td>
					<p>y轴旋转的个体</p>
					<div><div id="d6"></div></div>
				</td>
				<td>
					<p>xy轴旋转的个体</p>
					<div><div id="d7"></div></div>
				</td>
				<td>
					<p>xyz轴旋转且缩放的个体</p>
					<div><div id="d8"></div></div>
				</td>
			</tr>

		</table>
	</body>

</html>