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

黄舟

发布时间：2017-01-18 13:56:37

2944人浏览过

来源于php中文网

原创

简要教程

这是一款使用纯CSS3制作的背景透明的Speech Bubbles对话气泡特效。该对话气泡使用两张透明的png图片来作为背景，通过简单的CSS代码来将它们组合为一个对话气泡效果。

使用方法

HTML结构

该对话气泡的HTML结构如下:


    
        lorem ipsum ascilet

CSS样式

整个对话气泡包裹在一个超链接元素中，这个超链接元素的display属性设置为inline-block，同时透明降低为50%，并为透明度动画设置动画过渡效果。

.speech-bubble {
    display: inline-block;
    opacity:0.5;
    transition: opacity 0.5s;
}

在鼠标滑过对话气泡时，超链接元素的透明度恢复为100%。

立即学习“前端免费学习笔记（深入）”；

Multiavatar

Multiavatar是一个免费开源的多元文化头像生成器，可以生成高达120亿个虚拟头像

下载

.speech-bubble:hover {
    opacity:1;
    transition: opacity 0.5s;
}

.speech-content是对话气泡的内容框区域，它的最小宽度min-width设置为80像素，内边距为10像素。除了底部边之外的其它边都被设置了3像素的白色边框。另外为它的背景使用一张完全透明的PNG图片。

.speech-content {
    display:inline-block;
    min-width: 80px;
    padding:10px;
    text-align:center;
    color:white;
    border: solid white;
    border-width: 3px 3px 0px 3px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAABN2AAATdgEGLb1yAAAAIGNIU
    k0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABSSURBVHja7NGxDQAgEAOxgNh/5dBTU718G1i32mZCO0MCAQEBAQEBAQEBAQEBAQEBAQE
    BAQEBAQEBAQEBAQEBAQEBAXk6SeoIyP8uAAAA//8DAH02BGIBTpeBAAAAAElFTkSuQmCC') 48px 100% no-repeat;
    background-size: calc(100% - 48px) 50px;
}

.speech-tail是气泡对话框的尾部。它设置了固定的宽度和高度，同样使用透明的PNG图片作为背景。

.speech-tail {
    height:25px;
    width: 52px;
    margin-top:-3px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAZCAYAAAB+Sg0DAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAIGNIUk0A
    AHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAFXSURBVHja1NgxKEVRHMfxc5+QKDHJJqOsyqzMbzApGWwyGGxKWWxSSiZZyKJMFmUyyCqjbD
    KxMFDP+9h0nR7v8fTePb+6wz3//z2nb/fe8//9TwahhcqyLPuPeTAbQjiMx0shQWExhHBQK1ZKEGY1hLATQshauWh8farJeTd91QX6kwNCB/YimFP0JPeG0IXj
    COYIncl9cujFWQSzi1Krf9ymgTCAywhmo107UVNAGMJ1BLPSzq31z0AYwW3ukXcstLtW/AkIY7jPpb9hpgjF79dAmMBjLvUF00Wp5r8CwhSec2lPmCySPWkYCG
    W85lIeMF40v9UQEOZRyYXvMFpEA1kXCMuo5kI3GC6qI/4RCOtRjbnCYJEt/rdA2I7uz9FX9J7lJ6C8TtCdQhPWCNA+OlLpKusBbSELqagO0FqKhxi1gKpYSvFQ
    phZQBXMhVdUAKrdq7Y8BABcTlsw7evjMAAAAAElFTkSuQmCC') top left no-repeat ;
    background-size: 100% 100%;
}

以上就是纯CSS3背景透明的Speech Bubbles对话气泡的内容，更多相关内容请关注PHP中文网（www.php.cn）！

如何在CSS中使用伪类:last-of-type控制最后类型元素_结合:last-of-type设置边框

css背景重复background-repeat控制技巧

如何使用CSS实现Flex容器布局_Flex容器属性详解与实战

css工具Animate.css实现动画效果

css引入方式与浏览器兼容性问题

相关标签:

css3

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：7种纯CSS3搜索框UI设计效果下一篇：jQuery和CSS3超炫汉堡包变形动画特效

作者最新文章

HTML5 Placeholder属性的详情介绍