CSS是一種用于網頁設計的語言,它可以與HTML和JavaScript一起使用,使網站頁面更加美觀和互動性。其中,CSS的transform屬性可以使元素發生旋轉效果,但有時我們需要暫停這個旋轉效果,該怎么做呢?
.rotate { animation-name: spin; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotate:hover { animation-play-state: paused; }
我們可以通過CSS的animation-play-state屬性來實現暫停旋轉效果。首先,我們給需要旋轉的元素添加一個類名.rotate,然后為其設置旋轉動畫,這里的動畫名為spin,持續時間為2秒,按照線性運動方式進行,無限循環。接下來,在hover狀態下,將動畫播放狀態設置為paused,即可暫停旋轉。
需要注意的是,這種方法只適用于使用animation動畫實現旋轉的情況,如果是使用transform:rotate屬性實現旋轉,則需要使用JavaScript來控制動畫播放狀態。
下一篇css智能壓縮