技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營

贊助商

分類目錄

贊助商

最新文章

搜索

純CSS對(duì)話框/對(duì)話氣泡/語音泡沫/speech bubbles【27個(gè)示例】

作者:admin    時(shí)間:2020-9-22 14:31:36    瀏覽:

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

一、基本氣泡

基本氣泡

基本氣泡

HTML代碼(16個(gè)基本氣泡示例):

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

說明:

HTML代碼先引用speech bubbles CSS。

demodownload

二、簡單氣泡

 簡單氣泡

簡單氣泡

HTML代碼(4個(gè)簡單氣泡示例):

<blockquote class="example-right">
<p>設(shè)計(jì)是針對(duì)人類的。 設(shè)計(jì)就是通過識(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)建它們,我花更多的時(shí)間來撰寫有關(guān)實(shí)驗(yàn)或項(xiàng)目的博客文章。</p>
</blockquote>

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

說明:

HTML代碼先引用speech bubbles CSS。

demodownload

三、復(fù)雜氣泡

復(fù)雜氣泡

復(fù)雜氣泡

HTML代碼(7個(gè)復(fù)雜氣泡示例):

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

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

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

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

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

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

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

說明:

HTML代碼先引用speech bubbles CSS。

demodownload

您可能對(duì)以下文章也感興趣

x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */