技術標籤：前端

html

<img src={picsUranusHalo} className={styles.scale_img7}/>

css

.scale_img7{
	 width: 44px;
     height: 44px;
       margin-top: 8px;
       margin-left: 8px;
       display: block;
       position: absolute;
       animation: scale 1.5s linear infinite;
   }

@keyframes scale{
	0%{  // 動畫開始樣式
		transform: scaleZ(1);
	}
	50%{ // 動畫中間樣式，可自定義中間樣式，修改百分比即可
		transform: scale(1.2);
	}
	100%{ //動畫結束樣式
		transform: scale(1);
	}
}
 

思路：定位環形圖片到火星圖片上層，然後寫環形動態效果
圖片效果，環形放大縮小