html5仿微信发送语音消息,H5特效模仿微信说话语音代码

* {

margin: 0;

padding: 0;

}

html, body {

background: #fff;

}

.btn {

position: fixed;

bottom: 0;

width: 100%;

height: 60px;

background: #eee;

}

.btn input {

width: 100%;

height: 100%;

font: 20px/60px 'microsoft yahei';

}

.blackBoxSpeak {

width: 176px;

height: 176px;

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

background: url("./ic_record@2x.png") no-repeat 28px 16px/65px 104px,

url("./ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;

background: rgba(0, 0, 0, .7);

display: none;

border-radius: 12px;

}

.blackBoxSpeakConent {

<