CSS精仿微信对话框之微信语音部分
作者：维易PHP培训学院 时间 2018-05-16
《CSS精仿微信对话框之微信语音部分》要点：
本文介绍了CSS精仿微信对话框之微信语音部分，希望对您有用。如果有疑问，可以联系我们。
相关主题：CSS2和CSS3特效
今天看到一个很不错的微信对话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>相关教程
- PHP应用：php实现的css文件背景图片下载器代码
- PHP实战：php实现压缩多个CSS与JS文件的方法
- vbot微信机器人微信聊天消息详解（18）：群组变动
- 微信聊天机器人开发之API文档
- 微信公众号开发之网页授权:获取用户信息
- 微信聊天机器人vbot为什么不能获取全部微信群？只获取几个
- 微信机器人扫码登录后出现vbot.ERROR: Undefined index: skey 是什么原因
- 如何在手机浏览器中打开微信APP、淘宝APP、京东APP并跳转到指定详情页
- CSS实现单行、多行文本溢出显示省略号...
- PHP学习：php实现的CSS更新类实例
- PHP应用：使用YUI+Ant 实现JS CSS压缩
- Fiddler抓取手机端微信公众号等https内容
