html气泡聊天样式,css3的聊天气泡样式
这次给大家带来css3的聊天气泡样式,做出css3的聊天气泡样式的注意事项有哪些,下面就是实战案例,一起来看一下。
在聊天的场景中,聊天内容需要用到气泡修饰,如下图。下面一一讲解。
图片式:
第一个样式是京东客服,气泡的圆角和钩子都是用了图片。使用了一个table组合成了一个圆角的框框。lm样式拼出了钩子。
很抱歉,现在人工客服忙,让小JIMI为您解答吧。 |
||
你好,我是stoneniqiu | ||
样式:.jimi_lists {
margin: 0 -10px 20px 10px;
position: relative;
}
.jimi_lists .header_img.jimi3 {
background: url(../img/jimi_50_3.png) no-repeat 0 0;
}
.jimi_lists .header_img {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
}.fl {
float: left;
}
.jimi_lists .msg {
margin-left: 59px;
margin-right: 40px;
margin-top: 2px;
float: left;
display: inline;
}
.jimi_lists .lt {
background: url(../img/msg_bg_lr.png) no-repeat 0 0;
width: 26px;
height: 10px;
}
.jimi_lists .tt {
background: url(../img/msg_bg_tb.png) repeat-x 0 -23px;
height: 10px;
}.jimi_lists .rt {
background: url(../img/msg_bg_lr.png) no-repeat -35px 0;
width: 10px;
height: 10px;
}.jimi_lists .lm {
background: url(../img/msg_bg_lr.png) repeat-y -94px 0;
width: 26px;
vertical-align: top;
position: relative;
}.jimi_lists .mm {
padding: 0 5px;
background-color: #FFF;
word-break: break-all;
word-wrap: break-word;
color: #333;
line-height: 20px;
}.jimi_lists .lm span {
background: url(../img/msg_bg_lr.png) no-repeat 0 -14px;
display: inline-block;
width: 26px;
height: 16px;
position: absolute;
top: 5px;
}.jimi_lists .rm {
background: url(../img/msg_bg_lr.png) repeat-y -113px 0;
width: 10px;
}.jimi_lists .lb {
background: url(../img/msg_bg_lr.png) no-repeat 0 -43px;
width: 10px;
height: 10px;
}.jimi_lists .bm {
background: url(../img/msg_bg_tb.png) repeat-x 0 -25px;
height: 10px;
}.jimi_lists .rb {
background: url(../img/msg_bg_lr.png) no-repeat -35px -43px;
width: 10px;
height: 10px;
}.customer_lists {
position: relative;
margin: 0 12px 20px 20px;
}.customer_lists .msg {
float: right;
margin-right: 73px;
_margin-right: 38px;
margin-top: 2px;
}.customer_lists .lt {
background: url(../img/msg_bg_lr.png) no-repeat -47px -0;
width: 10px;
height: 10px;
}.customer_lists .tt {
background: url(../img/msg_bg_tb.png) repeat-x 0 0;
height: 10px;
}.customer_lists .rt {
background: url(../img/msg_bg_lr.png) no-repeat -63px 0;
width: 26px;
height: 10px;
}.customer_lists .lm {
background: url(../img/msg_bg_lr.png) repeat-y -126px 0;
width: 10px;
}.customer_lists .mm {
padding: 1px 8px;
background-color: #3897E7;
word-break: break-all;
word-wrap: break-word;
color: #FFF;
}.customer_lists .rm {
background: url(../img/msg_bg_lr.png) repeat-y -129px 0;
width: 26px;
vertical-align: top;
position: relative;
}.customer_lists .lb {
background: url(../img/msg_bg_lr.png) no-repeat -47px -36px;
width: 10px;
height: 10px;
}.customer_lists .bm {
background: url(../img/msg_bg_tb.png) repeat-x -106px -4px;
height: 10px;
}.customer_lists .rb {
background: url(../img/msg_bg_lr.png) no-repeat -63px -36px;
width: 26px;
height: 10px;
}.customer_lists .rm span {
background: url(../img/msg_bg_lr.png) no-repeat -63px -14px;
display: inline-block;
width: 26px;
height: 16px;
position: absolute;
top: 5px;
}.customer_lists .header_img_hover {
position: absolute;
background: url(../img/avatar_mask_01.png);
top: 0;
width: 50px;
height: 50px;
}.customer_lists .header_img {
position: absolute;
top: 0;
right: 14px;
width: 50px;
height: 50px;
}
.clearfix:after {
content: " .";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
View Code
背景式:
第二种主要是使用了:before伪类画出了三角形,然后用定位拼在了一起。
换个气泡如何
这个不错
样式:.bkbubble.right p:before, .bkbubble.left p:before {
width: 0;
position: absolute;
top: 12px;
border-style: solid;
content: "";
}
.bkbubble.left {
text-align: right;
}
.bkbubble.right p:before {
left: -12px;
border-color: transparent #00bfff;
border-width: 0 12px 12px 0; }
.bkbubble.left p:before {
right: -12px;
border-color: transparent #00bfff;
border-width: 0 0 12px 12px ; }
更多三角形:http://www.cnblogs.com/lhb25/p/css-and-css3-triangle.html
边框式:
如果要求边框颜色和背景颜色不一样呢?上面的方法就不行了,因为用:before画三角形是利用border的原理,也就是说,在上面这种方式下,气泡边上的小三形是无法呈现两种颜色的,因为他只有一个border的颜色。那就要想办法凑出一个有边框的三角形了。
您好,请问有什么可以帮到您?
1.先画一个小矩形。.lim_operator .lim_tale {
left: -1px;
background-color: #c8f064;
border-color: #a5d01b;
margin-left: 70px;
}.lim_tale {
position: absolute;
width: 12px;
height: 8px;
overflow: hidden !important;
top: 10px;
z-index: 2;
border-top-style: solid;
border-top-width: 1px;
}
2.画出斜线。
css里面是没有斜线的,这里是用了一个园的弧形拼出来的。在一个大圆上,截取一段弧,就是一条斜线了。.lim_operator .radiusborder {
position: absolute;
background-color: #EFF0F2;
top: -29px;
left: -94px;
height: 160px;
width: 160px;
border-top-style: solid;
border-top-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-top-right-radius: 154px;
border-color: #a5d01b;
}
叠加式:
原理就是相当于用before先画出一个有色背景,再用after画出一个白色背景,然后叠加错开顶部1-2px,这样就出现了一个有边框有背景的三角形。web 微信就是这种做法.expression:before {
content: '';
position: absolute;
left: 16px;
top: 100%;
margin-left: -7px;
border: 7px solid transparent;
border-top-color: #CFCFCF}.expression:after {
content: '';
position: absolute;
left: 16px;
top: 100%;
margin-left: -7px;
margin-top: -1px;
border: 7px solid transparent;
border-top-color: #FFF}
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
html气泡聊天样式,css3的聊天气泡样式相关推荐
- 气泡文字php,CSS3 巧妙实现聊天气泡
传统的聊天气泡 什么又是传统的聊天气泡,直接上图 代码如下 实现方式大家早有耳闻,圆角矩形和三角形嘛,三角形原理就是 border 可以设置为透明,可以复制上例中的代码修改 border-color属 ...
- 微信视频气泡 android,变变微信聊天气泡
变变微信聊天气泡是一款非常好用的气泡美化软件,让你的聊天框看起来更加个性化,不需要ROOT即可完成气泡设计,更具趣味性,喜欢的小伙们快来下载试试吧! 软件详情 让气泡在你的指尖跳跃吧! 变变聊天气泡( ...
- qt 气泡聊天界面_微信聊天气泡框素材
1.简介 由于最近的项目需要,做了些相关IM的工作.所以聊天框也是必不可少的一部分.聊天框的制作分很多种,本文以QListWidget+QPainter绘制的Item做了一个Demo.该Demo只是做 ...
- java swing 聊天气泡_Java Swing中的聊天气泡
本文将向您解释"如何在Java swing应用程序中绘制聊天气泡?" 聊天气泡与呼出气泡或思想气泡相同. 今天,大多数聊天应用程序都以这种格式显示转换,因此本文将帮助您在用Java ...
- CSS3实现对话气泡效果
CSS3实现对话气泡效果 以前我们要实现对话气泡效果很麻烦,从有了CSS3以后就变得简单多了,我们就来看下CSS3如何实现对话气泡效果.CSS3开始改变我 们的生活了.现在要创建一个在个浏览器下面都看 ...
- 高仿微信聊天界面长按弹框样式
效果图 背景 在公司做的项目里面,刚好有需要用到微信聊天界面长按弹框样式这种UI的. 网上找了一下,没找到. Android现成的 ListPopupWindow又不能满足需求. 因此在非上班时间撸一 ...
- 智能机器人——基于Html5和css3的聊天器界面设计与实现
(一)智能机器人--基于Html5和css3的聊天器界面设计 近日打算做一个智能机器人,界面的开发打算采用Html5和css3从而能够让其跨平台运行,界面的设计以聊天器为样本,其服务打算采用图灵机器人 ...
- 微信气泡主题设置_华为手机微信怎么设置气泡? 怎样改微信的气泡和主题
华为手机微信怎么设置气泡? 首先,微信的聊天气泡不像QQ,官方版的微信客户端,自身是没有聊天气泡可以更换的,如果要添加需要下载其他的软件应用. 下面以"变变聊天气泡"这款软件为例, ...
- vue仿QQ聊天室|vue聊天实例,直播聊天室
图片压缩 百亿站点 基于vue2.0+vue-cli+vuex+vue-router+webpack+es6+wcPop等技术开发的仿微信聊天界面|仿微信聊天室vue-chatRoom,实现了微信聊天 ...
最新文章
- 爬虫之数据提取jsonpath模块的使用场景和使用方法
- 单片机如何使用?51单片机C语言编程实例有哪些?
- 妙用SQL Server聚合函数和子查询迭代求和
- [sh]shell案例
- Java当中 递归打印文件大小(面向不同的对象打印文件大小)
- 【POJ - 2533】Longest Ordered Subsequence(四种方法解决最长上升子序列 含二分优化版本)
- 厉害了,自己手写一个Java热加载!
- 如何支撑企业快速构建数字孪生体
- UC伯克利造出会「轻功」的机器人,飞檐走壁,一条腿跳遍天下|湾区人工智能...
- python消息队列celery_python异步任务神器celery
- Java 和 Python 并列第二、Julia 下滑,揭晓 RedMonk 最新编程语言榜单!
- paddle中import onnxruntime报错缺失Microsoft Visual C++ Redistributable for Visual Studio 2019 not install
- sudo修改文件夹名字_用 Python 高效智能管理文件夹
- Linux虚拟机下mysql 5.7安装配置方法图文教程
- eclipse左边工程列表不见了,怎么调出来
- 七月算法机器学习 (16)人工神经网络
- 分享一款实用的APP开发框架
- GD32F103ZKT6替换STM32F103调试手记
- ROS路由器ethernet接口:
- Win10 Edge浏览器如何截网页长图
热门文章
- cannot create temp file for here-document: No space left on device
- 洛天依 Chrome 主题
- System.InvalidOperationException:“寄宿的 HWND 必须是指定父级的子窗口。”
- 原生ajax crossO,总鳍鱼Crossopterygian
- RegressionTSS=ESS+RSS
- mysql 收缩日志_MySQL5.7中Undo回收收缩相关参数
- Flexsim物流配送中心系统仿真
- CSS3实现的线条波浪动画效果
- 学习笔记:EXCEL制作动态考勤表
- CTSC/APIO2018游记