CSS3已經(jīng)成為現(xiàn)代web開發(fā)中必不可少的一部分,可以實(shí)現(xiàn)各種各樣的動畫效果、布局樣式以及與html5協(xié)同使用實(shí)現(xiàn)視頻播放。
video { width: 500px; height: 300px; background-color: #000; } video::-webkit-media-controls-panel { background-color: transparent !important; }
如上所示,我們使用CSS3來改變一個(gè)video元素的外觀。首先,我們限制了視頻標(biāo)簽的寬和高。然后,我們將背景顏色設(shè)置為黑色。
由于視頻最終表現(xiàn)形式是由系統(tǒng)默認(rèn)的播放控件控制的,因此我們可以修改這些默認(rèn)樣式。在預(yù)示代碼中,我們通過“::-webkit-media-controls-panel”偽選擇器來獲取視頻播放的默認(rèn)控件,并將其背景設(shè)置為透明。
還有更多的CSS3屬性可以用來改變播放控制布局的細(xì)節(jié),例如“::-webkit-media-controls-play-button”選擇播放按鈕等等。
總之,CSS3不僅可以實(shí)現(xiàn)各種精美的設(shè)計(jì)和動畫效果,還可以通過來打造極具創(chuàng)意的視頻體驗(yàn)。如果您是一名Web開發(fā)人員,掌握CSS3必然是提高您技能的過程中必不可少的一步。