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