中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何利用CSS3實現氣泡效果

發布時間:2021-08-03 18:38:09 來源:億速云 閱讀:166 作者:chen 欄目:web開發

這篇文章主要講解了“如何利用CSS3實現氣泡效果”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“如何利用CSS3實現氣泡效果”吧!

首先定義一個

CSS Code復制內容到剪貼板

  1. <p class="speech"></p>  

先給外層的容器添加樣式:

CSS Code復制內容到剪貼板

  1. p.speech{   

  2. positionrelative;   

  3. width200px;   

  4. height100px;   

  5. text-aligncenter;   

  6. line-height100px;   

  7. background-color#fff;   

  8. border8px solid #666;   

  9. -webkit-border-radius: 30px;   

  10. -moz-border-radius: 30px;   

  11. border-radius: 30px;   

  12. -webkit-box-shadow: 2px 2px 4px #888;   

  13. -moz-box-shadow: 2px 2px 4px #888;   

  14. box-shadow: 2px 2px 4px #888;   

  15. }  

沒有什么特別復雜的,主要的核心就在postion:relative,用來定位對話浮層的。我們還需要一些Mozilla和webkit的屬性來完成圓角和陰影,IE8以下的瀏覽器看不到這些屬性,只是顯示一個框,不影響總體的效果。
如何利用CSS3實現氣泡效果

我們現在需要創建對話浮層下面的那個三角形的指向標志了。不使用圖片,我們使用CSS邊框來完成這個效果。看看下面這個用不同顏色邊框完成的效果。
如何利用CSS3實現氣泡效果

我們把高度和寬度減少到0px,然后給邊框使用不同的大小,看看效果:
如何利用CSS3實現氣泡效果

為了最后能做成指示標志的樣子,我們把上邊距和左邊距設置為solid,下邊距和右邊距設置為透明:
如何利用CSS3實現氣泡效果

但是我們把這個放哪呢?還好,我們可以使用CSS的偽類:before和:after來生成,所以:

CSS Code復制內容到剪貼板

  1. p.speech:before{   

  2. content' ';   

  3. positionabsolute;   

  4. width: 0;   

  5. height: 0;   

  6. left30px;   

  7. top100px;   

  8. border25px solid;   

  9. border-color#666 transparent transparent #666;   

  10. }  

現在三角形的標識就定位在我們的氣泡下面了。另外,不要費事去考慮這個元素的陰影,他會定位在透明邊界的旁邊,而不是看到的圖形的旁邊。
如何利用CSS3實現氣泡效果

我們還需要移除三角形的一部分。我們可以在里面放置一個白色的小三角形來達到這個效果。

CSS Code復制內容到剪貼板

  1. p.speech:after{   

  2. content' ';   

  3. positionabsolute;   

  4. width: 0;   

  5. height: 0;   

  6. left38px;   

  7. top100px;   

  8. border15px solid;   

  9. border-color#fff transparent transparent #fff;   

  10. }  

我們的不使用圖片的對話氣泡就完成了:
如何利用CSS3實現氣泡效果

另外,我們還可以使用:before和:after偽類來做很多其他的事情,比如,一個思考氣泡也可以通過這樣辦法完成:

首先也是建一個

CSS Code復制內容到剪貼板

  1. <p class="thought">I think...</p>  

css代碼:

CSS Code復制內容到剪貼板

  1. p.thought{   

  2. positionrelative;   

  3. width130px;   

  4. height100px;   

  5. text-aligncenter;   

  6. line-height100px;   

  7. background-color#fff;   

  8. border8px solid #666;   

  9. -webkit-border-radius: 58px;   

  10. -moz-border-radius: 58px;   

  11. border-radius: 58px;   

  12. -webkit-box-shadow: 2px 2px 4px #888;   

  13. -moz-box-shadow: 2px 2px 4px #888;   

  14. box-shadow: 2px 2px 4px #888;   

  15. }  

CSS Code復制內容到剪貼板

  1. p.thought:before, p.thought:after{   

  2. content'';   

  3. positionabsolute;   

  4. left10px;   

  5. top70px;   

  6. width40px;   

  7. height40px;   

  8. background-color#fff;   

  9. border8px solid #666;   

  10. -webkit-border-radius: 28px;   

  11. -moz-border-radius: 28px;   

  12. border-radius: 28px;   

  13. z-index:5;   

  14. }  

CSS Code復制內容到剪貼板

  1. p.thought:after{   

  2. positionabsolute;   

  3. width20px;   

  4. height20px;   

  5. left5px;   

  6. top100px;   

  7. -webkit-border-radius: 18px;   

  8. -moz-border-radius: 18px;   

  9. border-radius: 18px;   

  10. z-index:6;   

  11. }  

最新實現效果:
如何利用CSS3實現氣泡效果

感謝各位的閱讀,以上就是“如何利用CSS3實現氣泡效果”的內容了,經過本文的學習后,相信大家對如何利用CSS3實現氣泡效果這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

京山县| 昌宁县| 彭州市| 宁武县| 新郑市| 全南县| 昆山市| 温宿县| 汤阴县| 呼和浩特市| 应城市| 佛学| 荆州市| 沿河| 抚远县| 武鸣县| 辛集市| 通城县| 泸州市| 车致| 正定县| 北京市| 扎鲁特旗| 仪征市| 溧水县| 昌乐县| 白水县| 胶南市| 桦川县| 驻马店市| 宜兴市| 奉节县| 延边| 南郑县| 大冶市| 沐川县| 茌平县| 花垣县| 射阳县| 本溪| 乡城县|