CSS是一種用于美化網頁的樣式表語言,其強大的功能讓我們可以實現各種效果,比如不停地旋轉。下面來看一下如何使用CSS讓元素不停地旋轉。
/*定義一個旋轉動畫*/ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 將元素應用旋轉動畫并無限循環 */ .element { animation: spin 2s linear infinite; }
代碼解釋:
@keyframes spin定義了一個名為spin的動畫,其中from和to關鍵幀分別定義了動畫的初始狀態和結束狀態。在本例中,設置rotate(0deg)代表起始位置,然后再讓其旋轉360度,即rotate(360deg)。
.element是一個要應用旋轉動畫的元素的類名。animation屬性會觸發spin動畫并指定動畫的持續時間、動畫的速度和重復次數(infinite為無限循環)。
結合上面的代碼,你可以嘗試在自己的網頁中添加一個不停旋轉的元素。這樣的動畫效果可以吸引用戶的注意力并增加網頁的交互性。