您的位置：首页 > 移动开发 > 微信开发

如何实现微信聊天气泡

2017-03-20 21:24 696 查看

先来分析一下聊天气泡

气泡分割为两部分，左边的矩形，右边的三角形

矩形的实现比较简单

先对对右边的三角形进行分析

div{
width:100px;
height:100px;
border:solid 50px;
border-color:#f5f5f5 #f5f5f5 #f5f5f5 #F8C301;
}

如果把width，height置为0，效果则如下图

div{
width:100px;
height:100px;
border:solid 50px;
border-color:#f5f5f5 #f5f5f5 #f5f5f5 #F8C301;
}

只需要三角形，所以把border的其中一边设置为你需要的颜色，其他三个border颜色则设置为与背景颜色相同，就得到了我们想要的三角形

所以这就是聊天气泡三角形的css

把矩形跟三角形结合在一起则变成这样子

左边矩形样式

.sendBox {

float: right;

position:relative;

right:5px;

width:auto;

max-width:180px;

min-height:32px;

line-height: 32px;

padding: 2px 8px;

font-size: 14px;

background:#F8C301;

border-radius:5px; /* 圆角 */

margin:10px 0px;

}

右边三角形样式

.sendBox .arrow {

position:absolute;

top:5px;

right:-16px; /* 圆角的位置需要细心调试哦 */

width:0;

height:0;

font-size:0;

border:solid 8px;

border-color:#f5f5f5 #f5f5f5 #f5f5f5 #F8C301;
}

使用CSS伪类after，before，实现聊天气泡

<body>
<div class="chat-bubble chat-bubble-left">
这是聊天左气泡
</div>
<div class="chat-bubble chat-bubble-right">
这是聊天右气泡
</div>

<div class="chat-bubble chat-bubble-top">
这是聊天上气泡
</div>

<div class="chat-bubble chat-bubble-bottom">
这是聊天下气泡
</div>

</body>

.chat-bubble{
position: relative;
margin:12px;
padding:5px 8px;
word-break: break-all;
background:#fff;
border: 1px solid #989898;
border-radius: 5px;
max-width:180px;
}

.chat-bubble-left {}
.chat-bubble-left:before {
content: '';
position: absolute;
width: 0;
height: 0;
left: -20px;
top:5px;
border: 10px solid;
border-color:transparent #989898 transparent transparent ;
}
.chat-bubble-left:after {
content: '';
position: absolute;
width: 0;
height: 0;
left:-16px;
top:7px;
border: 8px solid;
border-color:transparent #ffffff transparent transparent ;
}

.chat-bubble-right {}
.chat-bubble-right:before {
content: '';
position: absolute;
width: 0;
height: 0;
right: -20px;
top:5px;
border: 10px solid;
border-color:transparent transparent transparent #989898;
}
.chat-bubble-right:after {
content: '';
position: absolute;
width: 0;
height: 0;
right:-16px;
top:7px;
border: 8px solid;
border-color:transparent transparent transparent #ffffff ;
}

.chat-bubble-top {}
.chat-bubble-top:before {
content: '';
position: absolute;
width: 0;
height: 0;
left:10px;
top:31px;
border: 10px solid;
border-color: #989898 transparent transparent transparent ;
}
.chat-bubble-top:after {
content: '';
position: absolute;
width: 0;
height: 0;
left:12px;
top:30px;
border: 8px solid;
border-color:#ffffff transparent transparent transparent ;
}

.chat-bubble-bottom {}
.chat-bubble-bottom:before {
content: '';
position: absolute;
width: 0;
height: 0;
right:10px;
top:-21px;
border: 10px solid;
border-color:transparent transparent #989898 transparent ;
}
.chat-bubble-bottom:after {
content: '';
position: absolute;
width: 0;
height: 0;
right:12px;
top:-16px;
border: 8px solid;
border-color:transparent transparent #ffffff transparent ;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航