《CSS精仿微信对话框之微信语音部分》要点：
本文介绍了CSS精仿微信对话框之微信语音部分，希望对您有用。如果有疑问，可以联系我们。
参考：http://www.taokouling.com/index/wechat
CSS实现：
<!DOCTYPE html> <html lang="en"> <head> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <Meta charset="utf-8"/> <title>CSS仿微信对话聊天</title> <Meta name="description" content="404"/> <Meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <style> *, :after, :before { Box-sizing: border-Box; } .i-body { position: absolute; width: 650px; top: 128px; bottom: 100px; left: 0; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; /* background-image: url(../images/i-body-bg.jpg); */ } .i-b-rec-text, .i-b-sen-text { margin: 40px 52px 0 20px; position: relative; } .i-b-rec-text img, .i-b-sen-text img { position: absolute; width: 82px; height: 82px; left: 0; top: 0; background: #fff; } img { max-width: 100%; } .i-b-rec-text div, .i-b-sen-text div { position: relative; margin-left: 82px; margin-right: 50px; text-align: initial; } .i-b-rec-text div p, .i-b-sen-text div p { font-size: 22px; color: #888; padding: 0; margin: 0; padding-left: 30px; display: none; position: relative; top: -5px; margin-bottom: -2px; } .i-b-rec-text div span, .i-b-sen-text div span { float: left; min-height: 80px; min-width: 96px; margin-left: 24px; font-size: 28px; border: 1px #ccc solid; background: #fafafa; border-radius: 10px; position: relative; } .i-b-rec-text div i, .i-b-sen-text div i { position: absolute; width: 24px; height: 24px; background: url(http://www.taokouling.com/static/index/factory/images/rec-txt-bg.png) 1px -31px no-repeat; left: -24px; top: 27px; } .i-b-rec-text div.i-b-voice b, .i-b-sen-text div.i-b-voice b { position: absolute; width: 40px; height: 40px; background: url(http://www.taokouling.com/static/index/factory/images/rec-record.png) no-repeat; background-size: 100%; top: 20px; left: 20px; } .i-b-rec-text div.i-b-voice em, .i-b-sen-text div.i-b-voice em { color: #999; position: absolute; right: -115px; top: 8px; width: 100px; padding: 20px 0; } .i-b-rec-text div span em, .i-b-sen-text div span em { font-style: normal; padding: 20px; display: block; } /*======== 这里可取消，是语音进度条后面时间上方的X号========*/ .i-b-rec-text .msg-del { right: -50px; left: auto; } .iphone-preview .msg-del { display: block; } .msg-del { position: absolute; width: 30px; height: 30px; background: url(http://www.taokouling.com/static/index/factory/images/msg-del.png) no-repeat; text-indent: -999999px; left: 20px; top: 5px; cursor: pointer; display: none; } /*===============*/ .i-b-rec-text:after, .i-b-sen-text:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } /*===========右侧自己的语音===========*/ .i-b-sen-text { margin: 40px 20px 0 46px; } .i-b-rec-text, .i-b-sen-text { /*margin: 40px 52px 0 20px;*/ position: relative; } .i-b-sen-text img { left: auto; right: 0; } .i-b-sen-text div { margin-left: 50px; margin-right: 82px; } .i-b-rec-text div, .i-b-sen-text div { position: relative; /*margin-left: 82px; margin-right: 50px;*/ text-align: initial; } .i-b-sen-text div span { background: #9ce553; border-color: #7ac754; float: right; margin-left: 0; margin-right: 24px; } .i-b-sen-text div i { background: url(http://www.taokouling.com/static/index/factory/images/sen-txt-bg.png) right -31px no-repeat; left: auto; right: -24px; } .i-b-sen-text div.i-b-voice b { background: url(http://www.taokouling.com/static/index/factory/images/sen-record.png) no-repeat; right: 20px; left: auto; } .i-b-sen-text div.i-b-voice em { right: auto; left: -115px; text-align: right; } .i-b-sen-text .msg-del { left: -50px; } .iphone-preview .msg-del { display: block; } </style> </head> <body> 参考：http://www.taokouling.com/index/wechat <br/> <div class="i-body"> <!--<div><span>星期二 下午4:37</span><a></a></div> <div> <img src="/static/images/face.png"> <div> <p>马克_SHI</p> <span> <i></i> <em> <div><img src="/static/images/index-image2.jpg" /></div> </em> <a></a> </span> </div> </div> <div> <img src="/static/face/10016.jpg"> <div> <span> <i></i> <em>亲，这个怎么用<img src="/static/images/qq_emoji/Expression_22@2x.png"></em> <a></a> </span> </div> </div> <div> <img src="/static/images/face.png"> <div> <p>马克_SHI</p> <span> <i></i> <em>这个是示例对话哦，你先点击下面绿色的“清除对话”按钮，然后切换到对话设置那里，添加你要的对话类型就行了，需要多个用户进行对话请点击“添加用户”按钮添加用户，然后添加对话即可<img src="/static/images/qq_emoji/Expression_22@2x.png"></em> <a></a> </span> </div> </div> <div> <img src="/static/face/10016.jpg"> <div> <span> <i></i> <em>好哒，谢谢你，我操作试试看</em> <a></a> </span> </div> </div> <div> <img src="/static/images/face.png"> <div> <p>马克_SHI</p> <span> <i></i> <em>88.00</em> <a></a> </span> </div> </div> <div> <img src="/static/face/10016.jpg"> <div> <span> <i></i> <em>88.00</em> <a></a> </span> </div> </div>--> <div class="i-b-rec-text"><img src="http://www.taokouling.com/static/index/factory/images/face/10054.jpg"> <div class="i-b-voice"><p class="i-b-nick">r8N3t</p><span style="width:329.20000000000005px"><i></i><b></b><em>53''</em><a class="msg-del"></a></span></div> </div> <div class="i-b-sen-text"><img src="http://www.taokouling.com/static/index/factory/images/face/10020.jpg"> <div class="i-b-voice"><span style="width:140px"><i></i><b></b><em>10''</em><a class="msg-del"></a></span></div> </div> </div> <div id="bottom"> </div> </body> </html>
