背景が透明な純粋な CSS3 吹き出し-CSSチュートリアル-php.cn

背景が透明な純粋な CSS3 吹き出し

黄舟

リリース： 2017-01-18 13:56:37

オリジナル

2427 人が閲覧しました

簡単なチュートリアル

これは、純粋な CSS3 を使用して作成された透明な背景を持つ吹き出しダイアログバブル効果です。この吹き出しは、背景として 2 つの透明な PNG 画像を使用し、簡単な CSS コードによってそれらを組み合わせて吹き出し効果を作成します。

使用法

HTML構造

ダイアログバブルのHTML構造は次のとおりです:

<a class="speech-bubble" href="#">
    <div class="speech-content">
        lorem ipsum ascilet
    </div>
    <div class="speech-tail"></div>
</a>

ログイン後にコピー

CSSスタイル

ダイアログバブル全体がハイパーリンク要素でラップされ、このハイパーリンク要素の表示属性はインラインに設定されます-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(&#39;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAABN2AAATdgEGLb1yAAAAIGNIU
    k0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABSSURBVHja7NGxDQAgEAOxgNh/5dBTU718G1i32mZCO0MCAQEBAQEBAQEBAQEBAQEBAQE
    BAQEBAQEBAQEBAQEBAQEBAXk6SeoIyP8uAAAA//8DAH02BGIBTpeBAAAAAElFTkSuQmCC&#39;) 48px 100% no-repeat;
    background-size: calc(100% - 48px) 50px;
}

ログイン後にコピー

.speech-tail はバブルダイアログボックスの末尾です。固定の幅と高さを設定し、背景として透明な PNG 画像も使用します。

.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%;
}

ログイン後にコピー

上記は、純粋な CSS3 背景と透明な背景を備えた吹き出しのコンテンツです。その他の関連コンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。