html5css3认识动画

最新推荐文章于 2021-06-09 12:11:23 发布

郭胜_自强

最新推荐文章于 2021-06-09 12:11:23 发布

阅读量272

点赞数

CC 4.0 BY-SA版权

分类专栏： html5

本文链接：https://blog.youkuaiyun.com/GS2016/article/details/79230410

html5 专栏收录该内容

11 篇文章

订阅专栏

本文通过一个具体的HTML和CSS动画实例展示了如何让一个元素沿着特定路径移动。该实例中，一个正方形元素从初始位置出发，经过一系列预设的位置点后回到起点，形成了一个闭环动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>认识动画</title>
		<style type="text/css">
			div{
				width:200px;
				height:200px;
				background: goldenrod;
				position:absolute;
				left:0;
				right:0;
				animation:donghua 3s infinite;
			}
			/*@keyframes donghua{
				from{left:0;}
				to{left:800px;}
			}*/
			@keyframes donghua{
				0%{top:0;left:0;}
				25%{top:0;left:600px;}
				50%{top:300px; left:600px;}
				75%{top:300px; left:0;}
				100%{top:0;left:0;}
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>