純CSS打造(無圖像無js)的非常流行的講話(語音)氣泡效果

2024-07-11 08:49:17

字體：大中小

供稿：網(wǎng)友

語音氣泡是一種很流行的效果，在很多社交網(wǎng)站上可以看到評(píng)論使用這樣的效果來實(shí)現(xiàn)，對(duì)于游客來說非常有吸引力，但我發(fā)現(xiàn)很多這樣的效果都是依賴于HTML或JavaScript來實(shí)現(xiàn)的非常麻煩。本教程包含各種形式的使用CSS 2.1與CSS3創(chuàng)建的漸進(jìn)增強(qiáng)氣泡效果。純CSS3打造，沒有使用圖像，沒有JavaScript，它可以應(yīng)用到您現(xiàn)有的HTML當(dāng)中。

演示：純CSS氣泡
支持：Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.。
漸進(jìn)增強(qiáng)與偽元素
簡(jiǎn)單的<div>Content</div>或 <p>Content</p>代碼，您可以產(chǎn)生語音泡沫的效果，如：

添加一個(gè)子元素，例如<blockquote><p>Quote</p></blockquote>你甚至可以產(chǎn)生語音泡沫的效果，如：

你可以根據(jù)自己的需要在現(xiàn)有的例子基礎(chǔ)上進(jìn)行改造打造自己的元素代碼。關(guān)鍵是使用 :before和:after偽元素產(chǎn)生基本形狀。
通過應(yīng)用CSS3屬性，如border-radius屬性和transform就可以產(chǎn)生更復(fù)雜的形狀和方位。

示例代碼
這是一個(gè)例子，如何創(chuàng)建一個(gè)基本的語音泡沫形狀。進(jìn)一步的示例，可以查看演示頁和CSS文件，

復(fù)制代碼

上一篇：分享30個(gè)新鮮的CSS3打造的精美絢麗效果(附演示下載)

下一篇：ipad 豎版純CSS判斷ipad橫版和豎版