在CSS中,我們可以通過transform屬性來實現元素的旋轉。其中,rotate()函數可以讓元素進行旋轉。而我們也可以設置相關的參數,實現勻速旋轉的效果。
.transform { width: 100px; height: 100px; background-color: red; animation: rotate 2s linear infinite; // animation屬性實現動畫效果 } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
通過上述代碼,我們可以看到,我們定義了一個名為transform的樣式,同時我們給這個樣式添加了一個旋轉的動畫。其中,通過animation屬性,我們設置了該動畫的時間為2秒,類型為線性,無限循環。
在keyframes中,我們定義了從0度到360度的旋轉動畫。由于我們使用了infinite關鍵字,因此動畫會一直持續下去,形成勻速旋轉的效果。
需要注意的是,在動畫中,我們使用了transform屬性,這個屬性也是實現元素旋轉的關鍵。rotate(0deg)表示旋轉的開始位置,而rotate(360deg)表示旋轉的結束位置。通過使用from和to關鍵字,我們可以快速定義動畫的起始和結束狀態。
上一篇css 勾勾
下一篇css 動畫延遲執行