使用keyframes 做个简单的小球运动的动画效果

最新推荐文章于 2023-11-06 11:31:21 发布

魏亚强

最新推荐文章于 2023-11-06 11:31:21 发布

阅读量673

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/wyq188945/article/details/90760281

版权

前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个使用CSS实现的圆形元素路径动画案例，详细解析了如何通过@keyframes定义动画路径，并利用animation属性控制动画循环播放，展示了如何设置元素的定位、尺寸和边框样式。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		div{
			width: 100px;
			height: 100px;
			border:2px solid red;
		}
		.div{
			width:20px;
			height:20px;
			background: blue;
			border:0px solid red;
			position: relative;
			animation:myfirst 2s infinite; 
			border-radius: 50%;
		}
		/*infinite表示循环的次数 ， myfirst表示动画的名称，*/
		@keyframes myfirst{
			0% {left: 0px;top: 0px;}
			25% {left: 80px;top: 0px;}
			50% {left: 80px;top: 80px;}
			75% {top: 80px;left: 0px;}
			100% {left: 0px;top: 0px;}			
		}
	</style>
	<body>
		<div>
			<div class="div"></div>
		</div>
		
	</body>
</html>