html实现语音播放,css实现语音播放动画---原创demo

小程序实现代码如下：

/* animationName控制动画播放 */

/*css部分 */

.animation{/* 父框 */

width: 100px;

height:30px;

border: 1px solid #6DC7F9;

border-radius: 30rpx;

display: flex;

align-items: center;

justify-content: center;

margin: 0 auto;

}

.animation>view:nth-of-type(1){

width: 3px;

height: 5px;

background-color: #0BB8EF;

animation-delay: .4s;/*动画延迟 */

}

.animation>view:nth-of-type(2){

width: 3px;

height:10px;

background-color: rgb(126, 212, 238);

animation-delay: .8s;

}

.animation>view:nth-of-type(3){

width: 4px;

height: 15px;

background-color: #0BB8EF;

animation-delay: .1s;

}

.animation>view:nth-of-type(4){

width: 3px;

heigh