`

纯CSS气泡效果

    博客分类:
  • CSS
css 
阅读更多
转自:http://www.cnblogs.com/daxiong/articles/3158630.html

纯CSS气泡框实现方法探究

 

气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示:

拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片,然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便,可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。

首先我们来看一下border这个属性,当我们把一个div的border-color设为不同值的时候,可以看到四边都成了一个梯形。

1
# test{width:50px; height:50px; border-width:50px; border-style:solid; border-color:#09F #990 #933 #0C9;}

 

如果我们继续把这个div的width和height都设为0,可以看到四边都成了一个三角形。

1
# test{width:0; height:0; border-width:75px; border-style:solid; border-color:#09F #990 #933 #0C9;}

 

在主流浏览器中检测一下,发现IE6中存在一个小问题,上下边能形成三角形,左右两边仍然还是梯形

通过实验发现当把div的font-size和line-height都设为0的时候,div的四边在IE6下都能形成完美的三角形:

1
#test{ width:0; height:0; border-width:75px; border-style:solid; border-color:#09F #990 #933 #0C9; font-size:0; line-height:0;}

很显然我们只需要其中的一个三角形,那么只需要将其他三边的color设置为透明或者跟页面背景一样的颜色,就能模拟出一个三角来,推荐将其他三边颜色设置为透明,即color的值为transparent,如果其他三边颜色跟页面背景一样,虽然视觉上只能看到一个三角,但背景颜色一旦改变,其他三边颜色也要随之改变。

1
#test{ width:0; height:0; border-width:75px; border-style:solid; border-color:#09F transparenttransparent; font-size:0; line-height:0;}

 问题又来了,IE6下transparent无效!其他三边被设置成默认的黑色了。

但通过实验发现把border-style设置为dashed后,IE6下其他三边就能透明了!

1
#test{ width:0; height:0; border-width:75px; border-style:solid dashed dashed; border-color:#09F transparent transparent; font-size:0; line-height:0;}

 到这一步我们已经成功的模拟出了一个小三角,下一步我们把这个小三角同矩形框结合起来。先设置一个矩形框,然后把小三角定位到矩形框上。先来写出HTML结构:

1
2
3
4
<div class="tag">
      <em></em>   
      CSS气泡框实现
</div>

CSS样式:

1
2
.tag{ width:300px; height:100px; border:5px solid #09F; position:relative;}
.tag em{display:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid dashed dashed; border-color:#09F transparent transparent;font-size:0; line-height:0;}

 效果如下:

现在指示方向的三角形箭头是实心的,而我们想要的是镂空的效果,这里我们再叠加一个同气泡框背景颜色一样的小三角,然后把这个叠加的小三角移动一下位置就能达到了。
首先需要对HTML结构进行调整,如下:

1
2
3
4
5
<div class="tag">
      <em></em>   
      <span></span>
      CSS气泡框实现
</div>

CSS样式修改为:

1
2
3
.tag{ width:300px; height:100px; border:5px solid #09F; position:relative; background-color:#FFF;}
.tag em{display:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid dashed dashed; border-color:#09F transparent transparent;font-size:0; line-height:0;}
.tag span{display:block; border-width:20px; position:absolute; bottom:-33px; left:100px;border-style:solid dashed dashed; border-color:#FFF transparent transparent;font-size:0; line-height:0;}

最终效果如下所示:

注意:叠加的小三角span的bottom值并不是border-width的值,两个小三角bottom的差值理论上应该是2(border-width)2的平方根

最后来把代码优化一下,以便在后期更容易维护,完整的HTML结构:

1
2
3
4
5
6
<div class="tag">
 <div class="arrow">
     <em></em><span></span>
    </div>
    CSS气泡框实现
</div>

CSS样式修改为:

1
2
3
4
5
.tag{ width:300px; height:100px; border:5px solid #09F; position:relative; background-color:#FFF;}
.arrow{ position:absolute; width:40px; height:40px; bottom:-40px; left:100px; }
.arrow *{ display:block; border-width:20px; position:absolute; border-style:solid dashed dashed dashed; font-size:0; line-height:0; }
.arrow em{border-color:#09F transparent transparent;}
.arrow span{border-color:#FFF transparent transparent; top:-7px;}

 

 举一反三:不规则三角箭头的气泡框又如何实现?

 

HTML结构同前面一样:

1
2
3
4
5
6
<div class="tag">
 <div class="arrow">
     <em></em><span></span>
    </div>
    CSS气泡框实现
</div>

矩形框CSS样式稍微改动一下:

1
.tag{ width:300px; height:100px;position:relative; background-color:#09F;}

 重新定位一下三角箭头:

1
.arrow{ position:absolute; width:70px; height:60px; left:-70px; bottom:10px;}

元素相邻的两边border-style值设为solid(显示),另两边设为transparent(不会显示)

1
.arrow *{ display:block; position:absolute; border-style:dashed solid solid dashed; font-size:0; line-height:0; }

首先模拟一个直角三角形,把一个元素的相邻两边color设为相同的值,另外两边颜色设为透明,即可得到一个直角:

1
.arrow em{border-color:transparent #09F #09F transparent; border-width:30px 35px;}

 

把两个直角三角形重叠在一起就可以得到一个不规则三角形

1
.arrow span{ border-width:20px 35px;border-color:transparent #FFF #FFF transparent; bottom:0;}

至此,不规则三角箭头的气泡框效果已经实现。

除了通过设置元素的border来模拟小三角之外,还可以用特殊字符来模拟,用特殊字符模拟小三角同样需要用到定位和重叠覆盖,只不过不需要调整border属性了。

先来看一个菱形“◆” ,它在页面中的代码是“&#9670”,需要注意的是页面编码需要设置为utf-8,在网页中可以把◆当作文字处理,可以通过调整font-size来它的大小、通过color来设置它的颜色。

HTML结构依然用前面的,不同的是在em、span标签中加入了 ◆

1
2
3
4
5
6
<div class="tag">
 <div class="arrow">
     <em>◆</em><span>◆</span>
    </div>
    CSS气泡框实现
</div>

先来设置最外层div的样式,得到一个矩形框:

1
.tag{ width:300px; height:100px;position:relative; border:5px solid #09F;}

 

接着定位箭头最外层容器div,便于观察可以先设置一个背景色 : 

1
.arrow{ position:absolute; width:40px; height:40px; left:100px; bottom:-40px; overflow:hidden;}

 

再对◆设置样式:

1
.arrow *{ display:block; position:absolute; font-size:40px; line-height:40px; width:40px; font-family:SimSun; font-style:normal; font-weight:normal; text-align:center; vertical-align:middle;}

 

注意:为了◆主流浏览器中显示一致,需要清除浏览器的默认字体样式,特别注意这里字体的设置

再分别修改em、span标签的字体颜色,并对这两个标签定位:

1
2
.arrow em{ color:#09F; top:-15px;}
.arrow span{ color:#FFF; top:-22px;}

 

注意:该例子中em和span两个元素垂直方向相差约7px,原来同上面提到的一样,差值理论上应该是2(border-width)2的平方根

完整CSS样式:

1
2
3
4
5
.tag{ width:300px; height:100px;position:relative; border:5px solid #09F;}
.arrow{ position:absolute; width:40px; height:40px; left:100px; bottom:-40px; overflow:hidden;}
.arrow *{ display:block; position:absolute; font-size:40px; line-height:40px; width:40px;font-family:SimSun; font-style:normal; font-weight:normal;text-align:center; vertical-align:middle;}
.arrow em{ color:#09F; top:-15px;}
.arrow span{ color:#FFF; top:-22px;}

最终效果如下:

 

 

 HTML特殊字符查询:http://ikwebdesigner.com/special-characters/

 

补充:以上方式实现小三角的过程中不可避免的增加了多余的标签,如果不要求所有浏览器中显示一致的话, 我们可以利用css3来实现这个小三角

HTML结构:

1
2
3
<div class="tag">
    css3气泡框
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.tag{
    width:300px;
    height:100px;
    border:5px solid #09F;
    position:relative;
    background-color:#FFF;
}
.tag:before,.tag:after{
    content:"";display:block;
    border-width:20px;
    position:absolute; bottom:-40px;
    left:100px;
    border-style:solid dashed dashed;
    border-color:#09F transparent transparent;
    font-size:0;
    line-height:0;
}
.tag:after{
    bottom:-33px;
    border-color:#FFF transparent transparent;
}

效果同上。 

分享到:
评论

相关推荐

    css 聊天窗口 小箭头 气泡效果

    在本主题"css 聊天窗口 小箭头 气泡效果"中,我们将探讨如何使用纯CSS技术来创建具有小箭头和气泡效果的聊天窗口。这个效果通常用于模拟现实生活中对话气泡的视觉表现,使用户能够清晰地识别出消息的发送者和接收者...

    纯CSS实现气泡提示.rar

    "纯CSS实现气泡提示"就是一个这样的设计,它模仿了Windows系统中的气泡提示功能,用于在网页上提供信息提示。这种提示通常用于告知用户某个元素的功能或者提供额外的上下文信息。以下是关于这个主题的详细知识点: ...

    纯CSS3鼠标悬停按钮气泡动画特效

    【纯CSS3鼠标悬停按钮气泡动画特效】是一种利用CSS3的强大功能来实现的交互式设计技术。在网页设计中,按钮是用户界面的重要组成部分,而悬停效果和动画可以提升用户体验,使按钮更具吸引力。这个特效展示了如何仅...

    纯CSS3气泡加载图标动画特效.zip

    【标题】"纯CSS3气泡加载图标动画特效"是一个基于CSS3技术实现的动态加载效果,它在网页中展示了游动交叉的气泡样式,为用户提供了视觉上的互动体验。这种加载图标常用于网站数据加载或处理过程,以美观且吸引人的...

    纯CSS3创意气泡动画特效

    在本文中,我们将深入探讨“纯CSS3创意气泡动画特效”这一主题,这是一种利用CSS3的关键帧动画(keyframes)特性来实现的创新设计。这种特效能够为网站添加动态和互动性,提升用户体验,特别适用于儿童网站、社交...

    使用纯 CSS 实现超酷炫的粘性气泡效果.doc

    【使用纯 CSS 实现超酷炫的粘性气泡效果】 在前端开发中,创造吸引人的视觉效果常常能提升用户体验。本篇文章将介绍如何仅使用 CSS 来实现一种酷炫的粘性气泡效果,类似于在 CodePen 上看到的动态效果。这个效果的...

    纯CSS3创意气泡动画特效.zip

    【标题】"纯CSS3创意气泡动画特效.zip"揭示了这个压缩包包含的资源是关于使用纯CSS3实现的一种创新、美观的气泡动画效果。CSS3是层叠样式表(Cascading Style Sheets)的第三版,它极大地扩展了CSS的功能,包括新的...

    纯CSS3背景透明的Speech Bubbles对话气泡

    本案例中,我们关注的是"纯CSS3背景透明的Speech Bubbles对话气泡",这是一种在网页中实现对话或者提示信息展示的创新方式。 首先,了解什么是**CSS3 Speech Bubbles**。在网页设计中,对话气泡通常用于模拟人与人...

    纯CSS3悬停气泡按钮动画特效.zip

    【纯CSS3悬停气泡按钮动画特效】是一种利用CSS3技术实现的交互式设计,主要应用于网页中的按钮元素。这种特效在用户鼠标悬停在按钮上时,会触发一个气泡状的信息提示框,向用户展示附加信息或提示,为用户界面增添...

    纯CSS3鲸鱼跳跃气泡动画特效.zip

    【纯CSS3鲸鱼跳跃气泡动画特效】是一款利用现代浏览器对CSS3特性的支持,无需JavaScript编程,就能实现的一款动态视觉效果。这个特效展示了一只鲸鱼在蓝色海洋背景下跃出水面,同时伴随着气泡上升的动画场景,为网页...

    这是一款使用纯CSS3制作的背景透明的SpeechBubbles对话气泡特效

    本项目采用纯CSS3技术,实现了背景透明的SpeechBubbles对话气泡特效,无需依赖JavaScript,仅通过CSS就能创建出具有视觉吸引力的对话气泡,提升了用户体验。 首先,我们要理解CSS3中的关键特性在这个特效中的应用。...

    纯CSS实现气泡对话框尖角处理方案

    总结来说,纯CSS实现气泡对话框尖角处理方案是利用CSS边框和定位特性,创建两个重叠的三角形来达到视觉效果。这种方法无需额外的图片或SVG图形,减少了HTTP请求,提高了页面加载速度,同时提供了良好的可扩展性和自...

    css实现气泡框效果(实例加图解)

    然而,为了深入理解并掌握这种效果,我们可以使用纯CSS来创建。本文将详细介绍如何使用CSS实现一个自定义的气泡框效果。 首先,我们要了解气泡框的基本构造。一个气泡框主要由两部分组成:一个矩形和一个指向特定...

    纯CSS3逼真的气球漂浮动画特效

    【纯CSS3逼真的气球漂浮动画特效】是一个利用CSS3的强大功能,无需JavaScript库,就能实现生动有趣的气球上升动画的实例。这个特效展示了CSS3在网页动态效果设计中的强大潜力,使得网页元素的交互性和视觉吸引力得以...

    纯CSS实现聊天框小尖角、气泡效果

    以下将详细介绍如何使用纯CSS实现聊天框小尖角和气泡效果。 首先,我们要明白CSS中的边框可以形成一个三角形的原理。当一个元素的宽度和高度都设置为0时,边框实际上会形成四个相等的三角形。通过设置不同的边框...

    Bootstrap纯css3左右时间轴特效代码气泡垂直

    在这个特定的案例中,我们关注的是一个基于Bootstrap和CSS3的时间轴特效,特别是那些展示在左右两侧的气泡垂直布局。 首先,我们要理解`Bootstrap`的核心理念。Bootstrap是由Twitter开发并开源的,它的主要目标是...

    纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果

    纯CSS打造的语音气泡...总的来说,纯CSS打造的语音气泡效果是一种高效且实用的设计技巧,它充分利用了CSS3的特性,为网页添加了动态和互动的元素,同时兼顾了老版本浏览器的兼容性,是现代Web开发中的一个重要工具。

    纯CSS3黑色气泡背景动画菜单

    分享一款非常酷的CSS3动画菜单,这款CSS3菜单有一个很漂亮的黑色气泡背景,菜单是银白色的,和黑色的背景交织在一起更加显得有3D立体的视觉效果。CSS3的运用让菜单有圆角的效果,鼠标滑过菜单时也会改变背景。

    纯CSS3背景透明的Speech Bubbles对话气泡特效源码.zip

    【标题】"纯CSS3背景透明的Speech Bubbles对话气泡特效源码"涉及的核心技术是CSS3,尤其是其在创建动态、交互式图形和视觉效果方面的能力。这个项目主要展示了如何利用CSS3来实现一种叫做Speech Bubbles的元素,它们...

Global site tag (gtag.js) - Google Analytics