CSS3炫酷的发光文字制作

作者:课课家教育更新于： 2016-09-18 17:35:41

      大家平常浏览一些展示型网站或者个性化网站时，有没有发现这样一些文字：当我们将鼠标滑过文字时，文字就会模拟发光动画,展现出非常酷的发光画面。这种效果就是一款基于纯css3的文字发光特效，你是不是觉得这些效果很酷？你是不是想自己制作一款，但又不知道方法？没关系，下文将向大家细细讲述制作的方法。

　　下面就让我们从一张白纸开始制作这样的特效。

　　早在CSS1时代，我们就可以通过hover伪类的方式让文字在鼠标移过的时候更改颜色，来看看下面的html代码：

　　注意代码红色加亮的部分，发光文字应用了glow样式。在CSS定义中，跟glow相关的样式一共有两个，分别为glow和glow:hover

　　glow定义了正常状态下的颜色为纯红(#FF0000)，而glow:hover则定义了鼠标移过时的颜色为纯白(#FFFFFF)

　　运行代码，效果如下图所示。

　　若鼠标移到发光文字上，则效果将发生如下变化。

　　然而这仅仅是简单地从一种颜色直接切换到另一种颜色，没有任何动画效果。在CSS3诞生之前，我们需要编写较为复杂的js才能实现两种状态之间的动画过渡。

　　现在，用CSS3即可轻松实现：

　　注意红色加亮的部分，我们为glow样式新增了4个属性，其值均为color2s。实际上，它们的功能完全一样，只是为了兼容不同的浏览器，无前缀的代表IE，moz前缀代表Firefox，webkit前缀代表Safari和Chrome内核的浏览器，o前缀代表Opera。

　　再来看看属性值，color代表要为颜色属性添加过渡效果，2s代表过渡的总时间为两秒，两个单词用英文空格隔开。

　　再次运行，鼠标移过文字时，其颜色将从纯红缓慢地过渡到纯白，如下图所示。

　　颜色的过渡仍显得有点单调。要实现更逼真的发光效果，我们应该在文字的外边缘添加一个模糊的光圈。在CSS里，我们可以通过text-shsdow属性实现这一效果：

　　text-shADOw中的4个数值分别代表x方向上的偏移，y方向上的偏移，发光大小和发光颜色，它们用英文空格隔开。

　　再次运行，效果如下图所示。

　　为了实现鼠标移过的时候才显示发光，我们应该把text-shadow属性移动到glow:hover样式中，同时为text-shadow添加过渡：

　　要实现多个属性同时过渡，方法是用英文逗号进行分隔。

　　再次运行，效果如下图所示。

　　鼠标移到文字上，文字将缓慢过渡为纯白，同时扩散出橙色的光圈，如下图所示。

　　缓慢过渡给人的感觉比较温和。如果要加强视觉冲击力，实现诸如闪亮登场的效果，那我们就需要调整过渡的方式，让鼠标移过的时候有一个突变。

　　这时候，transition反而不好使了，去掉的话又没有动画效果，怎么办？

　　不用担心，CSS3还为我们提供了另一个更强大的动画属性：animation。

　　学习animation需要了解@keyframes规则，具体如下。

　　@keyframes tween{

　　from{color:#FF0000;}

　　to{color:#FFFFFF;}

　　}

　　其中from定义初始时的状态，to定义结束时的状态。

　　跟transition相类似，@keyframes也需要兼容多浏览器。

　　@keyframes tween

　　@-moz-keyframes tween

　　@-webkit-keyframes tween

　　@-o-keyframes tween

　　定义好@keyframes以后，我们通过animation把@keyframes绑定进去，代码如下。

　　再次运行，文字从纯白变到纯红的动画自动播放，无需鼠标移到文字上面。

　　为了让动画在鼠标移到文字上面才播放，我们应该把animation移动到glow:hover样式中，同时适当缩短动画播放的时间。

　　调整后的代码如下。

　　再次运行，鼠标移到文字上，文字就会突然闪一下，然后又过渡回初始的状态，视觉冲击力较之前增强了不少。

　　我们还可以把发光效果也实现到animation上，同时实现循环播放。

　　以上代码中，linear代表匀速过渡（默认值），infinite代表无限循环，alternate代表在一次播放结束以后要倒着播一遍，从而有效避免动画直接跳回到初始状态时发生突变。

　　大家可以删除代码中的alternate观察效果的变化。

　　最后要跟大家说的是，text-shadow属性支持设置多个光圈，所以，为了让最后的效果更炫，我们可以多写几个shadow，然后光效的冲击力足以让文字不再需要有太多的颜色变化了。

　　受篇幅所限，此处只展示其中一个@keyframes定义。

　　调整好@keyframe以后，由于字体颜色没有动画了，所以glow:hover需要重新补回color:#FFFFFF这项属性。

　　再次运行，效果如下图所示。至此，这款酷炫的CSS3发光字体就大功告成了。

　　你可以按上述教程，使用更好看的字体或者自己喜欢的颜色来继续美化本实例的效果，这一步就留给大家自由发挥吧！期待你们能做出更好更炫的作品。