如何用纯CSS实现语音聊天气泡框效果

互联网 18-11-24

本篇文章主要给大家介绍怎么用纯css实现语音聊天气泡框效果。

推荐参考教程：《CSS教程》

语音聊天气泡框效果，在我们日常生活中或者社交网站上，都是非常常见且流行的一种对话框效果。

比如微信、QQ的聊天对话框界面。

那么对于小白们来说，可能感觉这种效果的实现会比较困难。其实有多种方法实现这种语音气泡效果，但我们可以使用最简单的css方法来实现。

下面我们就给大家介绍用纯css实现语音气泡效果的简单方法。

css代码示例如下：

<!DOCTYPE> <html> <meta charset="utf-8"> <head>     <title>css实现语音气泡示例</title>     <style type="text/css">         #speech-bubble {             width: 120px;             height: 80px;             background: #5ac4ed;             position: absolute;             left:100px;             -moz-border-radius: 10px;             -webkit-border-radius: 10px;             border-radius: 10px;         }         #speech-bubble:before {             content:"";             position: absolute;             width: 0;             height: 0;             border-top: 13px solid transparent;             border-right: 26px solid #5ac4ed;             border-bottom: 13px solid transparent;             margin: 13px 0 0 -25px;         }      </style> </head> <body> <div id="speech-bubble"></div> </body> </html>

效果如下图：