html实现气泡飘动效果,CSS3实现气泡效果

以前我们要实现对话气泡效果很麻烦，基本上是用切图的方法。现在有了CSS3就变得简单多了。一个HTML元素，一些CSS3代码，不需要图片，也不需要JavaScript。

如下图：

主要使用了：before和：after伪类，直接上代码：

#demo{

position: relative;

width: 200px;

height: 100px;

background-color: #fff;

border: 8px solid #666;

-webkit-border-radius: 30px;

-moz-border-radius: 30px;

border-radius: 30px;

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

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

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

}

#demo:before{

content: ' ';

position: absolute;

width: 0;

height: 0;

left: 30px;

top: 100px;

border: 25px solid;

border-color: #666 transparent transparent #666;

}

#demo:after{

content: ' ';

position: absolute;

width: 0;

height: 0;

left: 38px;

top: 100px;

border: 15px solid;

border-color: #fff transparent transparent #fff;

}