css动画

最新推荐文章于 2024-05-31 02:10:44 发布

11adaacc

最新推荐文章于 2024-05-31 02:10:44 发布

阅读量277

点赞数

分类专栏：例题

本文链接：https://blog.youkuaiyun.com/Rayshaan/article/details/113361680

版权

例题专栏收录该内容

65 篇文章

订阅专栏

本文介绍了如何利用CSS来制作一个背景颜色为红色、半径为200px的圆形，并实现持续的上下移动动画效果。

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

用CSS实现一个背景色为红色，半径为200px的圆，并设置不停的上下移动动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#circle{
				/*半径200*/
				width: 400px;
				height: 400px;
				border-radius: 50%;
				background-color: palevioletred;
				margin: 0 auto;
				margin-top: 200px;
				/*调用动画*/
				animation: move 3s linear infinite;
			}
			/*上下移动动画*/
			@-webkit-keyframes move{
				from{
					transform: translateY(-100px);
				}
				to{
					transform: translateY(100px);
				}
			}
		</style>
	</head>
	<body>
		<div id="circle">
			
		</div>
	</body>
</html>