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度結束*/
	}
}