html5声波效果动画,纯css制作声波扩散动画

在制作音乐播放器时需要哪种在播放音乐时音乐的背景图旋转效果并同时要有那种声波扩散的效果，一开始直接是通过js来进行动画配置及控制，发现这样做要写一推js好烦，就想着用css3动画和过度效果来看看能不能达到效果，结果一看出来效果还很不错(简单又方便)。

直接上代码：

波纹动画特效

html,body{

margin: 0;

padding: 0;

height: 100%;

background-color: #51c77d;

}

.animation{

position: relative;

width: 100px;

height: 100px;

border-radius: 50%;

background-color: #fff;

top: 50%;

left: 50%;

border: 3px solid rgba(0,0,0,0.1);

animation: rotate 10s linear infinite;

animation-play-state:paused;

-webkit-animation-play-state:paused;

}

.animation:before{

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height:100%;

border: 1px solid #fff;

border-radius: 50%;

/*bor