HTML+CSS網頁設計，小方塊永久旋轉的動畫特效

大家好，本篇文章分享小方塊永久旋轉的動畫特效，歡迎參考和指正。

效果圖：

小方塊永久旋轉的動畫特效

HTML代碼：

CSS代碼：

知識點：

animation：是CSS3的動畫屬性，這裡把animation綁定到tui-demo-1元素上，並指定該動畫需要1秒完成，infinite則表示無限次播放該動畫。

@keyframes：該規則表示動畫可以逐步從一個CSS樣式改變為另一個CSS樣式。這裡0％是動畫開頭，100％是動畫結束。

transform：該屬性應用於2D元素或3D元素的轉換，允許元素髮生旋轉，縮放，移動，傾斜等效果。這裡的perspective允許改變3D元素的透視圖，且隻影響3D元素的轉換。rotateX表示沿著X軸作3D旋轉，rotateY表示沿著Y軸作3D旋轉。

最後注意下瀏覽器兼容問題，animation，transform等可再創建-webkit-,-ms-或-moz-配置。如：-webkit-animation: tui-demo-1 1.0s infinite;

有問題可以留言，大家一起學習HTML+CSS網頁設計。