纯CSS3背景透明的Speech Bubbles对话气泡
程序员文章站
2022-04-26 17:02:19
...
简要教程
这是一款使用纯CSS3制作的背景透明的Speech Bubbles对话气泡特效。该对话气泡使用两张透明的png图片来作为背景,通过简单的CSS代码来将它们组合为一个对话气泡效果。
使用方法
HTML结构
该对话气泡的HTML结构如下:
<a class="speech-bubble" href="#"> <div class="speech-content"> lorem ipsum ascilet </div> <div class="speech-tail"></div> </a>
CSS样式
整个对话气泡包裹在一个超链接元素中,这个超链接元素的display属性设置为inline-block,同时透明降低为50%,并为透明度动画设置动画过渡效果。
.speech-bubble { display: inline-block; opacity:0.5; transition: opacity 0.5s; }
在鼠标滑过对话气泡时,超链接元素的透明度恢复为100%。
.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)!