对话框/Tips

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

创客主机

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

HTML 结构

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

也想出现在这里?联系我们
WordPress 主题
  1. <a class="speech-bubble" href="#">
  2.     <div class="speech-content">
  3.         lorem ipsum ascilet
  4.     </div>
  5.     <div class="speech-tail"></div>
  6. </a>

CSS 样式

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

  1. .speech-bubble {
  2.     display: inline-block;
  3.     opacity:0.5;
  4.     transition: opacity 0.5s;
  5. }

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

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

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

  1. .speech-content {
  2.     display:inline-block;
  3.     min-width: 80px;
  4.     padding:10px;
  5.     text-align:center;
  6.     color:white;
  7.     border: solid white;
  8.     border-width: 3px 3px 0px 3px;
  9.     background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAABN2AAATdgEGLb1yAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABSSURBVHja7NGxDQAgEAOxgNh/5dBTU718G1i32mZCO0MCAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAXk6SeoIyP8uAAAA//8DAH02BGIBTpeBAAAAAElFTkSuQmCC') 48px 100% no-repeat;
  10.     background-size: calc(100% - 48px) 50px;
  11. }

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

  1. .speech-tail {
  2.     height:25px;
  3.     width: 52px;
  4.     margin-top:-3px;
  5.     background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAZCAYAAAB+Sg0DAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAFXSURBVHja1NgxKEVRHMfxc5+QKDHJJqOsyqzMbzApGWwyGGxKWWxSSiZZyKJMFmUyyCqjbDKxMFDP+9h0nR7v8fTePb+6wz3//z2nb/fe8//9TwahhcqyLPuPeTAbQjiMx0shQWExhHBQK1ZKEGY1hLATQshauWh8farJeTd91QX6kwNCB/YimFP0JPeG0IXjCOYIncl9cujFWQSzi1Krf9ymgTCAywhmo107UVNAGMJ1BLPSzq31z0AYwW3ukXcstLtW/AkIY7jPpb9hpgjF79dAmMBjLvUF00Wp5r8CwhSec2lPmCySPWkYCGW85lIeMF40v9UQEOZRyYXvMFpEA1kXCMuo5kI3GC6qI/4RCOtRjbnCYJEt/rdA2I7uz9FX9J7lJ6C8TtCdQhPWCNA+OlLpKusBbSELqagO0FqKhxi1gKpYSvFQphZQBXMhVdUAKrdq7Y8BABcTlsw7evjMAAAAAElFTkSuQmCC') top left no-repeat ;
  6.     background-size: 100% 100%;
  7. }

Github 地址:https://github.com/NicolasBrondin/html-speech-bubble

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!