這篇文章主要介紹了CSS3實(shí)現(xiàn)聊天氣泡效果的方法是什么，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

10年積累的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有興慶免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

前一陣子敢玩的 Mobile 頁(yè)改版完成了，就之前的頁(yè)面風(fēng)格更加扁平化，從暗色系為主背景轉(zhuǎn)到亮色背景，去掉更多的陰影，給用戶簡(jiǎn)約的體驗(yàn)風(fēng)格，哈哈我不是設(shè)計(jì)師不過多評(píng)價(jià)啦。感興趣的朋友可以直接去 idarex移動(dòng)端主頁(yè)。

這次改版的所有 style 都是 orange 寫的，感觸頗多，分期分享給大家

下面說正題，說好的聊天氣泡呢？

傳統(tǒng)的聊天氣泡

什么又是傳統(tǒng)的聊天氣泡,直接上圖

代碼如下

<p class="comment"></p>

<style type="text/css">
  .comment {
   width: 150px;
    height: 35px;
    position: relative;
    margin: 30px auto 0;
    background: #f8ac09;
    border-radius: 5px;
  }

  .comment:after {
    content: '';
   width: 0;
    height: 0;
    position: absolute;
    top: 5px;
    right: -16px;
    border: solid 8px;
    border-color: transparent transparent transparent #f8ac09;
    font-size: 0;
  }
</style>

實(shí)現(xiàn)方式大家早有耳聞，圓角矩形和三角形嘛，三角形原理就是 border 可以設(shè)置為透明，可以復(fù)制上例中的代碼修改 border-color 屬性摸索三角形的實(shí)現(xiàn)。

注：IE8 更早版本對(duì) border 的 transparent 支持不是很好。大家可以無視低版本缺陷，因?yàn)榇蟛糠譃g覽器都顯示正常，非要兼容的話把 transparent 屬性設(shè)置為主背景色而不是氣泡背景色（前提是背景為純色）。

想必大家都知道，這里不贅述，聊一聊其他實(shí)現(xiàn)方法。

這里的三角形部分可以使用正方形代替，實(shí)現(xiàn)同樣效果，方法就是旋轉(zhuǎn)小正方形使其一部分露在外面。代碼如下

.comment {
  position: relative;
 width: 150px;
  height: 35px;
  background: #f8ac09;
  border-radius: 5px;
  margin: 30px auto 0;
}

.comment:after {
  content: '';
  position:absolute;
  top: 10px;
  right: -4px;
 width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background-color: #f8ac09;
}

缺點(diǎn)是小三角只能是直角三角形，當(dāng)然也可以通過變換得到菱形再進(jìn)行拼接，變換多了感覺沒有第一種方式直接，瀏覽器兼容 transform(2D) 屬性如下

總體還不錯(cuò)，幾種方法都能放心使用，不存在大的兼容問題。

現(xiàn)實(shí)案例

這里的設(shè)計(jì)稿多了一個(gè)邊框，直接上設(shè)計(jì)稿

？想一想怎么處理，我們回顧上文

第一種方式本身就是 border 透明，怎么再給它設(shè)置 border 是個(gè)問題，暫且先不考慮。

第二種方式如果使用小正方形旋轉(zhuǎn)，層級(jí)疊加是個(gè)問題，因?yàn)樵O(shè)計(jì)稿中的氣泡背景為 rgba(247, 188, 10, 0.03) 先看下實(shí)現(xiàn)代碼

.comment {
 width: 150px;
  height: 35px;
  position:relative;
  margin: 30px auto 0;
  background-color: rgba(247, 188, 10, 0.03);
  border: 1px solid rgba(252, 185, 8, 0.35);
  border-radius: 5px;
}

.comment:after {
  content: '';
 width: 8px;
  height: 8px;
  position: absolute;
  top: 10px;
  right: -4px;
  transform: rotate(45deg);
  background-color: rgba(247, 188, 10, 0.03);
  border: 1px solid rgba(252, 185, 8, 0.35);
}

效果如下

上面的思路有問題，因?yàn)樾≌叫闻c氣泡的一部分會(huì)重合，半透明背景的部分總會(huì)出現(xiàn)問題，有人說了偷個(gè)懶總可以吧，把透明后的背景色吸取出來然后再進(jìn)行疊加（因?yàn)榇蠹易⒁獾皆O(shè)計(jì)稿的整體背景是純色）

按著這個(gè)思路去實(shí)現(xiàn)，那么問題又來了。具體兩個(gè)問題如下。

1.如果小正方形疊加在上，那么小正方形左半部分的邊框就會(huì)顯示

.comment {
 width: 150px;
  height: 35px;
  position: relative;
  margin: 30px auto 0;
  background-color: #faf8f3;
  border: 1px solid #fbe2a0;
  border-radius: 5px;
}

.comment:after {
  content: '';
 width: 8px;
  height: 8px;
  position:absolute;
  top: 10px;
  right: -4px;
  transform: rotate(45deg);
  background-color: #faf8f3;
  border: 1px solid #fbe2a0;
}

效果如下，比較之前的圖片圓角矩形的右邊確實(shí)遮住了，但小正方形左邊的邊框顯示出來了

處理方式呢，可以這樣。

.comment:after {
  content: '';
 width: 8px;
  height: 8px;
  position: absolute;
  top: 10px;
  right: -5px;
  transform: rotate(45deg);
  background-color: #faf8f3;
  border: 1px #fbe2a0;
  border-style: solid solid none none;
}

我們發(fā)現(xiàn)問題解決了。效果如下

設(shè)計(jì)稿是有 padding 的，親測(cè)本案例中可行，但是本著認(rèn)真的原則 padding-right 如果過小，會(huì)出現(xiàn)什么問題呢？

我們向 p 中加文字。

<p class="comment">Hello,orange.Welcome to FrontEnd World!</p>

效果如下

我們發(fā)現(xiàn)字母 o 的右下角被小正方形左側(cè)覆蓋了，當(dāng)然可以通過 z-index 屬性 hack。

2.如果小正方形在圓角矩形下，那么圓角矩形的右邊框就會(huì)完整顯示，大家自行腦補(bǔ)，此方案不合理，不過多解釋。

以上的方法缺點(diǎn)也都很明顯，那怎么做才能更嚴(yán)謹(jǐn)，能根據(jù)需求的變化不大傷筋骨呢？

我們還用三角形的方案！ what? 不是說三角形的方案不可行了嘛 ？

一個(gè)三角形是不可行那兩個(gè)呢，我們有請(qǐng) after 的兄弟 before 出場(chǎng)。項(xiàng)目的真實(shí)代碼如下

.reply {
  position: relative;
  margin: 0.672rem 0 0.096rem 0;
  padding: 0.408rem 0.816rem;

  border: 1px solid rgba(#fcb908, 0.35);
  border-radius: 0.2rem;
  background-color: rgba(#f7bc0a, 0.03);

  &:after {
    content: '';
   width: 0px;
    height: 0px;
    border-color:  transparent transparent #faf8f3 transparent ;
    border-style: solid;
    border-width: 6px;
    position: absolute;
    top: -11px;
    border-radius: 3px;
    left: 18px;
    right: auto;
  }

  &:before {
    content: '';
   width: 0px;
    height: 0px;
    border-color: transparent transparent rgba(#fcb908, 0.35) transparent;
    border-style: solid;
    border-width: 7px;
    position: absolute;
    top: -14px;
    border-radius: 3px;
    left: 17px;
    right: auto;
  }
}

注：這段代碼用的是 SASS 進(jìn)行預(yù)編譯，如果從頭仔細(xì)看到這里的話不難理解，兩個(gè)三角形疊加，大三角形顏色是邊框的顏色，小三角形是內(nèi)部背景色，小三角形絕對(duì)定位時(shí)向下移 3px 把圓角矩形的一部分上邊框遮擋，這樣小三角下部也有溢出，具體在兩像素之內(nèi)，實(shí)際上不存在遮擋文本問題。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享CSS3實(shí)現(xiàn)聊天氣泡效果的方法是什么內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞標(biāo)題：CSS3實(shí)現(xiàn)聊天氣泡效果的方法是什么-創(chuàng)新互聯(lián)
文章出自：http://chinadenli.net/article34/eoppe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、App開發(fā)、企業(yè)網(wǎng)站制作、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站排名、面包屑導(dǎo)航

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)