css 简单的音频跳动的动画

最新推荐文章于 2024-09-01 01:48:48 发布

liangyk1005

最新推荐文章于 2024-09-01 01:48:48 发布

阅读量2.4k

点赞数

文章标签： vue css3

本文链接：https://blog.csdn.net/liangyk1005/article/details/106218335

版权

使用Vue组件创建了一个简单动画，展示歌曲播放状态。通过CSS3动画技巧，动态改变线条样式，模拟音频跳动效果，替代了原本打算使用的gif图片。

摘要由CSDN通过智能技术生成

vue组件

想动态的线条变化，简单的表示一下某一首歌正在播放
原本想找个gif图片放上去，没找到，就用动画弄了一个。。。

<template>
<div id="app">
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</template>

<script>
   export default {
       data(){
            return{

            }
        }
   }
</script>

<style>
#app{
	height:50px;
	width:30px;
}

#box div{
    display: inline-block;
    position: absolute;
    bottom: 0;
    width: 5px;
    height: 30px;
    background-color: rgb(243, 25, 25);
    transform-origin: bottom ;
    border-radius: 5px 5px 0 0;
}
#box div:nth-child(1){
    left: 0px;
    animation: musicWave 0.5s infinite linear both alternate;
}
#box div:nth-child(2){
    left: 10px;
    animation: musicWave 0.2s infinite linear both alternate;
}
#box div:nth-c