CSS圖標不停旋轉是一種通過CSS動畫實現的效果,這種效果可以為網站增加動感,讓頁面更加生動有趣。
.icon { width: 50px; height: 50px; display: inline-block; background: url("icon.png"); animation: rotate 2s infinite linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
在這個例子中,我們為圖標定義了一個寬度和高度,并使用了display:inline-block將其布局為塊級元素。
接著,在圖標的樣式規則中,我們使用了background屬性為元素設置了背景圖片。
最終,我們定義了一個名為rotate的關鍵幀動畫,它會讓圖標不停地旋轉。通過給animation屬性指定rotate動畫以及使用infinite關鍵字,我們可以讓動畫無限循環。
該效果可以應用于網頁中的多個元素,比如按鈕、導航欄圖標等等,讓網站顯得更加動感與有趣。
上一篇css3循環播放屬性
下一篇Css3彈性盒子代碼