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 ...
随机推荐
- week07 13.4 NewsPipeline之 三 News Deduper
还是循环将Q2中的东西拿出来 然后查重(去mongodb里面把一天之内的新闻都拿出来,然后把拿到的新的新闻和mongodb里一天内的新闻组一个 tf-idf的对比)可看13.3 相似度检查 如果超过一 ...
- jquery 中后代遍历之children、find区别
jquery 中children.find区别 首先看一段HTML代码,如下: <table id="tb"> <tr> <td>0</t ...
- ELK收集Nginx|Tomcat日志
1.Nginx 日志收集,先安装Nginx cd /usr/local/logstash/config/etc/,创建如下配置文件,代码如下 Nginx.conf input { file { typ ...
- linux增加，删除用户组，解压缩命令，VIM使用命令
ln -s 建立软连接 ln -s /usr/bin/fdfs_trackerd /usr/local/bin ln -s /usr/bin/stop.sh /usr/ ...
- Python学习之MacBook Pro中PyCharm安装pip以及itchat
前言:Mac中自带的python没有用,自己安装了一个PyCharm,网上很多人说安装Itchat后会安装到自带的Python中去.本文记录怎么安装到自己安装的Python3.7中去.主要技术来源于h ...
- POST application/json 适用于传递多层的json
本来以为自己写了那么多post请求,ajax已经难不住了呢, 结果现实无比的残酷, 后台换成了java,发多层级的json,后台就取不到了, 虽然到最后还是配置正确了,..记录下来,引以为戒, axi ...
- JMD Handy Baby 2 to Decode & Adding New BMW 525 ID46 Key
Here OBD2TOOL share the guide on how to use JMD Handy Baby II to decode and add new keys for BMW 525 ...
- java多线程系列16 线程池
当系统系统规模较小,我们可以不使用线程池.但是当系统到达一定规模,频繁的创建和销毁线程池会消耗很多资源. 合理利用线程池能够带来三个好处. 1降低资源消耗.通过重复利用已创建的线程降低线程创建和销毁造 ...
- Spring的介绍与搭建
一.Spring的介绍 二.Spring的搭建 (1)导包 (2)创建一个对象 (3)书写配置注册对象到容器 (4)代码测试
- 2019.02.17 spoj Query on a tree V（链分治）
传送门 题意简述: 给你一棵nnn个黑白点的树,初始全是黑点. 现在支持给一个点换颜色或者求整颗树中离某个点最近的白点跟这个点的距离. 思路: 考虑链分治维护答案,每个链顶用一个堆来维护答案,然后对于 ...