CSS是一種重要的網頁設計語言,它可以讓你的網站變得更加生動有趣。今天我們將探討一種CSS效果,它可以讓一個元素一直旋轉!
.rotating { animation: rotate 2s infinite linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
上面這段代碼演示了一個旋轉的效果。我們先定義一個旋轉的類,名字可以自己定義。在這個類中,我們設置這個元素的動畫,使用了CSS的animation屬性。此屬性有多個屬性值,其中最重要的兩個屬性是動畫名和動畫持續時間。在這里,我們設置了動畫名為rotate,持續時間為2秒,不停地循環。
下一步,我們設置了這個rotate動畫的效果,使用了CSS的@keyframes屬性。這個屬性可以定義動畫的每一個狀態。從from狀態到to狀態,這里我們使用了transform屬性,將這個元素以固定的角度進行旋轉。在這里,我們設置從0度到360度,也就是說這個元素會轉一圈。
這個效果可以讓你的網站變得動態起來,吸引更多的訪問者。可以將這個效果應用到你的logo或其他圖片上,以此增加網站的趣味性。嘗試一下,去體驗一下這個效果帶來的魅力吧!