如何在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中文网其他相关文章！