如何在CSS3中創建發光鏈接3

>本文演示了使用CSS3創建動畫發光鏈接。 雖然上一篇文章使用文本陰影和透明文本來產生模糊效果，但該文章利用文本陰影對懸停或焦點產生髮光效果。 IE9用戶將需要一個較新的瀏覽器，因為它缺乏文本陰影支持。

>通過文本陰影和CSS3過渡的結合來實現效果。 讓我們檢查代碼。

首先，使用了HTML：使用“ Glow”類的簡單鏈接：

CSS首先定義初始狀態和過渡屬性。該過渡設置為500ms，並具有線性時序，以產生平滑的效果。 供應商前綴包括用於廣泛的瀏覽器兼容性：

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="glow">Glowing Link</a>

接下來，為懸停和焦點狀態定義了發光效果。 兩個文本遮陽，一個白色和一個黃色，用於更明顯的效果：

>示範頁面（為了安全性而省略了鏈接）顯示了效果。 實驗不同的

a.glow, a.glow:hover, a.glow:focus {
    text-decoration: none;
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15baaf;
    text-shadow: none;
    -webkit-transition: 500ms linear 0s;
    -moz-transition: 500ms linear 0s;
    -o-transition: 500ms linear 0s;
    transition: 500ms linear 0s;
    outline: 0 none;
}

和過渡屬性以自定義動畫。 >

>瀏覽器兼容性注意：

a.glow:hover, a.glow:focus {
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
    text-shadow: -1px 1px 8px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffc, 1px -1px 8px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
}

text-shadow>在現代瀏覽器（Firefox，Chrome，Safari）中效果很好。 IE9缺乏文本陰影支持。 Opera支持過渡，但可能不會將它們始終如一地應用於文本陰影上，從而導致動畫較少。 演示中的第二組鏈接使用後光線效果（更改文本顏色以匹配背景），但這使得文本在較舊的IE版本中可見。 Modernizr或文本陰影檢測腳本（下面的示例）可以解決以下內容：>

>該技術提供了一種簡單而有效的方法，可以為鏈接增加視覺興趣。 隨時分享您的創作！ 由於限制的長度，

常見問題（常見問題解答）被省略了，但原始文本提供了全面的答案。

以上是如何在CSS3中創建發光鏈接3的詳細內容。更多資訊請關注PHP中文網其他相關文章！