如何創建CSS3模糊文本鏈接效果

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

關鍵要點

• CSS3可以通過透明文本顏色和文本陰影創建模糊文本效果，但並非所有瀏覽器都支持text-shadow屬性。在這種情況下，可以使用Modernizr或編寫自定義的文本陰影檢測代碼作為解決方法。
• 通過在懸停或聚焦時使鏈接平滑地模糊進出，可以為導航菜單實現令人愉悅的效果。這涉及定義一個“blur”類，該類可以應用於任何鏈接，然後使用可在所有瀏覽器中應用的CSS樣式。
• 創建模糊文本效果時，務必注意可訪問性和可見性問題。此外，可以通過調整第三個文本陰影屬性（定義模糊量）來控制模糊量。可以修改它以增加或減少模糊效果。

以下是一個我在Chris Coyier的CSS Tricks網站上看到的文本效果示例。可以通過應用透明文本顏色和文本陰影在CSS3中創建模糊文本：

.blur-text {
  color: transparent;
  text-shadow: 0 0 5px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
}

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

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

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

模糊鏈接

借助一些額外的CSS3魔法，我們可以使鏈接在懸停或聚焦時平滑地模糊進出。這對於導航菜單來說可能是一個令人愉悅的效果。我們將定義一個“blur”類（或“blur in”類），該類可以應用於任何鏈接。鏈接將從模糊開始，並在激活時恢復正常焦點。類似地，我們將定義“blur out”類，這些類在懸停/聚焦時會模糊文本，即：

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">开始模糊，结束清晰</a>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">开始清晰，结束模糊</a>

我們現在需要基本的CSS樣式，這些樣式應用於所有瀏覽器——即使是那些不支持text-shadow的瀏覽器：

a.blur {
  text-decoration: none;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b339;
}

a.blur:hover, a.blur:focus {
  text-decoration: underline;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b933;
}

下一組樣式應用於所有.blur元素，無論它們是否具有焦點：

• 我們刪除鏈接下劃線和輪廓
• 將文本顏色設置為透明，並且
• 應用CSS3過渡，該過渡會在沒有文本陰影和完全文本陰影之間平滑地進行動畫。效果在100毫秒後開始，並在400毫秒後完成。

.blur-text {
  color: transparent;
  text-shadow: 0 0 5px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
}

最後，我們定義了兩個文本陰影狀態。第三個文本陰影屬性定義了“模糊量”。它將在0和4px之間進行動畫，但如果需要更多或更少的模糊，可以修改它：

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

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

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

(此處省略了FAQs部分，因為篇幅過長，且與原文內容高度重複。 可以根據需要選擇性地保留或重新組織FAQs，並用更簡潔的語言進行改寫。)

以上是如何創建CSS3模糊文本鏈接效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！