CSS3实现对话气泡效果

以前我们要实现对话气泡效果很麻烦，从有了CSS3以后就变得简单多了，我们就来看下CSS3如何实现对话气泡效果。CSS3开始改变我们的生活了。现在要创建一个在个浏览器下面都看起来不错的对话浮层就简单了很多，一个HTML元素，一些CSS3代码，不需要图片，也不需要 Javascript。

一点一点开始吧，先来看看HTML结构，只需要一个元素就可以了。我们使用p标签。

1	`<p` `class="speech">SitePoint Rocks!</p>`

先给外层的容器添加样式：

p.speech

{

position: relative;

width: 200px;

height: 100px;

text-align: center;

line-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;

}

没有什么特别复杂的，主要的核心就在postion:relative，用来定位对话浮层的。我们还需要一些Mozilla和webkit的属性来完成圆角和阴影，IE8以下的浏览器看不到这些属性，只是显示一个框，不影响总体的效果。

我们现在需要创建对话浮层下面的那个三角形的指向标志了。不使用图片，我们使用CSS边框来完成这个效果。看看下面这个用不同颜色边框完成的效果。

我们把高度和宽度减少到0px，然后给边框使用不同的大小，看看效果：

为了最后能做成指示标志的样子，我们把上边距和左边距设置为solid，下边距和右边距设置为透明：

但是我们把这个放哪呢？还好，我们可以使用CSS的伪类:before和:after来生成，所以：

p.speech:before
{content: ' ';position: absolute;width: 0;height: 0;left: 30px;top: 100px;border: 25px solid;border-color: #666 transparent transparent #666;
}

现在三角形的标识就定位在我们的气泡下面了。另外，不要费事去考虑这个元素的阴影，他会定位在透明边界的旁边，而不是看到的图形的旁边。

我们还需要移除三角形的一部分。我们可以在里面放置一个白色的小三角形来达到这个效果。

p.speech:after
{content: ' ';position: absolute;width: 0;height: 0;left: 38px;top: 100px;border: 15px solid;border-color: #fff transparent transparent #fff;
}

我们的不使用图片的对话气泡就完成了：

另外，我们还可以使用:before和:after伪类来做很多其他的事情，比如，一个思考气泡也可以通过这样方法完成：

p.thought
{position: relative;width: 130px;height: 100px;text-align: center;line-height: 100px;background-color: #fff;border: 8px solid #666;-webkit-border-radius: 58px;-moz-border-radius: 58px;border-radius: 58px;-webkit-box-shadow: 2px 2px 4px #888;-moz-box-shadow: 2px 2px 4px #888;box-shadow: 2px 2px 4px #888;
}
p.thought:before, p.thought:after
{left: 10px;top: 70px;width: 40px;height: 40px;background-color: #fff;border: 8px solid #666;-webkit-border-radius: 28px;-moz-border-radius: 28px;border-radius: 28px;
}
p.thought:after
{width: 20px;height: 20px;left: 5px;top: 100px;-webkit-border-radius: 18px;-moz-border-radius: 18px;border-radius: 18px;
}

View Code

CSS3实现对话气泡效果相关推荐

html5对话框背景透明度,纯CSS3背景透明的Speech Bubbles对话气泡
这是一款使用纯CSS3制作的背景透明的Speech Bubbles对话气泡特效.该对话气泡使用两张透明的png图片来作为背景,通过简单的CSS代码来将它们组合为一个对话气泡效果. 使用方法 HTML结 ...
纯CSS实现对话气泡(MD.5)
在漫岛的注册成功引导页,有一个小姐姐讲述一些网站玩法规则,需要一个对话气泡效果,用纯CSS实现了一下,效果如下(点击图片放大看): 网站实际效果结合了动画体验比截图好,,做气泡不难,关键点在于三角形的 ...
linux视频对话框,抖音对话框视频怎么做？如何在视频画面上添加对话气泡框？视频加对话气泡的方法...
小编家里有个快要两周岁的小侄女,平日里总是喜欢做一些人小鬼大的事情,这不,前段时间她妈妈发了一个小视频,她拉着一个跟她差不多大的行李箱一脸严肃地说她要去上班~那么小一个小不点,居然很认真地对她妈妈说要 ...
[css] 使用css实现对话气泡的效果
[css] 使用css实现对话气泡的效果方法:使用圆角矩形作为对话的主体框,左侧或右侧增加附加三角形,三角形使用border样式设置来实现,相对定位和绝对定位结合使三角形附于圆角矩形左侧或右侧: h ...
分享Css3设计---纯Css实现超酷的iphone玻璃气泡效果
最近做手机项目时候,需要实现一个类似iphone SMS效果的气泡效果. 这里分享下实现心得, 首先分析下iphone的气泡效果有一下特点 1. 圆角 2. 向下的外阴影 3. 上边和下边的内阴影 4 ...
css 语音,纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
语音气泡是一种很流行的效果,在很多社交网站上可以看到评论使用这样的效果来实现,对于游客来说非常有吸引力,但我发现很多这样的效果都是依赖于HTML或JavaScript来实现的非常麻烦.本教程包含各种形 ...
Excel中对「对话气泡（吹き出し）」中的文字添加删除线等操作
■前言好久之前的操作的,当时找了半天, 现在总结一下. ■操作方法如下图所示 (例:给「对话气泡(吹き出し)」有文本「aaabbbccc」,给其中的bbb添加删除线) 第一步第二步完成后的效果 ...
H5聊天对话气泡的一种实现方式及原理
H5聊天对话气泡的一种实现方式及原理实现效果实现原理实现代码聊天对话气泡实现特别需要处理的是气泡的小尖角. 实现效果实现原理基于HTML元素边框原理及CSS伪元素实现气泡小尖角.关键点如下 ...
Unity 对话气泡
前言: unity真是啥都得自己写,还是ue4牛逼. 对话气泡功能挺实用的,下图是最终的效果. 准备阶段: 文字逐字显示动画用到了DOTWeen 需要自己用PS画对话气泡需要自行学习相关的布局组件. ...

CSS3实现对话气泡效果

CSS3实现对话气泡效果

CSS3实现对话气泡效果相关推荐

最新文章

热门文章