終效果圖如下：

我們看一下實現過程。

主框架是vue開發，做成了一個動畫組件，因為涉及到多個頁面引用，最主要的實現是css3語法實現過程，并且要做到循環播放。

左邊出來動畫時間是0.5秒，停留3秒往上走，然后動畫時間0.5秒，停留3秒后然后消失，消失動畫時間0.5秒，總共的時間消耗是7.5秒。可以得到以下計算比例

0/7.5=0%

0.5/7.5=6.66%

3.5/7.5=46.66%

4/7.5=53.33%

7/7.5=93.33%

7.5/7.5=100%

然后每個比例所對應的css如下

就可以實現css3動畫了，再加上js實現無縫循環播放

SS3音樂播放器音符跳動效果

CSS3動畫，現在在我們的項目中隨處可見，今天我們來分享一個音符跳動效果。

分析整體思路，我們來看下實現3D導航效果，需要的基本點：

這個效果主要點是對技能點2的分解使用，包括animation-direction:alternate（屬性定義是否應該輪流反向播）；animation-iteration-count:infinite（無限循環播放）、animation-duration: .4s；（動畫所持續的時間）、animation-delay: .6s；（是用來指定元素動畫開始時間）

帶著這些基本點，繼續前行：

step01：整體結構布局

step02：頁面美化

最基本的樣式重置和靜態效果實現，在這里就略過了，我們主要說一下動態樣式

step03：動態效果實現

step04：細節處理

基本效果完成之后，主要對看效果展現把效果是否循環播放，是否有延遲播放等，就這樣一個音符跳動效果就“誕生”了。

更多小案例效果大家可以進Q群：142991222一起學習一起飛哦！喜歡的童鞋贊起來啦！

eb 上的多媒體指的是音效、音樂、視頻和動畫。

現代網絡瀏覽器已支持很多多媒體格式。

什么是多媒體？

多媒體來自多種不同的格式。它可以是您聽到或看到的任何內容，文字、圖片、音樂、音效、錄音、電影、動畫等等。

在因特網上，您會經常發現嵌入網頁中的多媒體元素，現代瀏覽器已支持多種多媒體格式。

在本教程中，您將了解到不同的多媒體格式，以及如何在您的網頁中使用它們。

瀏覽器支持

第一款因特網瀏覽器只支持文本，而且即使是對文本的支持也僅限于單一字體和單一顏色。隨后誕生了支持顏色、字體和文本樣式的瀏覽器，圖片支持也被加入。

不同的瀏覽器以不同的方式處理對音效、動畫和視頻的支持。某些元素能夠以內聯的方式處理，而某些則需要額外的插件。

多媒體格式

格式 多媒體元素（比如視頻和音頻）存儲于媒體文件中。

確定媒體類型的最常用的方法是查看文件擴展名。當瀏覽器得到文件擴展名 .htm 或 .html 時，它會假定該文件是 HTML 頁面。.xml 擴展名指示 XML 文件，而 .css 擴展名指示樣式表。圖片格式則通過 .gif 或 .jpg 來識別。

多媒體元素元素也擁有帶有不同擴展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

視頻格式

聲音格式

MP3是一種音頻壓縮技術，其全稱是動態影像專家壓縮標準音頻層面3（Moving Picture Experts Group Audio Layer III），簡稱為MP3。它被設計用來大幅度地降低音頻數據量。如果你的站點是音樂類型的，你可以選擇mp3格式。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！