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

最新推荐文章于 2023-03-07 21:24:39 发布

魏亚强

最新推荐文章于 2023-03-07 21:24:39 发布

阅读量635

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wyq188945/article/details/90760281

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!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>