文章目錄
- HTML5新增的多媒體標簽
- 視頻``
- 音頻``
- CSS3高級應用
- 過渡
- 變形
- 影片
- 精靈圖
HTML5新增的多媒體標簽
視頻<video>
當前<video>元素支持三種視頻格式：盡量使用mp4格式
| 瀏覽器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | √ | × | × |
| Chrome | √ | √ | √ |
| Firefox | √ 從Firefox 21 版本開始 Linux系統從Firefox 30 開始 | √ | √ |
| Safari | √ | × | × |
| Opera | √ 從Opera 25版本開始 | √ | √ |
語法 ：
<video src="檔案地址" controls="controls"></video>
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的瀏覽器暫不支持 <video> 標簽播放視頻
</video>
視頻<video>——常見屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 視頻就緒自動播放（谷歌瀏覽器需要添加muted來解決自動播放問題） |
| controls | controls | 向用戶顯示播放控制元件 |
| width | pixels（像素） | 設定播放器寬度 |
| height | pixels（像素） | 設定播放器高度 |
| loop | loop | 播放完是否繼續播放該視頻，回圈播放 |
| preload | auto（預先加載） none（不應加載） | 規定是否預先加載視頻（如果有了autoplay 就忽略該屬性） |
| src | url | 視頻url地址 |
| poster | lmgurl | 加載等待的畫面圖片 |
| muted | muted | 靜音播放 |
音頻<audio>
| 瀏覽器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | √ | × | × |
| Chrome | √ | √ | √ |
| Firefox | √ | √ | √ |
| Safari | √ | √ | × |
| Opera | √ | √ | √ |
語法：
<audio src="檔案地址" controls="controls"></audio>
<audio controls="controls">
<source src="happy.mp3" type="audio/mpeg">
<source src="happy.ogg" type="audio/ogg">
您的瀏覽器暫不支持 <audio> 標簽，
</audio>
音頻——常見屬性：
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出現該屬性，則音頻在就緒后馬上播放 |
| controls | controls | 向用戶顯示控制元件，比如播放按鈕 |
| loop | loop | 每當音頻結束時重新開始放 |
| src | url | 要播放音頻的地址 |
- 谷歌瀏覽器把音頻和視頻的自動播放禁止了
- 可以給視頻標簽添加muted屬性來靜音播放視頻，音頻不可以（可以通過JavaScript解決）
CSS3高級應用
過渡
在不使用 Flash 影片或JavaScript的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果，
過渡影片： 是從一個狀態 漸漸的過渡到另外一個狀態
現在經常和 :hover 一起 搭配使用，
語法：
transition: 要過渡的屬性 花費時間 運動曲線 何時開始;
- 屬性：想要變化的 css 屬性， 寬度高度 背景顏色 內外邊距都可以 ，如果想要所有的屬性都變化過渡， 寫一個all 就可以，
- 花費時間：單位是 秒（必須寫單位） 比如 0.5s
- 運動曲線：默認是 ease （可以省略）
- 何時開始：單位是 秒（必須寫單位）可以設定延遲觸發時間 默認是 0s （可以省略）
過渡使用口訣：誰做過渡給誰加
變形
CSS3變形：平移、旋轉、縮放、變形
transform:none——不變形
transform-function——變形函式
ani
transform：translate（x-value,y-value）省略第二個引數默認為0
transform：scale（x-axis,y-axis）省略第二個引數默認為第一個值
transform：skew（x-angle,y-angle）角度值，省略第二個默認為0
transform：rotate（angle）角度值
影片
@keyframes 影片名稱{
@keyframes-selectors {樣式屬性(即css-styles)};
}
keyframes-selector：關鍵幀選擇器 值：百分比、from（0%）或者to（100%）
css-styles:
定義執行到當前關鍵幀時對應的影片狀態，由css樣式屬性進行定義，多個屬性之間用分號間隔，不能為空
| 屬性 | 描述 |
|---|---|
| animation-name | 使用定義好的影片 影片名稱 ①none（默認 適用于所有塊元素和行內元素）②keyframename |
| animation-duration | 影片完成需要的時間（s/ms） |
| animation-timing-function | 影片曲線效果 |
| animation-delay | 影片延遲屬性 |
| animation-iteration | 回圈播放的次數infinite |
| animation-direction | 影片播放的方向 ①normal（默認）②alternate（奇數正向、偶數逆向） |
| animation | 復合屬性 animation-name animation-duration （必須有） |
精靈圖
將若干個圖片轉換成一個大圖片有效地減少服務器接收和發送請求的次數，提高頁面的加載速度，于是出現了CSS精靈技術（也稱為CSS Sprites、CSS雪碧）
核心原理：==將網頁中的一些
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/282401.html
標籤：其他