CSS3是最新的CSS標準版本,新增加了許多強悍的功能,其中之一就是能夠控制動畫暫停。利用這種功能,我們可以輕松地調整動畫的播放狀態和效果。
/* 定義一個動畫 */ @keyframes myAnimation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 給動畫綁定屬性 */ div { animation: myAnimation 2s linear infinite; /* 將動畫設置成一個永久循環的動畫效果 */ } /* 當鼠標懸停在div元素上時,停止動畫 */ div:hover { animation-play-state: paused; /* 暫停動畫 */ }
通過以上代碼示例可以看出,我們首先定義了一個名為“myAnimation”的動畫,其中使用了rotate函數來實現物體的旋轉效果。接著在div元素上設置了動畫屬性,包括動畫名稱、播放時間、動畫效果等。最后,利用:hover偽類選擇器,監聽鼠標的懸停事件,一旦鼠標懸停在div元素上時,就會調用“animation-play-state: paused;”來停止動畫的播放。
總之,CSS3提供了極其強大的動畫控制能力,我們可以輕松地定義和修改動畫,使網頁的效果更加炫酷。使用上述方法,你也可以控制動畫的暫停,打造個性化的網頁效果。
上一篇css 只允許輸入整數
下一篇css3搖一搖動畫