CSS Spin是一個能夠讓圖標或者圖片進行旋轉的CSS樣式。
.spin { animation: spin 2s infinite linear; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
使用這個樣式非常簡單,只需要為需要進行旋轉的元素添加.spin類即可。同時,這個樣式也可以自定義旋轉的方向、速度以及旋轉的次數。
.spin { animation: spin 2s 3 linear; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
在上面的代碼中,元素將會旋轉三次,每次旋轉需要2秒鐘。需要注意的是,旋轉次數的值也可以設置為infinite,表示無限旋轉。
總的來說,CSS Spin是一個非常有用的CSS樣式,能夠讓網頁更加生動活潑。通過添加旋轉樣式,可以為用戶提供更加良好的用戶體驗。
上一篇anki css3
下一篇css3動畫效果在線瀏覽