CSS實(shí)現(xiàn)音頻播放時(shí)柱狀波動(dòng)效果
發(fā)布時(shí)間：2023-10-10 17:22:16 作者：閆三歲 
我要評(píng)論
我要評(píng)論通過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布局會(huì)出現(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
