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>
相关推荐
Sally璐璐5 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06275 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121385 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
尘心cx6 小时前
前端-CSS-day1
前端·css
全宝7 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
没有钱的钱仔7 小时前
STM32低功耗模式全面指南
css·stm32·css3
拾光拾趣录9 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
祝余呀10 小时前
HTML初学者第三天
前端·html
就爱瞎逛10 小时前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind