Heim > Artikel > Web-Frontend > Reine CSS3-Sprechblasen mit transparentem Hintergrund
Kurzes Tutorial
Dies ist ein Sprechblasen-Spezialeffekt mit transparentem Hintergrund, der mit reinem CSS3 erstellt wurde. Diese Sprechblase verwendet zwei transparente PNG-Bilder als Hintergrund und kombiniert sie durch einfachen CSS-Code zu einem Sprechblaseneffekt.
Verwendung
HTML-Struktur
Die HTML-Struktur der Dialogblase ist wie folgt:
<a class="speech-bubble" href="#"> <div class="speech-content"> lorem ipsum ascilet </div> <div class="speech-tail"></div> </a>
CSS-Stil
Die gesamte Dialogblase ist in ein Hyperlink-Element gehüllt, das Anzeigeattribut dieses Hyperlink-Elements wird auf Inline-Block gesetzt, während die Transparenz auf 50 % reduziert wird und ein animierter Übergangseffekt für die Transparenzanimation eingestellt wird.
.speech-bubble { display: inline-block; opacity:0.5; transition: opacity 0.5s; }
Wenn die Maus über die Sprechblase fährt, kehrt die Transparenz des Hyperlink-Elements auf 100 % zurück.
.speech-bubble:hover { opacity:1; transition: opacity 0.5s; }
.speech-content ist der Inhaltsfeldbereich der Dialogblase. Die Mindestbreite beträgt 80 Pixel und der Abstand beträgt 10 Pixel. Alle Seiten außer dem unteren Rand werden mit einem 3 Pixel breiten weißen Rand versehen. Verwenden Sie außerdem ein vollständig transparentes PNG-Bild als Hintergrund.
.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 ist das Ende des Blasendialogfelds. Es legt eine feste Breite und Höhe fest und verwendet außerdem ein transparentes PNG-Bild als Hintergrund.
.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%; }
Das Obige ist der Inhalt von Sprechblasen mit reinem CSS3-Hintergrund und transparentem Hintergrund. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!