大家好，本篇文章分享小方塊永久旋轉的動畫特效，歡迎參考和指正。
效果圖：
小方塊永久旋轉的動畫特效
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網頁設計。
分享到:
