怎么使用div+CSS制作類似微信對(duì)話氣泡效果

這篇文章主要介紹怎么使用div+CSS制作類似微信對(duì)話氣泡效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比岳塘網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式岳塘網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋岳塘地區(qū)。費(fèi)用合理售后完善，10余年實(shí)體公司更值得信賴。

在聊天的場(chǎng)景中，聊天內(nèi)容需要用到氣泡修飾，如下圖。下面一一講解。
怎么使用div+CSS制作類似微信對(duì)話氣泡效果

一、圖片式：

第一個(gè)樣式是京東客服，氣泡的圓角和鉤子都是用了圖片。使用了一個(gè)table組合成了一個(gè)圓角的框框。lm樣式拼出了鉤子。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <div class="jimi_lists clearfix">  

  2.                 <div class="header_img jimi3 fl"></div>  

  3.                 <table class="msg" cellspacing="0" cellpadding="0">  

  4.                     <tbody><tr><td class="lt"></td><td class="tt"></td><td class="rt"></td></tr>  

  5.                     <tr><td class="lm"><span></span></td><td class="mm"><span class="wel"><span class="visitor"><p>很抱歉，現(xiàn)在人工客服忙，讓小JIMI為您解答吧。</p></span></span></td><td class="rm"></td></tr>  

  6.                     <tr><td class="lb"></td><td class="bm"></td><td class="rb"></td></tr><tr><td></td></tr>  

  7.                     </tbody>  

  8.                 </table>  

  9.             </div>  

  10.             <div class="customer_lists clearfix">  

  11.                 <div class="header_img jimi3" style="background: url(img/mine.jpg) no-repeat center;">  

  12.                     <div class="header_img_hover"></div>  

  13.                 </div>  

  14.                 <table class="msg" cellspacing="0" cellpadding="0"><tbody><tr><td class="lt"></td><td class="tt"></td><td class="rt"></td></tr><tr><td class="lm"></td><td class="mm">你好，我是stoneniqiu</td><td class="rm"><span></span></td></tr><tr><td class="lb"></td><td class="bm"></td><td class="rb"></td></tr><tr><td></td><td class="time"></td><td></td></tr></tbody></table>  

  15.             </div>  

樣式：

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .jimi_lists {   

  2.     margin: 0 -10px 20px 10px;   

  3.     position: relative;   

  4. }   

  5.  .jimi_lists .header_img.jimi3 {   

  6.     background: url(../img/jimi_50_3.png) no-repeat 0 0;   

  7. }   

  8.  .jimi_lists .header_img {   

  9.     width: 50px;   

  10.     height: 50px;   

  11.     position: absolute;   

  12.     top: 0;   

  13.     left: 0;   

  14. }   

  15. .fl {   

  16.     float: left;   

  17. }   

  18.  .jimi_lists .msg {   

  19.     margin-left: 59px;   

  20.     margin-right: 40px;   

  21.     margin-top: 2px;   

  22.     float: left;   

  23.     display: inline;   

  24. }   

  25.  .jimi_lists .lt {   

  26.     background: url(../img/msg_bg_lr.png) no-repeat 0 0;   

  27.     width: 26px;   

  28.     height: 10px;   

  29. }   

  30.  .jimi_lists .tt {   

  31.     background: url(../img/msg_bg_tb.png) repeat-x 0 -23px;   

  32.     height: 10px;   

  33. }   

  34. .jimi_lists .rt {   

  35.     background: url(../img/msg_bg_lr.png) no-repeat -35px 0;   

  36.     width: 10px;   

  37.     height: 10px;   

  38. }   

  39. .jimi_lists .lm {   

  40.     background: url(../img/msg_bg_lr.png) repeat-y -94px 0;   

  41.     width: 26px;   

  42.     vertical-align: top;   

  43.     position: relative;   

  44. }   

  45. .jimi_lists .mm {   

  46.     padding: 0 5px;   

  47.     background-color: #FFF;   

  48.     word-break: break-all;   

  49.     word-wrap: break-word;   

  50.     color: #333;   

  51.     line-height: 20px;   

  52. }   

  53. .jimi_lists .lm span {   

  54.     background: url(../img/msg_bg_lr.png) no-repeat 0 -14px;   

  55.     display: inline-block;   

  56.     width: 26px;   

  57.     height: 16px;   

  58.     position: absolute;   

  59.     top: 5px;   

  60. }   

  61. .jimi_lists .rm {   

  62.     background: url(../img/msg_bg_lr.png) repeat-y -113px 0;   

  63.     width: 10px;   

  64. }   

  65. .jimi_lists .lb {   

  66.     background: url(../img/msg_bg_lr.png) no-repeat 0 -43px;   

  67.     width: 10px;   

  68.     height: 10px;   

  69. }   

  70. .jimi_lists .bm {   

  71.     background: url(../img/msg_bg_tb.png) repeat-x 0 -25px;   

  72.     height: 10px;   

  73. }   

  74. .jimi_lists .rb {   

  75.     background: url(../img/msg_bg_lr.png) no-repeat -35px -43px;   

  76.     width: 10px;   

  77.     height: 10px;   

  78. }   

  79.   

  80. .customer_lists {   

  81.     position: relative;   

  82.     margin: 0 12px 20px 20px;   

  83. }   

  84. .customer_lists .msg {   

  85.     float: rightright;   

  86.     margin-right: 73px;   

  87.     _margin-rightright: 38px;   

  88.     margin-top: 2px;   

  89. }   

  90. .customer_lists .lt {   

  91.     background: url(../img/msg_bg_lr.png) no-repeat -47px -0;   

  92.     width: 10px;   

  93.     height: 10px;   

  94. }   

  95. .customer_lists .tt {   

  96.     background: url(../img/msg_bg_tb.png) repeat-x 0 0;   

  97.     height: 10px;   

  98. }   

  99. .customer_lists .rt {   

  100.     background: url(../img/msg_bg_lr.png) no-repeat -63px 0;   

  101.     width: 26px;   

  102.     height: 10px;   

  103. }   

  104. .customer_lists .lm {   

  105.     background: url(../img/msg_bg_lr.png) repeat-y -126px 0;   

  106.     width: 10px;   

  107. }   

  108. .customer_lists .mm {   

  109.     padding: 1px 8px;   

  110.     background-color: #3897E7;   

  111.     word-break: break-all;   

  112.     word-wrap: break-word;   

  113.     color: #FFF;   

  114. }   

  115. .customer_lists .rm {   

  116.     background: url(../img/msg_bg_lr.png) repeat-y -129px 0;   

  117.     width: 26px;   

  118.     vertical-align: top;   

  119.     position: relative;   

  120. }   

  121. .customer_lists .lb {   

  122.     background: url(../img/msg_bg_lr.png) no-repeat -47px -36px;   

  123.     width: 10px;   

  124.     height: 10px;   

  125. }   

  126. .customer_lists .bm {   

  127.     background: url(../img/msg_bg_tb.png) repeat-x -106px -4px;   

  128.     height: 10px;   

  129. }   

  130. .customer_lists .rb {   

  131.     background: url(../img/msg_bg_lr.png) no-repeat -63px -36px;   

  132.     width: 26px;   

  133.     height: 10px;   

  134. }   

  135.   

  136. .customer_lists .rm span {   

  137.     background: url(../img/msg_bg_lr.png) no-repeat -63px -14px;   

  138.     display: inline-block;   

  139.     width: 26px;   

  140.     height: 16px;   

  141.     position: absolute;   

  142.     top: 5px;   

  143. }   

  144.   

  145. .customer_lists .header_img_hover {   

  146.     position: absolute;   

  147.     background: url(../img/avatar_mask_01.png);   

  148.     top: 0;   

  149.     width: 50px;   

  150.     height: 50px;   

  151. }   

  152. .customer_lists .header_img {   

  153.     position: absolute;   

  154.     top: 0;   

  155.     rightright: 14px;   

  156.     width: 50px;   

  157.     height: 50px;   

  158. }   

  159.  .clearfix:after {   

  160.     content: " .";   

  161.     display: block;   

  162.     clear: both;   

  163.     visibility: hidden;   

  164.     height: 0;   

  165. }  

