這篇文章主要介紹了CSS3如何仿微信實現(xiàn)聊天小氣泡,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)長期為上1000家客戶提供的網(wǎng)站建設(shè)服務(wù),團隊從業(yè)經(jīng)驗10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為西豐企業(yè)提供專業(yè)的網(wǎng)站制作、成都做網(wǎng)站,西豐網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
首先給大家看看頁面的樣子吧,如下圖所示:
頁面大致就是這個樣子,接下來我們來一起學(xué)習(xí)制作步驟吧。
第一部分: HTML
<div class="leftd"> <span ng-class="leftd_h"> <img ng-src="./img/c_pic.pn" /> </span> <div class="speech left" ng-class="speech left"> 二貨,你看你傻樣! </div> </div> <div class="rightd"> <span ng-class="rightd_h"> <img ng-src="./img/u_pic.pn" /> </span> <div class="speech right" ng-class="speech left"> 嘻嘻嘻嘻。。。。。。 </div> </div> <div class="leftd"> <span ng-class="leftd_h"> <img ng-src="./img/c_pic.pn" /> </span> <div class="speech left" ng-class="speech left"> 笑什么笑,沒看到本寶寶今天變漂亮了嗎? </div> </div> <div class="rightd"> <span ng-class="rightd_h"> <img ng-src="./img/u_pic.pn" /> </span> <div class="speech right" ng-class="speech left"> 不不不,每天你都很漂亮的啦! </div> </div>
第二部分: CSS3
PS(這里也算是最重要的部分了我就把全部的代碼都展示出來吧?。?nbsp;
/* 微信氣泡 */ div.speech { float: left; margin: 10px 0; padding: 8px; table-layout: fixed; word-break: break-all; position: relative; background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #ececec), color-stop(0.5, #dbdbdb), color-stop(0.9, #dcdcdc), to(#8c8c8c) ); border: 1px solid #989898; border-radius: 8px; } div.speech:before { content: ''; position: absolute; width: 0; height: 0; left: 15px; top: -20px; border: 10px solid; border-color: transparent transparent #989898 transparent; } div.speech:after { content: ''; position: absolute; width: 0; height: 0; left: 17px; top: -16px; border: 8px solid; border-color: transparent transparent #ffffff transparent; } div.speech.right { display: inline-block; box-shadow: -2px 2px 5px #CCC; margin-right: 10px; max-width: 75%; float: right; background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#e4ffa7), color-stop(0.1, #bced50), color-stop(0.4, #aed943), color-stop(0.8, #a7d143), to(#99BF40) ); } div.speech.right:before { content: ''; position: absolute; width: 0; height: 0; top: 9px; bottom: auto; left: auto; right: -10px; border-width: 9px 0 9px 10px; border-color: transparent #989898; } div.speech.right:after { content: ''; position: absolute; width: 0; height: 0; top: 10px; bottom: auto; left: auto; right: -8px; border-width: 8px 0 8px 9px; border-color: transparent #bced50; } div .left { display: inline-block; box-shadow: 2px 2px 2px #CCCCCC; margin-left: 10px; max-width: 75%; position: relative; background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #eae8e8), color-stop(0.4, #E3E3E3), color-stop(0.8, #DFDFDF), to(#D9D9D9) ); } div .left:before { content: ''; position: absolute; width: 0; height: 0; top: 9px; bottom: auto; left: -10px; border-width: 9px 10px 9px 0; border-color: transparent #989898; } div .left:after { content: ''; position: absolute; width: 0; height: 0; top: 10px; bottom: auto; left: -8px; border-width: 8px 9px 8px 0; border-color: transparent #eae8e8; } .leftimg { float: left; margin-top: 10px; } .rightimg { float: right; margin-top: 10px; } .leftd { clear: both; float: left; margin-left: 10px; } .rightd { clear: both; float: right; margin-right: 10px; } .leftd_h{ width: 39px; height: 39px; border-radius: 100%; display: block; float: left; overflow: hidden; } .leftd_h img{ display: block; width: 100%; height: auto; } .rightd_h{ width: 39px; height: 39px; border-radius: 100%; display: block; float: right; overflow: hidden; } .rightd_h img{ display: block; width: 100%; height: auto; }
這里基本是上用了CSS偽類元素,來制作的小氣泡。網(wǎng)上有很多的案例都是吧用戶聊天的頭像作為背景圖,但是我感覺這樣子在實際項目中,并不是很合適,所以我就做了一些修改,然我們更加實用。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“CSS3如何仿微信實現(xiàn)聊天小氣泡”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
名稱欄目:CSS3如何仿微信實現(xiàn)聊天小氣泡
標(biāo)題鏈接:http://muchs.cn/article34/pipjpe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、App設(shè)計、網(wǎng)站改版、ChatGPT、標(biāo)簽優(yōu)化、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)