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


本文摘自PHP中文网,作者藏色散人,侵删。

纯CSS实现语音聊天气泡框效果的方法:首先创建一个HTML示例文件;然后在body中创建一个div;最后通过给div设置“-moz-border-radius”等css属性来实现语音聊天气泡框效果即可。

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

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

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

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

e66.jpg

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

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

css代码示例如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<!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>

效果如下图:

阅读剩余部分

相关阅读 >>

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

更多相关阅读请进入《纯CSS实现语音气泡框效果》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    暂无评论...