HTML 图片旋转动画 - 6 个图片原型旋转效果 - 常规

以下是一个简单的 HTML 代码，展示了六个旋转的图片，每个图片都有不同的原型旋转效果：

<!DOCTYPE html>
<html>
<head>
	<title>旋转的图片</title>
	<style>
		.container {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}

		.circle {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			position: relative;
			animation-name: spin;
			animation-duration: 2s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
		}

		.circle1 {
			background-image: url('https://picsum.photos/id/237/200/300');
			animation-delay: 0.5s;
		}

		.circle2 {
			background-image: url('https://picsum.photos/id/238/200/300');
			animation-delay: 1s;
		}

		.circle3 {
			background-image: url('https://picsum.photos/id/239/200/300');
			animation-delay: 1.5s;
		}

		.circle4 {
			background-image: url('https://picsum.photos/id/240/200/300');
			animation-delay: 2s;
		}

		.circle5 {
			background-image: url('https://picsum.photos/id/241/200/300');
			animation-delay: 2.5s;
		}

		.circle6 {
			background-image: url('https://picsum.photos/id/242/200/300');
			animation-delay: 3s;
		}

		@keyframes spin {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(360deg);
			}
		}

		@keyframes spin2 {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(360deg);
			}
		}

		@keyframes spin3 {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(360deg);
			}
		}

		@keyframes spin4 {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(360deg);
			}
		}

		@keyframes spin5 {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(360deg);
			}
		}

		@keyframes spin6 {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(360deg);
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="circle circle1"></div>
		<div class="circle circle2"></div>
		<div class="circle circle3"></div>
		<div class="circle circle4"></div>
		<div class="circle circle5"></div>
		<div class="circle circle6"></div>
	</div>
</body>
</html>

解释：

代码中使用了flex布局，将六个圆形图片放在一个容器中，并使其在垂直和水平方向上居中对齐。
每个圆形使用了一个类名circle，并使用了不同的类名circle1、circle2等来区分不同的图片。
每个圆形的样式中，使用了animation-name、animation-duration、animation-timing-function、animation-iteration-count等属性来实现旋转的动画效果。
每个圆形的样式中，使用了不同的animation-delay属性来实现图片之间的旋转偏移效果。
代码中使用了@keyframes规则来定义旋转的动画效果，其中使用了transform属性来实现旋转。