亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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)文章

最新評論