使用h5+css写一个跑圈动画于是我写了一个简化版的动画，给他参考。将动画拆成五部分，分别写上坐标。用百分比，写每一步

今天一个人跟我提了他接到一个新的需求，要写一个球员沿着跑到跑圈的动画

于是我写了一个简化版的动画，给他参考。

效果如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box {
				width: 250px;
				height: 250px;
				border: 1px solid salmon;
				position: relative;
			}

			.box1 {
				width: 40px;
				height: 40px;
				position: absolute;
				animation: circle 1s linear infinite;
			}


			@keyframes circle {
				0% {
					background: red;
					left: 0px;
					top: 0px;
				}

				25% {
					background: yellow;
					left: 210px;
					top: 0px;
				}

				50% {
					background: blue;
					left: 210px;
					top: 210px;
				}

				75% {
					background: green;
					left: 0px;
					top: 210px;
				}

				100% {
					background: red;
					left: 0px;
					top: 0px;
				}

			}

			.box:hover .box1 {
				animation-play-state: paused;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">

			</div>
		</div>

	</body>
</html>

将动画拆成五部分，分别写上坐标。用百分比，写每一步的变化

.box:hover .box1 {
				animation-play-state: paused;
			}

当鼠标悬浮在上面时，动画停止