二、背景式：

第二種主要是使用了：before偽類畫出了三角形，然后用定位拼在了一起。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <div class="jimi_lists clearfix">  

  2.                 <div class="header_img jimi3 fl"></div>  

  3.                 <div class="bkbubble right">  

  4.                      <p>換個(gè)氣泡如何</p>  

  5.                 </div>  

  6.             </div>  

  7.             <div class="customer_lists clearfix">  

  8.                 <div class="header_img jimi3" style="background: url(img/mine.jpg) no-repeat center;">  

  9.                     <div class="header_img_hover"></div>  

  10.                 </div>  

  11.                 <div class="bkbubble left">  

  12.                     <p>這個(gè)不錯(cuò)</p>  

  13.                 </div>  

  14.             </div>  

（至于畫三角形的方法稍后文章最后會(huì)總結(jié)一下）
樣式：           

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .bkbubble.rightright p:before, .bkbubble.left p:before {   

  2.       width: 0;   

  3.     position: absolute;   

  4.     top: 12px;   

  5.     border-style: solid;   

  6.     content: "";   

  7.   }   

  8.   .bkbubble.left {   

  9.       text-align: rightright;   

  10.   }   

  11.  .bkbubble.rightright p:before {   

  12.      left: -12px;   

  13.     border-color: transparent #00bfff;   

  14.     border-width: 0 12px 12px 0;   

  15.  }   

  16.  .bkbubble.left p:before {   

  17.      rightright: -12px;   

  18.     border-color: transparent #00bfff;   

  19.     border-width: 0 0 12px 12px ;   

  20.  }             

          
三、邊框式：

如果要求邊框顏色和背景顏色不一樣呢？上面的方法就不行了，因?yàn)橛?before畫三角形是利用border的原理，也就是說(shuō)，在上面這種方式下，氣泡邊上的小三形是無(wú)法呈現(xiàn)兩種顏色的，因?yàn)樗挥幸粋€(gè)border的顏色。那就要想辦法湊出一個(gè)有邊框的三角形了。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <div class="jimi_lists lim_operator clearfix">  

  2.                 <div class="header_img jimi3 fl"></div>  

  3.                 <div class="lim_bubble lim_shadow"><p class="lim_dot">您好，請(qǐng)問(wèn)有什么可以幫到您？</p></div>  

  4.                 <div class="lim_tale"><div class="radiusborder"></div></div>  

  5.             </div>  

1.先畫一個(gè)小矩形。

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .lim_operator .lim_tale {   

  2.     left: -1px;   

  3.     background-color: #c8f064;   

  4.     border-color: #a5d01b;   

  5.     margin-left: 70px;   

  6. }   

  7. .lim_tale {   

  8.     position: absolute;   

  9.     width: 12px;   

  10.     height: 8px;   

  11.     overflow: hidden !important;   

  12.     top: 10px;   

  13.     z-index: 2;   

  14.     border-top-style: solid;   

  15.     border-top-width: 1px;   

  16. }  

怎么使用div+CSS制作類似微信對(duì)話氣泡效果

2.畫出斜線。

