CSS實(shí)現(xiàn)音頻播放時(shí)柱狀波動(dòng)效果
發(fā)布時(shí)間:2023-10-10 17:22:16 作者:閆三歲
我要評論

通過CSS的動(dòng)畫屬性animation可以實(shí)現(xiàn)音頻播放時(shí)的動(dòng)畫效果,同時(shí)配合JS操作動(dòng)畫的animation-play-state屬性,來控制動(dòng)畫的暫停和播放,本文重點(diǎn)介紹CSS實(shí)現(xiàn)音頻播放時(shí)柱狀波動(dòng)效果,感興趣的朋友一起看看吧
通過CSS的動(dòng)畫屬性animation可以實(shí)現(xiàn)音頻播放時(shí)的動(dòng)畫效果,同時(shí)配合JS操作動(dòng)畫的animation-play-state屬性,來控制動(dòng)畫的暫停和播放。
網(wǎng)頁布局采用的flex布局。若在客戶端展示,可使用定位布局(本人遇到flex布局會出現(xiàn)底部輕微顫動(dòng)的bug)
.voice-playing{ height: 50px; width: 40px; display: flex; /* 底部對齊,實(shí)現(xiàn)從下往上的動(dòng)畫效果 */ align-items: flex-end; justify-content: space-between; } .play1{ width: 10px; background-color: #bfc; animation: playing1 1s linear infinite alternate; } .play2{ width: 10px; background-color: #bfc; animation: playing2 1s linear infinite alternate; } .play3{ width: 10px; height: 10px; background-color: #bfc; animation: playing3 1s .5s linear infinite alternate; } @keyframes playing1 { 0%{ height: 10px; } 100%{ height: 30px; } } @keyframes playing2 { 0%{ height: 30px; } 100%{ height: 10px; } } @keyframes playing3 { 0%{ height: 10px; } 100%{ height: 30px; } }
到此這篇關(guān)于CSS實(shí)現(xiàn)音頻播放時(shí)柱狀波動(dòng)效果的文章就介紹到這了,更多相關(guān)css音頻播放柱狀波動(dòng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
CSS 控制動(dòng)畫播放與暫停的小技巧(非常實(shí)用)
這篇文章主要介紹了CSS 控制動(dòng)畫播放與暫停的小技巧(非常實(shí)用),本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友2020-07-21- 這篇文章主要介紹了用CSS播放聲音的幾種技巧方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2020-04-17
巧用CSS濾鏡制作絢麗圖片播放效果-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
CSS中有revealTrans濾鏡在網(wǎng)頁中制作特效非常有用處。這次,我們準(zhǔn)備介紹另一種使用revealTrans濾鏡制作出超弦圖片播放的效果。 實(shí)現(xiàn)思路:使用revealTrans濾鏡制作出2008-10-17