HTML5实现微信聊天气泡效果

最近做一个HybridApp，前端有一个群聊的功能，于是就想模仿微信的聊天界面，先看效果图：

HTML代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>HTML5实现微信聊天气泡效果</title>

  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <link rel="stylesheet" href="chatbox.css">

</head>

<body>

<!-- Left -->

<div class="chat-sender">

  <div><img src="img/ben.png"></div>

  <div>阿奔 Ben</div>

  <div>

    <div class="chat-left_triangle"></div>

    <span> 苹果增加三款配件的颜色选项</span>

  </div>

</div>

<!-- Right -->

<div class="chat-receiver">

  <div><img src="img/max.png"></div>

  <div>好人·马克思</div>

  <div>

    <div class="chat-right_triangle"></div>

    <span> 但是如果你正在再发新的APP跨平台项目，我建议你考虑一下Ionic2/Ionic3。 ionic2/Ionic3的架构使得“单一职责原则”得到了体现，组件、页面之间相互独立，有利于内聚和解耦。</span>

  </div>

</div>

<!-- Right -->

<div class="chat-sender">

  <div><img src="img/adam.jpg"></div>

  <div>阿达姆 Adam</div>

  <div>

    <div class="chat-left_triangle"></div>

    <span> 一款接近原生的Html5移动App开发框架</span>

  </div>

</div>

<!-- Notice/Center -->

<div class="chat-notice">

  <span>2017年12月10日 23:13</span>

</div>

<!-- Left -->

<div class="chat-sender">

  <div><img src="img/perry.png"/></div>

  <div>佩里 Perry</div>

  <div>

    <div class="chat-left_triangle"></div>

    <span> Ionic遵循视图控制模式，通俗的理解和 Cocoa 触摸框架相似。在视图控制模式中，我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。</span>

  </div>

</div>

<!-- Left -->

<div class="chat-sender">

  <div><img src="img/mike.png"></div>

  <div>麦克</div>

  <div>

    <div class="chat-left_triangle"></div>

    <span> 你可以用ionRefresher指令实现拉动刷新，并可以用ionInfiniteScroll指令实现无限滚动。</span>

  </div>

</div>

<!-- Right -->

<div class="chat-receiver">

  <div><img src="img/max.png"></div>

  <div>好人·马克思</div>

  <div>

    <div class="chat-right_triangle"></div>

    <span> 最后但并非最不重要的是</span>

  </div>

</div>

<!-- Notice/Center -->

<div class="chat-notice">

  <span>你被群主移除群聊</span>

</div>

</body>

</html>

CSS样式代码 chatbox.css

    body{

      background-color: #ebebeb;

      font-family: -apple-system;

      font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;

    }

    .chat-sender{

      clear:both;

      font-size: 80%;

    }

    .chat-sender div:nth-of-type(1){

      float: left;

    }

    .chat-sender div:nth-of-type(2){

      margin: 0 50px 2px 50px;

      padding: 0px;

      color: #848484;

      font-size: 70%;

      text-align: left;

    }

    .chat-sender div:nth-of-type(3){

      background-color: white;

      /*float: left;*/

      margin: 0 50px 10px 50px;

      padding: 10px 10px 10px 10px;

      border-radius:7px;

      text-indent: -12px;

    }

    .chat-receiver{

      clear:both;

      font-size: 80%;

    }

    .chat-receiver div:nth-of-type(1){

      float: right;

    }

    .chat-receiver div:nth-of-type(2){

      margin: 0px 50px 2px 50px;

      padding: 0px;

      color: #848484;

      font-size: 70%;

      text-align: right;

    }

    .chat-receiver div:nth-of-type(3){

      /*float:right;*/

      background-color: #b2e281;

      margin: 0px 50px 10px 50px;

      padding: 10px 10px 10px 10px;

      border-radius:7px;

    }

    .chat-receiver div:first-child img,

    .chat-sender div:first-child img{

      width: 40px;

      height: 40px;

      /*border-radius: 10%;*/

    }

    .chat-left_triangle{

      height: 0px;

      width: 0px;

      border-width: 6px;

      border-style: solid;

      border-color: transparent white transparent transparent;

      position: relative;

      left: -22px;

      top: 3px;

    }

    .chat-right_triangle{

      height: 0px;

      width: 0px;

      border-width: 6px;

      border-style: solid;

      border-color: transparent transparent transparent #b2e281;

      position: relative;

      right:-22px;

      top:3px;

    }

    .chat-notice{

      clear: both;

      font-size: 70%;

      color: white;

      text-align: center;

      margin-top: 15px;

      margin-bottom: 15px;

    }

    .chat-notice span{

      background-color: #cecece;

      line-height: 25px;

      border-radius: 5px;

      padding: 5px 10px;

    }

