CSS是一種常用的樣式語言,可以使網頁變得更加美觀和互動。今天我們來學習一下如何使用CSS來實現圖片持續旋轉。
.rotate { animation: rotation 5s infinite linear; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } }
上述代碼中,我們在CSS中定義了一個名為“rotate”的類,它包含一個屬性“animation”,它規定了我們要進行旋轉動畫的風格:旋轉5秒,無限次數,線性變化。接著,我們定義了“@keyframes”規則,這是用來創建動畫序列的關鍵字。這個規則告訴瀏覽器,從0度開始旋轉,然后在5秒鐘內旋轉到359度,最后無限循環。
接下來,我們只需要將這個類應用到我們的圖片上即可。代碼如下:
這樣就可以實現一個簡單的旋轉圖片的效果了。
當然,我們也可以對旋轉的角度、時間進行修改,以得到不同的效果。例如,如果我們將5秒改為2秒,則只需要旋轉兩秒鐘就可以完成一輪旋轉。
.rotate { animation: rotation 2s infinite linear; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } }
通過這種簡單的方法,我們可以為網頁增加更多視覺效果,使網頁變得更加豐富和動態。
下一篇css實現圖片層疊