CSS實(shí)現(xiàn)音頻播放時(shí)柱狀波動(dòng)效果
發(fā)布時(shí)間:2023-10-10 17:22:16 作者:閆三歲
我要評(píng)論
通過(guò)CSS的動(dòng)畫屬性animation可以實(shí)現(xiàn)音頻播放時(shí)的動(dòng)畫效果,同時(shí)配合JS操作動(dòng)畫的animation-play-state屬性,來(lái)控制動(dòng)畫的暫停和播放,本文重點(diǎn)介紹CSS實(shí)現(xiàn)音頻播放時(shí)柱狀波動(dòng)效果,感興趣的朋友一起看看吧
通過(guò)CSS的動(dòng)畫屬性animation可以實(shí)現(xiàn)音頻播放時(shí)的動(dòng)畫效果,同時(shí)配合JS操作動(dòng)畫的animation-play-state屬性,來(lái)控制動(dòng)畫的暫停和播放。

網(wǎng)頁(yè)布局采用的flex布局。若在客戶端展示,可使用定位布局(本人遇到flex布局會(huì)出現(xiàn)底部輕微顫動(dòng)的bug)
.voice-playing{
height: 50px;
width: 40px;
display: flex;
/* 底部對(duì)齊,實(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章

CSS 控制動(dòng)畫播放與暫停的小技巧(非常實(shí)用)
這篇文章主要介紹了CSS 控制動(dòng)畫播放與暫停的小技巧(非常實(shí)用),本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友2020-07-21- 這篇文章主要介紹了用CSS播放聲音的幾種技巧方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2020-04-17
巧用CSS濾鏡制作絢麗圖片播放效果-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
CSS中有revealTrans濾鏡在網(wǎng)頁(yè)中制作特效非常有用處。這次,我們準(zhǔn)備介紹另一種使用revealTrans濾鏡制作出超弦圖片播放的效果。 實(shí)現(xiàn)思路:使用revealTrans濾鏡制作出2008-10-17


