html5 audio 微信语音样式,模仿微信语音条的css样式

[非原创，转载]

来源,点击跳转

微信语音样式

* {

margin: 0;

padding: 0;

}

.box {

width: 120px;

height: 120px;

box-sizing: border-box;

position: relative;

margin: 50px auto;

}

.wifi-symbol {

width: 50px;

height: 50px;

box-sizing: border-box;

overflow: hidden;

transform: rotate(135deg);

}

.wifi-circle {

border: 5px solid #999999;

border-radius: 50%;

position: absolute;

}

.first {

width: 5px;

height: 5px;

background: #cccccc;

top: 45px;

left: 45px;

}

.second {

width: 25px;

height: 25px;

top: 35px;

left: 35px;

animation: fadeInOut 1s infinite 0.2s;

}

.third {

width: 40px;

height: 40px;

top: 25px;

left: 25px;

animation: fadeInOut 1s infinite 0.4s;

}

@keyframes fadeInOut {

0% {

opacity: 0;

/*初始状态 透明度为0*/

}

100% {

opacity: 1;

/*结尾状态 透明度为1*/

}

}

image.png