写一个 一群锦鲤在水里游来游去的html5

<!DOCTYPE html>
<html>
<head>
	<title>一群锦鲤在水里游来游去</title>
	<style type="text/css">
		body {
			background-color: #80b3ff;
		}
		#pond {
			width: 800px;
			height: 400px;
			background-color: #b3d9ff;
			position: relative;
			margin: 0 auto;
			border-radius: 50%;
			overflow: hidden;
		}
		.koi {
			width: 100px;
			height: 50px;
			background-color: orange;
			position: absolute;
			border-radius: 50%;
			animation: swimming 5s ease-in-out infinite alternate;
		}
		.koi1 {
			top: 100px;
			left: 50px;
			transform: scaleX(-1);
			animation-delay: 1s;
		}
		.koi2 {
			top: 200px;
			left: 250px;
			animation-delay: 2s;
		}
		.koi3 {
			top: 50px;
			left: 400px;
			transform: scaleX(-1);
			animation-delay: 3s;
		}
		.koi4 {
			top: 250px;
			left: 600px;
			animation-delay: 4s;
		}
		@keyframes swimming {
			0% {
				transform: translateX(0);
			}
			50% {
				transform: translateX(200px);
			}
			100% {
				transform: translateX(0);
			}
		}
	</style>
</head>
<body>
	<div id="pond">
		<div class="koi koi1"></div>
		<div class="koi koi2"></div>
		<div class="koi koi3"></div>
		<div class="koi koi4"></div>
	</div>
</body>
</html>

写一个 一群锦鲤在水里游来游去的html5

写一个一群锦鲤在水里游来游去的html5