首先定义一个

<p class="speech"></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 class="thought">I think...</p>

css代码:

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{
content: '';
position: absolute;
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;
z-index:5;
} p.thought:after{
position: absolute;
width: 20px;
height: 20px;
left: 5px;
top: 100px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
z-index:6;
}

最新实现效果:

CSS3实现气泡效果的更多相关文章

  1. css3实现气泡效果的聊天框

    因为CSS3尚未形成标准,所以现行的浏览器对于css3支持不太一致,某些特性需要加上浏览器前缀 css属性的浏览器前缀 前缀 渲染引擎 使用该引擎的浏览器 -khtml- KHTML Konquero ...

  2. 不用图片,纯Css3实现超酷的类似iphone的玻璃气泡效果

    最近在一个私活做手机项目时候,需要实现一个类似ios 6中短信那样的气泡效果. 这里分享下实现心得,希望能给大家一点启发. 首先分析下iphone的气泡效果有一下特点 1. 四面圆角 2. 界面上向下 ...

  3. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  4. CSS3圆角气泡框,评论对话框

    <title>CSS3圆角气泡框,评论对话框</title> <style> body { ; ; font:1em/1.4 Cambria, Georgia, s ...

  5. css3的transition效果和transfor效果

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. css3幻灯片换位效果

    <title>css3幻灯片换位效果</title> <style type="text/css">  .flowGallery {width: ...

  7. 第八十节,CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释     CSS3 ...

  8. html+css3实现长方体效果

    网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 h ...

  9. Css3实现波浪效果3-静态波纹

    一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...

随机推荐

  1. php中的不常用数组函数(一)(数组中元素的键和值对调 array_flip())

    array_flip($arr); //交换数组中的键和值. //如下所示,如果$arr中有相同的值.交换之后 会被旧的覆盖,最后一个有效. /***********array_flip(交换数组中的 ...

  2. [python学习笔记]Day1

    初识python 第一个python程序: print('Hello,Python') >>>Hello,Python python2与python3的一些主要的区别: 1.在pyt ...

  3. 请用fontAwesome代替网页icon小图标

    1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...

  4. swift学习笔记之-继承

    //继承 import UIKit /* 继承(Inheritance): 1.一个类可以继承(inherit)另一个类的方法(methods).属性(properties)和其它特性.当一个类继承其 ...

  5. SQLServer处理行转列和列转行

    掌握SQL Server 行转列和列转行 1.列转行 数据经过计算加工后会直接生成前端图表需要的数据源,但是程序里又需要把该数据经过列转行写入中间表中,下次再查询该数据时直接从中间表查询数据. 1.1 ...

  6. Vue入门演示

    工作中用了很久vue,但是都是我们这边前端经理封装好的组件,想要看到底部的原理还要从层层代码里面剥离出来,逻辑太复杂,还不如自己一点点整理一下,一步一步走下去. github地址:https://gi ...

  7. SET UPDATE TASK LOCAL

    SET Effect Switches on the local update task. This means that when you specify CALL FUNCTION ... IN ...

  8. Git使用ssh key

    生成ssh key步骤 这里以配置github的ssh key为例: 1. 配置git用户名和邮箱 git config user.name "用户名" git config us ...

  9. CoreAnimation动画(CALayer动画)

    #pragma mark - CABasicAnimation动画 - (IBAction)basicAnimation:(UIButton *)sender { // 1.创建动画对象 CABasi ...

  10. IOS 网络浅析 (二 网络异步请求)

    学习网络,无论是C/S还是B/S首要的当然是向服务器发送请求,并得到响应,么有请求没有响应,那就不叫做网络了. 这边文章向大家介绍境界一下网路异步请求. *大家不要觉得我写的知识点太零散,我只是想给大 ...