css里面是沒(méi)有斜線的，這里是用了一個(gè)園的弧形拼出來(lái)的。在一個(gè)大圓上，截取一段弧，就是一條斜線了。

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .lim_operator .radiusborder {   

  2.     position: absolute;   

  3.     background-color: #EFF0F2;   

  4.     top: -29px;   

  5.     left: -94px;   

  6.     height: 160px;   

  7.     width: 160px;   

  8.     border-top-style: solid;   

  9.     border-top-width: 1px;   

  10.     border-right-style: solid;   

  11.     border-right-width: 1px;   

  12.     border-top-rightright-radius: 154px;   

  13.     border-color: #a5d01b;   

  14. }  

四、疊加式：

原理就是相當(dāng)于用before先畫出一個(gè)有色背景，再用after畫出一個(gè)白色背景，然后疊加錯(cuò)開頂部1-2px，這樣就出現(xiàn)了一個(gè)有邊框有背景的三角形。web 微信就是這種做法

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .expression:before {   

  2.     content: '';   

  3.     position: absolute;   

  4.     left: 16px;   

  5.     top: 100%;   

  6.     margin-left: -7px;   

  7.     border: 7px solid transparent;   

  8.     border-top-color: #CFCFCF  

  9. }   

  10.   

  11. .expression:after {   

  12.     content: '';   

  13.     position: absolute;   

  14.     left: 16px;   

  15.     top: 100%;   

  16.     margin-left: -7px;   

  17.     margin-top: -1px;   

  18.     border: 7px solid transparent;   

  19.     border-top-color: #FFF  

  20. }  

PS：三角形的簡(jiǎn)單繪制：
1.CSS 邊框
怎么使用div+CSS制作類似微信對(duì)話氣泡效果

這也是一個(gè)常用的使用方式，如tooltips信息提示框和下拉菜單。以上的示例，這是一個(gè)我最喜歡的方法創(chuàng)建小而且有用的三角形。

優(yōu)點(diǎn)：

很容易的通過(guò)修改一些CSS代碼屬性值而更改顏色和大小
這是一個(gè)跨瀏覽器的解決方案。
缺點(diǎn)：

這個(gè)方式使用的是border,所以你不能添加陰影、漸變、和其他一些CSS3效果
請(qǐng)記住，IE6是不支持透明邊界的-如果你關(guān)心這個(gè)問(wèn)題
2.HTML 字符
怎么使用div+CSS制作類似微信對(duì)話氣泡效果

它是基于使用可用的Unicode字符列表的字符。

優(yōu)點(diǎn)

它是一個(gè)跨瀏覽器的技術(shù)
您可以使用CSS3的text-shadow屬性添加陰影。
缺點(diǎn)

不能使用太多的CSS3效果，除了使用文字陰影。
在所有的瀏覽器，這是相當(dāng)不可能實(shí)現(xiàn)像素完美。
3.CSS 旋轉(zhuǎn)正方形
怎么使用div+CSS制作類似微信對(duì)話氣泡效果

理論上,這種方式，你需要使用兩個(gè)內(nèi)容塊，但是，并沒(méi)有限制是使用兩個(gè)元素，所以可以使用一個(gè)元素加一個(gè)偽元素。

創(chuàng)建一個(gè)內(nèi)容里。例如100&times;100像素 &ndash; 這將包含旋轉(zhuǎn)塊。
旋轉(zhuǎn)包含的這個(gè)塊45度，從而獲得一個(gè)菱形
將菱形的塊向頂部便宜，然后設(shè)置溢出，設(shè)置父層容器截?cái)?br/>There you go!
優(yōu)點(diǎn)：

CSS3陰影，漸變等可以更多的使用
缺點(diǎn)：

這個(gè)解決方案不是跨瀏覽器的,首先是因?yàn)镃SS3旋轉(zhuǎn)。        

以上是“怎么使用div+CSS制作類似微信對(duì)話氣泡效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：怎么使用div+CSS制作類似微信對(duì)話氣泡效果
當(dāng)前網(wǎng)址：http://bm7419.com/article42/jdsdhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、Google、網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站內(nèi)鏈、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁(yè)設(shè)計(jì)公司