HTML5实现QQ聊天气泡效果


Posted in HTML / CSS onJune 26, 2017

今天自己用 HTML/CSS 做了个类似QQ的聊天气泡,以下是效果图:

HTML5实现QQ聊天气泡效果

以下说下关键地方的样式设置。然后贴出html和css代码(不多)。

步骤1:布局
 

消息?裼?iv+float布局,每条消息用一个DIV标签包裹,里面再放两个DIV分别用来包裹用户图标和用户消息内容。左?认?ⅲ?惹宄?《??缓笊柚 float:left。这样用户图标和消息内容就能够显示在同一行了,当中用户图标在左边,消息内容紧邻着用户图标。

右?认?ⅲ?嗤?惹宄?《?H缓笊柚 float:right,这样用户图标和消息显示在同一行了。当中图标在最右边。图标左?仁窍?ⅰ?/p>

HTML5实现QQ聊天气泡效果

步骤2:设置圆角矩形

border-radius:7px;

HTML5实现QQ聊天气泡效果

步骤3:三角形箭头
&n

将DIV的宽度和高度设置为0,设置边框宽度,能够使其表现出一个由四个三角形组成的矩形,每一个三角形的颜色和大小能够通过设置border宽度和颜色设置。

这里将当中三个三角形颜色设置为透明。仅仅留下一个三角形可见。

HTML5实现QQ聊天气泡效果

.triangle{
        width: 0px;
        height: 0px;
        border-width: 15px;
        border-style: solid;
        border-color: red blue green gold;
    }

HTML5实现QQ聊天气泡效果

.triangle{
        width: 0px;
        height: 0px;
        border-width: 15px;
        border-style: solid;
        border-color: transparent transparent transparent red;
    }

关键点4:三角形尾随矩形框

使用相对定位。能够使三角形始终固定在矩形框的边上。

position:relative;

HTML5实现QQ聊天气泡效果

所有代码:

<html>
<head>
<style>
  /* bubble style */
        .sender{
            clear:both;
        }
        .sender div:nth-of-type(1){
            float: left;
        }
        .sender div:nth-of-type(2){
            background-color: aquamarine;
            float: left;
            margin: 0 20px 10px 15px;
            padding: 10px 10px 10px 0px;
            border-radius:7px;
        }

        .receiver div:first-child img,
        .sender div:first-child img{
            width:50px;
            height: 50px;
        }

        .receiver{
            clear:both;
        }
        .receiver div:nth-child(1){
            float: right;
        }
        .receiver div:nth-of-type(2){
            float:right;
            background-color: gold;
            margin: 0 10px 10px 20px;
            padding: 10px 0px 10px 10px;
            border-radius:7px;
        }

        .left_triangle{
            height:0px;  
            width:0px;  
            border-width:8px;  
            border-style:solid;  
            border-color:transparent aquamarine transparent transparent;  
            position: relative;
            left:-16px;
            top:3px;
        }

        .right_triangle{
            height:0px;  
            width:0px;  
            border-width:8px;  
            border-style:solid;  
            border-color:transparent transparent transparent gold;  
            position: relative;
            right:-16px;
            top:3px;
        }

  </style>
</head>
<body>
<!-- Left -->
<div class="sender">
      <div>
          <img src="chatTemplateExample2_files/cat.jpg">
      </div>
  <div>
      <div class="left_triangle"></div>
      <span> hello, man! </span>
   </div>
  </div>
<!-- Right -->
  <div class="receiver">
      <div>
          <img src="chatTemplateExample2_files/cat.jpg">
      </div>
   <div>
        <div class="right_triangle"></div>
        <span> hello world </span>
   </div>
  </div>  
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 HTML / CSS
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
详解H5本地储存Web Storage
Jul 03 #HTML / CSS
H5仿微信界面教程(一)
Jul 05 #HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 #HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 #HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 #HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 #HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 #HTML / CSS
You might like
PHP实现远程下载文件到本地
2015/05/17 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
python将图片文件转换成base64编码的方法
2015/03/14 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
python实现停车管理系统
2018/11/30 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
供应链金融服务方案
2014/05/25 职场文书
芙蓉镇观后感
2015/06/10 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
求职自我评价参考范文
2019/05/16 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
MySQL主从切换的超详细步骤
2022/06/28 MySQL