CSS 图片动态旋转

CSS 图片动态旋转

<div class="header-logo">
	<img src="../../img/logo.png" />
</div>

.header-container>.header-photo>img {
	width: 50px;
	height: 50px;
	margin-top: 10px;
	/* 设置图片为圆形 */
	border-radius: 100%;
	/* 
		rotate 自定义动画效果名称
		6s 完成的时间
		linear 表示全程速度相同,除了这个还有：
			ease 动画以低速开始，然后加快，在结束前变慢
			ease-in	动画以低速开始。
			ease-out	动画以低速结束。
			ease-in-out	动画以低速开始和结束。
		infinite设置播放次数，infinite无限次，如果有次数，选择数字
	 */
	animation: rotate 6s linear infinite;
}

/* 头像动态旋转效果 */
/* 
	创建动画效果rotate 
	rotate(*deg)表示旋转度数，另外还有
	rotateX(*deg),rotateY(*deg),rotateZ(*deg)表示向市民方向旋转
*/
@keyframes rotate {
	0% {
		transform: rotate(0deg);
		/*从0度开始*/
	}
	100% {
		transform: rotate(360deg);
		/*360度结束*/
	}
}