CSS3中的動畫和過渡功能已經越來越強大,包括播放、暫停等功能也可以使用CSS3來實現,使網頁更加豐富多彩。
/* 定義播放圖標樣式 */ .play-icon { display: inline-block; width: 20px; height: 20px; background: url(play-icon.png); } /* 定義暫停圖標樣式 */ .pause-icon { display: inline-block; width: 20px; height: 20px; background: url(pause-icon.png); } /* 定義動畫效果 */ @-webkit-keyframes play-pause { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } /* 鼠標移入樣式 */ .play-pause:hover { cursor: pointer; } /* 播放狀態下按鈕樣式 */ .play-pause.play .play-icon { display: none; } /* 暫停狀態下按鈕樣式 */ .play-pause.pause .pause-icon { display: none; } /* 動畫效果 */ .play-pause.play .pause-icon, .play-pause.pause .play-icon { -webkit-animation: play-pause 0.2s linear forwards; } /* HTML代碼 */
通過上述CSS代碼,我們可以實現一個播放/暫停按鈕的功能。首先定義播放圖標和暫停圖標的樣式,然后定義動畫效果,讓按鈕在狀態切換時產生動畫效果。最后通過HTML代碼的方式來創建這個按鈕。