純CSS3背景透明的Speech Bubbles對話氣泡

簡短教學

這是一款使用純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樣式

整個對話氣泡包裹在一個超連結元素中，這個超連結元素的樣式

整個對話氣泡包覆在一個超連結元素中，這個超連結元素的play

整個對話氣泡將同時設定為透明降低為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）！ 🎜🎜🎜🎜