如何用純 CSS 創作乙個方塊旋轉動畫

按下右側的「點選預覽」按鈕可以在當前頁面預覽，點選鏈結可以全屏預覽。

請用 chrome, safari, edge 開啟**。

定義 dom，容器中包含 4 個元素：

居中顯示：

body

畫出容器中心的方塊：

.loader

畫出容器四周的方塊：

.loader,
.loader span 
.loader span:nth-child(1) 
.loader span:nth-child(2) 
.loader span:nth-child(3) 
.loader span:nth-child(4)

給方塊上色：

.loader,
.loader span 
.loader 
.loader span:nth-child(1) 
.loader span:nth-child(2) 
.loader span:nth-child(3) 
.loader span:nth-child(4)

為容器整體增加旋轉動畫：

.loader 
@keyframes rotating 
}

為容器四周的方塊增加反向旋轉的動畫效果：

.loader span @keyframes de-rotating 50%

}

最後，隱藏可能出現在頁面外部的內容：

body

大功告成！

按下右側的點選預覽按鈕在當前頁面預覽，點選鏈結全屏預覽。請用 chrome,safari,edge 開啟定義 dom，只有乙個容器元素居中顯示 html,body畫出電池的主體輪廓 battery畫出電池的突起 battery battery after 畫出充電電量 battery定義和應...

按下右側的點選預覽按鈕可以在當前頁面預覽，點選鏈結可以全屏預覽。請用 chrome,safari,edge 開啟定義 dom，只有 1 個元素居中顯示 body定義容器尺寸 box用偽元素畫出小球 box box before 定義沿 x 軸即橫向移動的動畫效果 keyframes move...

按下右側的點選預覽按鈕可以在當前頁面預覽，點選鏈結可以全屏預覽。請用 chrome,safari,edge 開啟定義 dom，容器表示整隻蝴蝶，因為蝴蝶是對稱的，所以分為左右兩邊，每邊有 3 個子元素居中顯示 body定義蝴蝶的尺寸 butterfly先畫左半邊 butterfly left...