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动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 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 引用(&amp;)详解
2009/11/20 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
python3 kubernetes api的使用示例
2021/01/12 Python
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
大门门卫岗位职责
2013/11/30 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
公务员年终个人总结
2015/02/12 职场文书
教师调动申请报告
2015/05/18 职场文书
八年级语文教学反思
2016/03/03 职场文书