Heim  >  Artikel  >  Web-Frontend  >  Reine CSS3-Sprechblasen mit transparentem Hintergrund

Reine CSS3-Sprechblasen mit transparentem Hintergrund

黄舟
黄舟Original
2017-01-18 13:56:372380Durchsuche

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(&#39;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAABN2AAATdgEGLb1yAAAAIGNIU
    k0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABSSURBVHja7NGxDQAgEAOxgNh/5dBTU718G1i32mZCO0MCAQEBAQEBAQEBAQEBAQEBAQE
    BAQEBAQEBAQEBAQEBAQEBAXk6SeoIyP8uAAAA//8DAH02BGIBTpeBAAAAAElFTkSuQmCC&#39;) 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(&#39;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAZCAYAAAB+Sg0DAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAIGNIUk0A
    AHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAFXSURBVHja1NgxKEVRHMfxc5+QKDHJJqOsyqzMbzApGWwyGGxKWWxSSiZZyKJMFmUyyCqjbD
    KxMFDP+9h0nR7v8fTePb+6wz3//z2nb/fe8//9TwahhcqyLPuPeTAbQjiMx0shQWExhHBQK1ZKEGY1hLATQshauWh8farJeTd91QX6kwNCB/YimFP0JPeG0IXj
    COYIncl9cujFWQSzi1Krf9ymgTCAywhmo107UVNAGMJ1BLPSzq31z0AYwW3ukXcstLtW/AkIY7jPpb9hpgjF79dAmMBjLvUF00Wp5r8CwhSec2lPmCySPWkYCG
    W85lIeMF40v9UQEOZRyYXvMFpEA1kXCMuo5kI3GC6qI/4RCOtRjbnCYJEt/rdA2I7uz9FX9J7lJ6C8TtCdQhPWCNA+OlLpKusBbSELqagO0FqKhxi1gKpYSvFQ
    phZQBXMhVdUAKrdq7Y8BABcTlsw7evjMAAAAAElFTkSuQmCC&#39;) 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)!


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn