卡卡網(wǎng)

本文介紹的是純CSS實(shí)現(xiàn)的對話框（對話氣泡/語音泡沫/speech bubbles），所有示例都使用簡單的語義HTML，沒有空元素，沒有不必要的額外元素，沒有JavaScript，沒有圖像。

一、基本氣泡

基本氣泡

HTML代碼（16個基本氣泡示例）：

<p class="triangle-isosceles">這只需一個HTML元素</p>
<p class="triangle-isosceles top">例如, <code><p>[text]</p></code></p>
<p class="triangle-isosceles left">但它可以是任何你想要的元素</p>
<p class="triangle-isosceles right">整個顯示僅由CSS創(chuàng)建</p>
<p class="triangle-right">這只需一個HTML元素</p>
<p class="triangle-right top">例如, <code><p>[text]</p></code></p>
<p class="triangle-right left">但它可以是任何你想要的元素</p>
<p class="triangle-right right">整個顯示僅由CSS創(chuàng)建</p>
<p class="triangle-obtuse">這只需一個HTML元素</p>
<p class="triangle-obtuse top">例如, <code><p>[text]</p></code></p>
<p class="triangle-obtuse left">但它可以是任何你想要的元素</p>
<p class="triangle-obtuse right">整個顯示僅由CSS創(chuàng)建</p>
<p class="triangle-border">這只需一個HTML元素</p>
<p class="triangle-border top">例如, <code><p>[text]</p></code></p>
<p class="triangle-border left">但它可以是任何你想要的元素</p>
<p class="triangle-border right">整個顯示僅由CSS創(chuàng)建</p>

說明：

HTML代碼先引用speech bubbles CSS。

demodownload

二、簡單氣泡

簡單氣泡

HTML代碼（4個簡單氣泡示例）：

<blockquote class="example-right">
  <p>設(shè)計是針對人類的。 設(shè)計就是通過識別人類問題并執(zhí)行最佳解決方案來解決人類問題。</p>
</blockquote>
<p>風(fēng)中的歌</p>

<blockquote class="example-obtuse">
  <p>這是你所看到的樣子</p>
</blockquote>
<p>山那邊</p>

<blockquote class="example-twitter" cite="https://twitter.com/necolas/status/9880187933">
  <p>比起首先創(chuàng)建它們，我花更多的時間來撰寫有關(guān)實(shí)驗或項目的博客文章。</p>
</blockquote>

<div class="example-number">57</div>

說明：

HTML代碼先引用speech bubbles CSS。

demodownload

三、復(fù)雜氣泡

復(fù)雜氣泡

HTML代碼（7個復(fù)雜氣泡示例）：

<div class="pinched">
  <p><strong>div的第一個子元素是什么沒關(guān)系</strong>...但是它確實(shí)需要一個子元素。</p>
</div>

<blockquote class="oval-speech">
  <p>這是一個塊引用，其樣式看起來像氣泡。</p>
</blockquote>

<blockquote class="oval-thought">
  <p>這是一個塊引用，其樣式看起來像是思想氣泡。</p>
</blockquote>

<blockquote class="oval-quotes">
  <p>這是一個塊引用，其樣式看起來像氣泡。</p>
</blockquote>
<p>清晨的云</p>

<blockquote class="rectangle-speech-border">
  <p>這是一個塊引用，其樣式看起來像氣泡。</p>
</blockquote>

<blockquote class="oval-speech-border">
  <p>這是一個塊引用，其樣式看起來像氣泡。</p>
</blockquote>

<blockquote class="oval-thought-border">
  <p>這是一個塊引用，其樣式看起來像是思想氣泡。</p>
</blockquote>

說明：

HTML代碼先引用speech bubbles CSS。

demodownload

您可能對以下文章也感興趣

• 很酷的鼠標(biāo)懸停提示文字插件Hint.css【純css實(shí)現(xiàn)】
• CSS3+jQuery輕松實(shí)現(xiàn)工具提示(Tooltips)
• 純CSS3工具提示(Tooltips)【實(shí)例演示/源碼下載】

標(biāo)簽: css  css3  對話框  對話氣泡  語音泡沫  Tooltips