HTML动画

最新推荐文章于 2025-10-15 13:47:13 发布

原创最新推荐文章于 2025-10-15 13:47:13 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/* 动画
			1.创建关键帧：@keyframes 
			name 动画名称{
				from{
					动画开始
				}
				to{
					动画结束
				}
			}
			2.绑定动画 */
			.box{
				width: 300px;
				height: 400px;
				background-color: aquamarine;
				position: absolute;
				top: 42%;
				left: 42%;
				/* 绑定动画animation:动画名称 时间 速度 次数(infinite:重复) 延迟时间*/
				animation: gb 5s linear infinite ;
			}
			@keyframes gb{
				0,30%{/* 状态停留的时间 */
					background-color: aqua;
				}
				35%,75%{
					background-color: blue;
				}
				80%,100%{
					background-color: blueviolet;
				}
			}
			@keyframes move{
				10%{/* 动画时间*百分比=当前时间的状态 */
					transform: rotate(45deg);
				}
				50%{
					transform: translate(100px,-50px);
				}
				80%{
					transform: skew(45deg);
				}
				100%{
					transform: scale(2);
				}
			}
			
			@keyframes xz{
				from{/* 动画开始的状态 */
					transform: rotate(0);
				}
				to{/* 动画结束的状态 */
					transform: rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>