多图旋转

by 苹果熊

HTML

<div class="path">
	<img src="http://lea.verou.me/book/adamcatlace.jpg" class="avatar" />
	<img src="http://lea.verou.me/book/adamcatlace.jpg" class="avatar" />
	<img src="http://lea.verou.me/book/adamcatlace.jpg" class="avatar" />
	<img src="http://lea.verou.me/book/adamcatlace.jpg" class="avatar" />
</div>

CSS

/**
 * Animation along a circular path - Solution 2
 */
 
@keyframes spin1 {
	from {
		transform: rotate(0turn)
		           translateY(-150px) translateY(-25%)
		           rotate(1turn)
	}
	to {
		transform: rotate(1turn)
		           translateY(-150px) translateY(-25%)
		           rotate(0turn);
	}
}
@keyframes spin2 {
	from {
		transform: rotate(0turn)
		           translateX(-150px) translateX(-25%)
		           rotate(1turn)
	}
	to {
		transform: rotate(1turn)
		           translateX(-150px) translateX(-25%)
		           rotate(0turn);
	}
}
@keyframes spin3 {
	from {
		transform: rotate(0turn)
		           translateY(100px) translateY(125%)
		           rotate(1turn)
	}
	to {
		transform: rotate(1turn)
		           translateY(100px) translateY(125%)
		           rotate(0turn);
	}
}
@keyframes spin4 {
	from {
		transform: rotate(0turn)
		           translateX(125px) translateX(75%)
		           rotate(1turn)
	}
	to {
		transform: rotate(1turn)
		           translateX(125px) translateX(75%)
		           rotate(0turn);
	}
}

.path img:nth-child(1) {
	animation: spin1 3s infinite linear;
	animation-play-state: paused;
}
.path img:nth-child(2) {
	animation: spin2 3s infinite linear;
	animation-play-state: paused;
}
.path img:nth-child(3) {
	animation: spin3 3s infinite linear;
	animation-play-state: paused;
}
.path img:nth-child(4) {
	animation: spin4 3s infinite linear;
	animation-play-state: paused;
}
.path:hover img {
	animation-play-state: running;
}

/* Anything below this is just styling */
.path {
	position: relative;
}
.avatar {
	display: block;
	width: 50px;
	border-radius: 50%;
	overflow: hidden;
	position: absolute;
	left: calc(50% - 25px);
	top: calc(50% - 25px);
}

.path {
	width: 300px; height: 300px;
	padding: 20px;
	margin: 100px auto;
	border-radius: 50%;
	border: 1px solid #fb3;
}