HTML5实现微信聊天气泡效果的更多相关文章

【HTML5】实现QQ聊天气泡效果
今天自己用 HTML/CSS 做了个类似QQ的聊天气泡,以下是效果图: 以下说下关键地方的样式设置.然后贴出html和css代码(不多). 步骤1:布局消息採用div+float布局,每条消息用一个 ...
HTML5仿微信聊天界面、微信朋友圈实例
这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...
css实现聊天气泡效果
--------------------------------------- css功能强大,能实现很多炫酷的效果,今天给大家分享用css3绘制聊天气泡的方法: -------------- ...
巧用border特性实现聊天气泡效果
利用border特性,实现三角形,很简单,我们直接看效果: html: <div class="bubble-container ">你好么 <div class ...
HTML5仿手机微信聊天界面
HTML5仿手机微信聊天界面这篇文章主要为大家详细介绍了HTML5仿手机微信聊天界面的关键代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下给大家带来的是HTML5仿手机微信聊天界面, ...
CSS3 仿微信聊天小气泡
今天给大家分享一个我刚做的项目中的一个小案例, 因为我们在做一个聊天的功能,之前的聊天页面UI很丑,我就不在这里展示给大家了. 现在就教大家怎么用css3制作一个和微信聊天界面一样的页面. 首先给大家 ...
html5的audio实现高仿微信语音播放效果
效果图前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...
C#绘制三角形并填充，使用winform实现qq聊天气泡
首先是需求,需要制作一个聊天气泡, 但是winform中有没有类似Android的.9图,只有自己设计图形拼接气泡. 第一种是绘制空心三角形,第二种是绘制三角形区域,可以指定RGB颜色. privat ...
Android 点九图机制讲解及在聊天气泡中的应用
点九图简介 Android为了使用同一张图作为不同数量文字的背景,设计了一种可以指定区域拉伸的图片格式".9.png",这种图片格式就是点九图. 注意:这种图片格式只能被使用于An ...

随机推荐

解决bootstrap和easyUI部分css类冲突问题。
今天发现bootstrap和easyui的css类重复用了一个很笨的办法解决了,这种小事网上都不好搜啊. 我先引用的bootstrap后引用的easy UI,bootstrap的会被覆盖,boot的样 ...
Beta冲刺——第四天
beat冲刺:第四天各个成员今日完成的任务成员冯晓.马思远彭辉.王爽吴琼.郝延婷今日完成任务 ·管理员功能模块的代码规范与测试 ·后台审稿系统代码规范 ·代码规范 ·系统审稿模块功能测试 ...
mysql_day04
MySQL-Day03回顾1.索引 1.普通索引 index 2.唯一索引(UNI,字段值不允许重复,但可以为NULL) 1.创建 1.字段名数据类型 unique 2.unique(字段名), u ...
Head First Servlets & JSP 学习笔记第七章 —— 作为JSP
<%@ …… %> 这是指令 <%@ page ……import="java.util.Date" %> 这是page指令,import是page指令的一个 ...
kalman滤波（二）---扩展kalman滤波[EKF]的推导
一.状态估计的解释我们知道每个方程都受噪声的影响,这里把位姿x和路标y看成服从某种概率分布的随机变量.因此我们关心的问题就变成了:当我们已知某些运动数据u和观测数据z时,如何确定状态量x,y的分布? ...
android 隐藏虚拟按钮栏及标题等权限设置
华为手机有虚拟按钮,根据以下设置方法可以进行隐藏控制 /** * 隐藏虚拟按键,并且全屏 */ protected void hideBottomUIMenu(Context context){ if ...
李白打酒——C++
话说大诗人李白,一生好饮.幸好他从不开车. 一天,他提着酒壶,从家里出来,酒壶中有酒2斗.他边走边唱: 无事街上走,提壶去打酒. 逢店加一倍,遇花喝一斗. 这一路上,他 ...
从 NCBI 批量下载基因组的方法
先下载 assembly summary files The assembly_summary files report metadata for the genome assemblies on t ...
C++ 提取网页内容系列之一
标题: C++ 提取网页内容系列作者: itdef链接: http://www.cnblogs.com/itdef/p/4171179.html 欢迎转帖请保持文本完整并注明出处首先分析网页 ...
django by example 第五章 No module named 'sorl-thumbnail'
描述:按照原书在settings的installed apps中加入sorl-thumbnail后同步数据库显示No module named 'sorl-thumbnail' 解决方案: 根据官方文 ...

HTML5实现微信聊天气泡效果

HTML5实现微信聊天气泡效果的更多相关文章

随机推荐

热门专题