CSS3模糊文本效果詳解及常見問題解答

關(guān)鍵要點(diǎn)

• CSS3可以通過透明文本顏色和文本陰影創(chuàng)建模糊文本效果，但并非所有瀏覽器都支持text-shadow屬性。在這種情況下，可以使用Modernizr或編寫自定義的文本陰影檢測代碼作為解決方法。
• 通過在懸?；蚓劢箷r(shí)使鏈接平滑地模糊進(jìn)出，可以為導(dǎo)航菜單實(shí)現(xiàn)令人愉悅的效果。這涉及定義一個(gè)“blur”類，該類可以應(yīng)用于任何鏈接，然后使用可在所有瀏覽器中應(yīng)用的CSS樣式。
• 創(chuàng)建模糊文本效果時(shí)，務(wù)必注意可訪問性和可見性問題。此外，可以通過調(diào)整第三個(gè)文本陰影屬性（定義模糊量）來控制模糊量?？梢孕薷乃栽黾踊驕p少模糊效果。

以下是一個(gè)我在Chris Coyier的CSS Tricks網(wǎng)站上看到的文本效果示例?？梢酝ㄟ^應(yīng)用透明文本顏色和文本陰影在CSS3中創(chuàng)建模糊文本：

.blur-text {
  color: transparent;
  text-shadow: 0 0 5px http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
}

不幸的是，并非所有瀏覽器都支持text-shadow。IE9及以下版本會(huì)應(yīng)用透明顏色，但沒有陰影效果——文本變得不可見。我們必須求助于Modernizr或編寫我們自己的文本陰影檢測代碼。當(dāng)瀏覽器支持它時(shí)，以下JavaScript代碼會(huì)將“textshadow”類附加到HTML元素。因此，我們可以使用“.textshadow .blur-text”的CSS選擇器來確保只有在效果不會(huì)導(dǎo)致不良行為時(shí)才應(yīng)用它：

if (document.createElement("detect").style.textShadow === "") {
  document.getElementsByTagName("html")[0].className += " textshadow";
}

警告：Opera的模糊行為Chrome和Firefox顯示模糊文本，但在IE中被禁用。但是，Opera可能很古怪；它支持text-shadow，但不希望將其應(yīng)用于透明文本。這似乎是一個(gè)錯(cuò)誤，因?yàn)閼?yīng)用rgba(0,0,0,0)的顏色可以解決這個(gè)問題。

模糊鏈接

借助一些額外的CSS3魔法，我們可以使鏈接在懸停或聚焦時(shí)平滑地模糊進(jìn)出。這對于導(dǎo)航菜單來說可能是一個(gè)令人愉悅的效果。我們將定義一個(gè)“blur”類（或“blur in”類），該類可以應(yīng)用于任何鏈接。鏈接將從模糊開始，并在激活時(shí)恢復(fù)正常焦點(diǎn)。類似地，我們將定義“blur out”類，這些類在懸停/聚焦時(shí)會(huì)模糊文本，即：

<a href="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">開始模糊，結(jié)束清晰</a>
<a href="http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">開始清晰，結(jié)束模糊</a>

我們現(xiàn)在需要基本的CSS樣式，這些樣式應(yīng)用于所有瀏覽器——即使是那些不支持text-shadow的瀏覽器：

a.blur {
  text-decoration: none;
  color: http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b339;
}

a.blur:hover, a.blur:focus {
  text-decoration: underline;
  color: http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b933;
}

下一組樣式應(yīng)用于所有.blur元素，無論它們是否具有焦點(diǎn)：

• 我們刪除鏈接下劃線和輪廓
• 將文本顏色設(shè)置為透明，并且
• 應(yīng)用CSS3過渡，該過渡會(huì)在沒有文本陰影和完全文本陰影之間平滑地進(jìn)行動(dòng)畫。效果在100毫秒后開始，并在400毫秒后完成。

.blur-text {
  color: transparent;
  text-shadow: 0 0 5px http://m.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
}

最后，我們定義了兩個(gè)文本陰影狀態(tài)。第三個(gè)文本陰影屬性定義了“模糊量”。它將在0和4px之間進(jìn)行動(dòng)畫，但如果需要更多或更少的模糊，可以修改它：

if (document.createElement("detect").style.textShadow === "") {
  document.getElementsByTagName("html")[0].className += " textshadow";
}

查看鏈接模糊演示頁面——源代碼包含所有必需的CSS和JavaScript。我希望您覺得它有用，但在使用此效果時(shí)要注意可訪問性/可見性問題。如果您在其他地方使用它，我很樂意收到您的評論并發(fā)布URL。

CSS3模糊文本效果常見問題解答(FAQs)

(此處省略了FAQs部分，因?yàn)槠^長，且與原文內(nèi)容高度重復(fù)。 可以根據(jù)需要選擇性地保留或重新組織FAQs，并用更簡潔的語言進(jìn)行改寫。)

以上是如何創(chuàng)建CSS3模糊文本鏈接效果的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！