css3动画—旋转

css3动画—旋转_第1张图片
css3动画旋转,内圆顺时针旋转,外圆逆时针旋转
1、html

<img src="img/about-img07.png" class="circle01 circle-pst">
<img src="img/about-img06.png" class="circle02 circle-pst">

2、css

.circle01 {
	animation: rotate1 5s infinite ease-in-out;
}
@keyframes rotate1 {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.circle02 {
	animation: rotate2 5s infinite ease-in-out;
}

@keyframes rotate2 {
	from {
		transform: rotate(360deg);
	}

	to {
		transform: rotate(0deg);
	}
}

你可能感兴趣的:(css,css3,旋转动画)