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-child(3){
    left: 20px;
    animation: musicWave 0.6s infinite linear both alternate;
}
#box div:nth-child(4){
    left: 30px;
    animation: musicWave 0.3s infinite linear both alternate;
}

@keyframes musicWave{
    0%{
        height: 10px;
    }
    100%{
        height: 30px;
    }
}
</style>