html5+css3仿微信聊天界面對話框 微信紅包和打賞
作者：維易PHP培訓學院 時間 2018-03-11
《html5+css3仿微信聊天界面對話框 微信紅包和打賞》要點：
本文介紹了html5+css3仿微信聊天界面對話框 微信紅包和打賞，希望對您有用。如果有疑問，可以聯系我們。
因項目需要，就利用HTML5+css3+jquery+weui做了一個仿微信聊天界面功能，可以發微信表情，查看圖片、視頻...
===HTML片段：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>消息上墻</title>
<meta name="format-detection" content="telephone=no">
<!--自動將網頁中的電話號碼顯示為撥號的超鏈接-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<!--width寬度height高度，initial-scale初始的縮放比例，minimum-scale允許縮放到的最小比例，maximum-scale允許縮放到的最大比例，user-scalable是否可以手動縮放-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--IOS設備-->
<meta name="apple-touch-fullscreen" content="yes">
<!--IOS設備-->
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<link rel="stylesheet" href="css/mend-reset.css" />
<link rel="stylesheet" href="css/mend-weikeniu.css" />
<link rel="stylesheet" href="ui.css" />
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/weui.min.js"></script>
<script src="js/fontSize.js"></script>
</head>
<body class="bg--efeff4">
<!-- <>微現場 -->
<div class="wei__scene-panel flexbox flex-direction--column">
<div class="wei__mask"></div>
<!-- //側邊欄 -->
<div class="ws__sidebar">
<div class="uinfo">
<img class="uimg" src="img/h1.jpg"/>
<h3 class="name">coco</h3>
</div>
<div class="nav">
<ul class="clearfix">
<li><a href="2-5-0微現場(簽到).html"><i class="ico i1"></i>簽到</a></li>
<li><a href="2-5-0微現場(消息上墻).html"><i class="ico i2"></i>消息上墻</a></li>
<li><a href="#"><i class="ico i3"></i>投票墻</a></li>
<li><a href="#"><i class="ico i4"></i>搖一搖</a></li>
</ul>
</div>
</div>
<!-- //頂部 -->
<div class="ws__header fixed">
<div class="inner">
<a class="cat J__sideToggle" href=";"></a>
<h2 class="hdTxt">嗨翻現場，就是這么任性！</h2>
</div>
</div>
<!-- //消息上墻頁面 -->
<div class="ws__chatMsg-panel flex1">
<div class="chatMsg-ct">
<!-- //消息列表-->
<ul class="clearfix" id="J__chatMsgList">
<li class="time"><span>2017-06-12 12:30:55</span></li>
<!--別人-->
<li class="others">
<div class="avatar">
<img src="img/h3.jpg" />
</div>
<div class="content">
<p class="author">馬云(老子天下第一)</p>
<div class="msg">
<div class="plain">
大家好，不要潛水啦，都出來聊天吧，給你們發紅包噢~~ <img class="face" src="img/wei-scene/emotion/77.gif"><img class="face" src="img/wei-scene/emotion/77.gif"><img class="face" src="img/wei-scene/emotion/77.gif">
</div>
</div>
</div>
</li>
<!--自己-->
<li class="me">
<div class="avatar">
<img src="img/memhead.jpg" />
</div>
<div class="content">
<p class="author">馬蓉(小貓咪)</p>
<div class="msg">
<div class="plain">
好誒，好期待馬總的紅包！
</div>
</div>
</div>
</li>
<li class="others">
<div class="avatar">
<img src="img/h3.jpg" />
</div>
<div class="content">
<p class="author">馬云(老子天下第一)</p>
<div class="msg">
<div class="plain">
最近了解到您們的XXX項目很火啊，用戶量蹭蹭往上長，我想詳細了解下這個項目，看能否有收購的可能？？
</div>
</div>
</div>
</li>
<li class="others image">
<div class="avatar">
<img src="img/h3.jpg" />
</div>
<div class="content">
<p class="author">馬云(老子天下第一)</p>
<div class="msg">
<div class="picture">
<img class="J__img" src="http://3g.weikeniu.com/images/ad-img001.jpg" />
</div>
</div>
</div>
</li>
<li class="others">
<div class="avatar">
<img src="img/h3.jpg" />
</div>
<div class="content">
<p class="author">馬云(老子天下第一)</p>
<div class="msg">
<div class="plain">
這個是您們的促銷活動嗎？？？
</div>
</div>
</div>
</li>
<li class="me image">
<div class="avatar">
<img src="img/memhead.jpg" />
</div>
<div class="content">
<p class="author">馬蓉(小貓咪)</p>
<div class="msg">
<div class="picture">
<img class="J__img" src="http://image.woshipm.com/wp-files/2017/05/6gcOMMhnTR2iXYJ9e3EK.jpg" />
</div>
</div>
</div>
</li>
<li class="me">
<div class="avatar">
<img src="img/memhead.jpg" />
</div>
<div class="content">
<p class="author">馬蓉(小貓咪)</p>
<div class="msg">
<div class="plain">
是的，如果想要了解更多的話，可以去我們的微官網看看~~~ <br />
<a href="http://www.xxx.com">http://www.xxx.com</a>
</div>
</div>
</div>
</li>
<li class="me image">
<div class="avatar">
<img src="img/memhead.jpg" />
</div>
<div class="content">
<p class="author">馬蓉(小貓咪)</p>
<div class="msg">
<div class="video">
<img class="J__video" src="img/video-poster.jpg" />
<div class="btn-play J__btnPlay" data-videoUrl="http://www.runoob.com/try/demo_source/movie.mp4"></div>
</div>
</div>
</div>
</li>
<li class="others">
<div class="avatar">
<img src="img/h3.jpg" />
</div>
<div class="content">
<p class="author">馬云(老子天下第一)</p>
<div class="msg">
<div class="plain">
就喜歡你們看不慣我，但又干不掉我的樣子! 哈哈哈~~ <img class="face" src="img/wei-scene/emotion/13.gif"><img class="face" src="img/wei-scene/emotion/13.gif">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- //尾部 -->
<div class="ws__footer">
<!--<div>-->
<!-- 輸入框-->
<div class="wschat__input-panel flexbox">
<div class="editor-container flex1">
<div class="editor-text J__editorText" contenteditable="true"></div>
</div>
<span class="ico i-emotion"></span>
<span class="ico i-choice"></span>
<button class="btn-send J__submitCnt">發送</button>
</div>
<!-- 操作區(表情-選擇)-->
<div class="wschat__choice-panel">
<!--表情區-->
<div class="similar-area emotion-area">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<dd><img class="face" src="img/wei-scene/emotion/0.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/1.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/2.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/3.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/4.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/5.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/6.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/7.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/8.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/9.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/10.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/11.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/12.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/13.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/14.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/15.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/16.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/17.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/18.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/19.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/20.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/21.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/22.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/23.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/24.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/25.gif" /></dd>
<dd><img class="del" src="img/wei-scene/icon-del.png" /></dd>
</div>
<div class="swiper-slide">
<dd><img class="face" src="img/wei-scene/emotion/26.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/27.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/28.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/29.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/30.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/31.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/32.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/33.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/34.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/35.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/36.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/37.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/38.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/39.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/40.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/41.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/42.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/43.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/44.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/45.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/46.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/47.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/48.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/49.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/50.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/51.gif" /></dd>
<dd><img class="del" src="img/wei-scene/icon-del.png" /></dd>
</div>
<div class="swiper-slide">
<dd><img class="face" src="img/wei-scene/emotion/52.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/53.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/54.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/55.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/56.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/57.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/58.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/59.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/60.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/61.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/62.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/63.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/64.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/65.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/66.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/67.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/68.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/69.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/70.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/71.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/72.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/73.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/74.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/75.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/76.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/77.gif" /></dd>
<dd><img class="del" src="img/wei-scene/icon-del.png" /></dd>
</div>
<div class="swiper-slide">
<dd><img class="face" src="img/wei-scene/emotion/78.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/79.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/80.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/81.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/82.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/83.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/84.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/85.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/86.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/87.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/88.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/89.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/90.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/91.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/92.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/93.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/94.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/95.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/96.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/97.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/98.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/99.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/100.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/101.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/102.gif" /></dd>
<dd><img class="face" src="img/wei-scene/emotion/103.gif" /></dd>
<dd><img class="del" src="img/wei-scene/icon-del.png" /></dd>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<!--選擇區-->
<div class="similar-area choice-area">
<ul class="flexbox">
<li>
<a class="J__chatPhoto" href=";"><i class="ico i1"></i><em>照片</em></a>
</li>
<li>
<a class="J__chatVideo" href=";"><i class="ico i2"></i><em>視頻</em></a>
</li>
<li>
<a class="J__chatBaping" href=";"><i class="ico i3"></i><em>霸屏</em></a>
</li>
<li>
<a class="J__chatHongbao" href=";"><i class="ico i4"></i><em>紅包</em></a>
</li>
<li>
<a class="J__chatDashang" href=";"><i class="ico i5"></i><em>打賞</em></a>
</li>
</ul>
</div>
</div>
<!--</div>-->
</div>
</div>
<!-- ……彈窗內容模板.Start -->
<div id="dialogs">
<div class="weui-mask" style="display: none;"></div>
<!--BEGIN 紅包-->
<div class="js_dialog" id="J_Dialog_hongbao" style="display: none;">
<!--<div></div>-->
<div class="weui-dialog">
<i class="weui-xclose"></i>
<div class="weui-dialog__bd">
<!-- //紅包模板區-->
<div class="ws__popup-template">
<div class="item flexbox">
<label class="txt">總金額</label><input class="ipt-txt flex1" type="tel" name="hbAmount" placeholder="0.00" /><em class="unit">元</em>
</div>
<div class="item flexbox">
<label class="txt">紅包個數</label><input class="ipt-txt flex1" type="tel" name="hbNum" placeholder="填寫個數" /><em class="unit">個</em>
</div>
<div class="tips">在線人數共<em class="memNum">186</em>人</div>
<div class="item item-area">
<textarea class="describe" name="content" placeholder="恭喜發財，大吉大利"></textarea>
</div>
<div class="amountTotal">￥<em class="num">0.00</em></div>
</div>
</div>
<div class="weui-dialog__ft">
<a href=";" class="weui-dialog__btn weui-dialog__btn_primary" style="background: #ff4400; border-radius: 4px; color: #fff;">塞錢進紅包</a>
</div>
</div>
</div>
<!--END 紅包-->
<!--BEGIN 霸屏-->
<div class="js_dialog" id="J_Dialog_baping" style="display: none;">
<!--<div></div>-->
<div class="weui-dialog">
<i class="weui-xclose"></i>
<div class="weui-dialog__bd">
<!-- //霸屏模板區-->
<div class="ws__popup-template">
<div class="item flexbox">
<input class="ipt-txt align-l flex1" type="text" name="bpTimeline" placeholder="選擇霸屏時長" readonly />
</div>
<div class="item item-upload flexbox">
<div class="ws__uploader-panel">
<input class="ws__uploader-input" id="J__uploaderIpt" type="file" accept="image/*" />
<div class="ws__uploader-tips">
<i></i>
<p>添加圖片</p>
</div>
</div>
</div>
<div class="item item-area">
<textarea class="describe" name="content" placeholder="添加文字"></textarea>
</div>
</div>
</div>
<div class="weui-dialog__ft">
<a href=";" class="weui-dialog__btn weui-dialog__btn_primary" style="background: #ff4400; border-radius: 4px; color: #fff;">我要霸屏</a>
</div>
</div>
</div>
<!--END 霸屏-->
<!--BEGIN 打賞-->
<div class="js_dialog" id="J_Dialog_dashang" style="display: none;">
<!--<div></div>-->
<div class="weui-dialog">
<i class="weui-xclose"></i>
<div class="weui-dialog__bd">
<!-- //打賞模板區-->
<div class="ws__popup-template">
<h2 class="hdTit">為喜歡的節目霸屏打賞</h2>
<div class="item flexbox">
<input class="ipt-txt align-l flex1" type="text" name="dschooseProgram" placeholder="選擇打賞節目" readonly />
</div>
<div class="item item-area">
<textarea class="describe" name="content" placeholder="輸入打賞語，30字以內（選填）"></textarea>
</div>
<div class="item item-gift" id="J__chooseGift">
<div class="gift flexbox selected" data-gift="001">
<label class="txt"><span>豪車</span><em class="time">霸屏50秒</em></label>
<span class="amount">￥<em>12</em> <i class="chkbox"></i></span>
</div>
<div class="gift flexbox" data-gift="002">
<label class="txt"><span>動人玫瑰</span><em class="time">霸屏20秒</em></label>
<span class="amount">￥<em>8</em> <i class="chkbox"></i></span>
</div>
</div>
</div>
</div>
<div class="weui-dialog__ft">
<a href=";" class="weui-dialog__btn weui-dialog__btn_primary" style="background: #ff4400; border-radius: 4px; color: #fff;">支付 <span>￥<em class="moneyNum">12</em></span> 打賞</a>
</div>
</div>
</div>
<!--END 打賞-->
</div>
<script type="text/javascript">
$(function(){
/* ---紅包事件.start */
//紅包彈窗
$(".J__chatHongbao").on("click", function(){
$("#J_Dialog_hongbao").show();
$("#dialogs .weui-mask").fadeIn(200);
});
//確定
$("#J_Dialog_hongbao").on("click", ".weui-dialog__btn_primary", function(){
alert("塞錢成功！");
$(".weui-xclose").trigger("click");
});
/* ---紅包事件.end */
/* ---霸屏事件.start */
//霸屏彈窗
$(".J__chatBaping").on("click", function(){
$("#J_Dialog_baping").show();
$("#dialogs .weui-mask").fadeIn(200);
});
//霸屏時長picker
$("input[name='bpTimeline']").on("click", function(){
var that = $(this);
weui.picker([{
label: '10s ￥8',
value: 8
},{
label: '20s ￥16',
value: 16
},{
label: '30s ￥24',
value: 24
},{
label: '40s ￥32',
value: 32
},{
label: '50s ￥40',
value: 40
},{
label: '60s ￥48',
value: 48
}], {
onChange: function(res){
console.log(res);
},
onConfirm: function(res){
console.log(res);
that.val("￥" + res);
}
}
);
});
//確定
$("#J_Dialog_baping").on("click", ".weui-dialog__btn_primary", function(){
alert("霸屏成功！");
$(".weui-xclose").trigger("click");
});
/* ---霸屏事件.end */
/* ---打賞事件.start */
//打賞彈窗
$(".J__chatDashang").on("click", function(){
$("#J_Dialog_dashang").show();
$("#dialogs .weui-mask").fadeIn(200);
});
//打賞節目picker
$("input[name='dschooseProgram']").on("click", function(){
var that = $(this);
weui.picker([{
label: '小品：送禮',
value: '小品：送禮'
},{
label: '歌曲：紅日',
value: '歌曲：紅日'
},{
label: '相聲：就服你',
value: '相聲：就服你'
},{
label: '歌曲：上海灘',
value: '歌曲：上海灘'
},{
label: '小品：回家過年',
value: '小品：回家過年'
},{
label: '相聲：逗你玩',
value: '相聲：逗你玩'
}], {
onChange: function(res){
console.log(res);
},
onConfirm: function(res){
console.log(res);
that.val(res);
}
}
);
});
//選擇禮物
$("#J__chooseGift .gift").on("click", function(){
$(this).addClass("selected").siblings().removeClass("selected");
$("#J_Dialog_dashang .moneyNum").text($(this).find(".amount em").text());
console.log($(this).attr("data-gift"));
});
//確定
$("#J_Dialog_dashang").on("click", ".weui-dialog__btn_primary", function(){
alert("打賞成功！");
$(".weui-xclose").trigger("click");
});
/* ---打賞事件.end */
//右上角xx關閉彈窗
$(".weui-xclose").on("click", function(){
$(this).parents(".js_dialog").hide();
$("#dialogs .weui-mask").fadeOut(200);
});
});
</script>
<!-- ……彈窗內容模板.End -->
<!-- ……視頻彈窗.Start -->
<div class="ws__popup-video">
<i class="popup__video-close"></i>
<video id="activityVideo" width="100%" height="100%" controls="controls" webkit-playsinline></video>
</div>
<!-- ……視頻彈窗.End -->
<!-- 左右滑屏(emotion表情) -->
<link rel="stylesheet" href="css/swiper-3.4.1.min.css" />
<script src="js/swiper-3.4.1.min.js"></script>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
observer: true,
observeParents: true,
pagination: '.swiper-pagination',
paginationClickable: true,
autoplayDisableOnInteraction: false
})
</script>
<!-- 左右滑屏.End -->
</body>
</html>CSS部分：
/* __ 聊天內容區 */
.ws__chatMsg-panel{overflow: auto; -webkit-overflow-scrolling:touch; width: 100%; /*position: absolute; top: .6rem;*/}
.ws__chatMsg-panel .chatMsg-ct{padding: .2rem;}
.chatMsg-ct ul li{float: left; margin-bottom: .3rem; width: 100%;}
.chatMsg-ct ul li.time{margin-top: .2rem; text-align: center;}
.chatMsg-ct ul li.time span{background: rgba(50,50,50,.2); color: #fff; border-radius: .05rem; display: inline-block; font-size: .24rem; font-family: arial; padding: .05rem .2rem;}
.chatMsg-ct ul li.me{clear: right; text-align: right;}
.chatMsg-ct ul li .avatar{
overflow: hidden; margin-top: .4rem; height: .8rem; width: .8rem;
}
.chatMsg-ct ul li .avatar img{border-radius: 50%; vertical-align: top; height: 100%; width: 100%;}
.chatMsg-ct ul li.others .avatar{float: left;}
.chatMsg-ct ul li.me .avatar{float: right;}
.chatMsg-ct ul li .content{overflow: hidden;}
.chatMsg-ct ul li .content .author{color: rgba(50,50,50,.5); font-size: .2rem; margin: 0 .3rem; height: .4rem; line-height: .4rem;}
.chatMsg-ct ul li .content .msg{
border-style: solid; border-width: .01rem; border-radius: .1rem; display: inline-block; font-size: .24rem; margin: 0 .3rem; text-align: left; word-wrap: break-word; word-break: break-all; min-height: .8rem; max-width: 4.9rem; position: relative;
}
.chatMsg-ct ul li .content .msg .plain{padding: .2rem;}
.chatMsg-ct ul li .content .msg .plain img.face{vertical-align: top;}
.chatMsg-ct ul li .content .msg .plain a{color: #09f;}
.chatMsg-ct ul li .content .msg .picture, .chatMsg-ct ul li .content .msg .video{border-radius: .1rem; overflow: hidden; position: relative;}
.chatMsg-ct ul li .content .msg .picture img, .chatMsg-ct ul li .content .msg .video img{display: block; max-height: 5rem; max-width: 5rem;}
.chatMsg-ct ul li.others .content .msg{background-color: #fff; border-color: #ddd;}
.chatMsg-ct ul li.me .content .msg{background-color: #90d936; border-color: #95bf63;}
.chatMsg-ct ul li .content .msg:before{
content: ""; display: inline-block; border-style: solid; border-width: .01rem .01rem 0 0; height: .2rem; width: .2rem; position: absolute; /*top: 50%;*/ top: .4rem;
}
.chatMsg-ct ul li.others .content .msg:before{
background: inherit; border-color: inherit; left: -.115rem; transform: translate(0, -50%) rotate(-135deg);
}
.chatMsg-ct ul li.me .content .msg:before{
background: inherit; border-color: inherit; right: -.11rem; transform: translate(0, -50%) rotate(45deg);
}
.chatMsg-ct ul li.image .content .msg{background: none; border-width: 0;}
.chatMsg-ct ul li.image .content .msg:before{display: none;}
.chatMsg-ct ul li .content .msg .video .play__video-wrap{position: relative;}
.chatMsg-ct ul li .content .msg .video .btn-play{background: url(../img/wei-scene/icon-play.png) no-repeat center; background-size: .6rem; height: 100%; width: 100%; position: absolute; left: 0; top: 0;}
/* __ 查看大圖/視頻 */
.img__zoomIn-mask{
display: none; background: rgba(0,0,0,.9); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;
}
.img__zoomIn-mask .imgview{transform: translate(-50%, -50%); max-height: 95%; max-width: 100%; position: absolute; left: 50%; top: 50%;}
.ws__popup-video{display: none; background: rgba(0,0,0,1); height: 100%; width: 100%; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 1001;}
.ws__popup-video .popup__video-close{border: .02rem solid rgba(255,252,255,.5); border-radius: 50%; height: .5rem; width: .5rem; position: absolute; top: .3rem; right: .3rem; z-index: 101;}
.ws__popup-video .popup__video-close:before, .ws__popup-video .popup__video-close:after{
content: ""; background: rgba(255,252,255,.5); border-radius: 20px; transform: translate(50%, -50%) rotate(45deg); position: absolute; top: 50%; right: 50%;
}
.ws__popup-video .popup__video-close:before{height: .3rem; width: .04rem;}
.ws__popup-video .popup__video-close:after{height: .04rem; width: .3rem;}相關教程
- PHP應用：php 使用html5實現多文件上傳實例
- PHP實戰：php+html5+ajax實現上傳圖片的方法
- PHP學習：php+html5實現無刷新圖片上傳教程
- PHP框架之ThinkPHP各模塊開發系列十一，快速引入HTML5上傳組件“WebUploader”
- PHP學習：php+html5使用FormData對象提交表單及上傳圖片的方法
- PHP學習：php獲取CSS文件中圖片地址并下載到本地的方法
- PHP實例：php生成html文件方法總結
- PHP實戰：ThinkPHP模版中導入CSS和JS文件的方法
- PHP編程：使用PHP把HTML生成PDF文件的幾個開源項目介紹
- PHP實戰：微信公眾號點擊菜單即可打開并登錄微站的實現方法
- PHP應用：PHP使用ob_start生成html頁面的方法
- 網頁版微信掃碼登錄的過程
- 如何查看只能在微信瀏覽器打開的鏈接網頁的源代碼
- 在手機瀏覽器中喚醒或打開微信APP
