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

语音气泡是一种很流行的效果，在很多社交网站上可以看到评论使用这样的效果来实现，对于游客来说非常有吸引力，但我发现很多这样的效果都是依赖于HTML或JavaScript来实现的非常麻烦。本教程包含各种形式的使用CSS 2.1与CSS3创建的渐进增强气泡效果。纯CSS3打造，没有使用图像，没有JavaScript，它可以应用到您现有的HTML当中。

渐进增强与伪元素

简单的

Content

或

Content

代码，您可以产生语音泡沫的效果，如：

添加一个子元素，例如

Quote

你甚至可以产生语音泡沫的效果，如：

你可以根据自己的需要在现有的例子基础上进行改造打造自己的元素代码。关键是使用 :before和:after伪元素产生基本形状。

通过应用CSS3属性，如border-radius属性和transform就可以产生更复杂的形状和方位。

示例代码

这是一个例子，如何创建一个基本的语音泡沫形状。进一步的示例，可以查看演示页和CSS文件，

复制代码代码如下:

/* Bubble with an isoceles triangle

------------------------------------------ */

.triangle-isosceles {

position:relative;

padding:15px;

margin:1em 0 3em;

color:#000;

background:#f3961c;

/* css3 */

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

background:-moz-linear-gradient(top, #f9d835, #f3961c);

background:linear-gradient(top, #f9d835, #f3961c);

}

/* creates triangle */

.triangle-isosceles:after {

content:"";

display:block; /* reduce the damage in FF3.0 */

position:absolute;

bottom:-15px;

left:50px;

width:0;

border-width:15px 15px 0;

border-style:solid;

border-color:#f3961c transparent;

}

逐步增强的注意事项

这个方法是渐进增强。我们看到的样式层：“简单的彩色框，，圆角矩形或圆形的渐变背景。这些浏览器的样式，他们是能够呈现的。

IE6和IE7不支持CSS2.1伪元素，将会忽略所有:before和:after声明。它们没有任何增强，但保留着基本的使用习惯。..

关于Firefox 3.0的警告

Firefox 3.0虽然支持CSS2.1伪元素但不支持其定位。

css 语音,纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果相关推荐

[css] 使用纯CSS代码实现动画的暂停与播放
[css] 使用纯CSS代码实现动画的暂停与播放一个属性:animation-play-state 取值:paused(暂停)|running(播放) hover取代点击 .stop:hover~. ...
[css] 使用纯css来创建一个滑块
[css] 使用纯css来创建一个滑块 .checke{position: relative;-webkit-appearance: none;width:90px;height: 44px;line ...
[css] 使用纯css能否监控到用户的一些信息？怎么实现？
[css] 使用纯css能否监控到用户的一些信息?怎么实现? 利用:active 伪类实现监控用户的点击 .button-1:active::after {content: url(./pixel.g ...
html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框
本篇教程介绍了HTML+CSS入门纯CSS手写圆角气泡对话框,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那 ...
康佳lc32es62没声音_康佳LC32ES62有伴音，无图像无字符
马上登录[中国家电维修联盟论坛]获取更多更全面的信息! 您需要登录才可以下载或查看,没有帐号?请使用中文注册 x 本帖最后由张洪胜于 2014-12-11 18:22 编辑1 w3 u& ...
制作css开关,纯css实现开关效果
大家好,我又来了,这次给大家表演使用纯css实现开关效果首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则 ...
【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
php下拉框css样式,纯CSS实现的下拉菜单
实现效果实现代码 html Home WordPress Themes Plugins Tutorials Web Design Resources Links Tutorials HTML/CSS ...
tab css html,纯css的tab 切换
css 版的tab切换 tab切换 * { margin: 0; padding: 0; } .content{ width: 500px; height: 500px; margin:30px au ...

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

css 语音,纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果相关推荐

最新文章

热门文章