手把手教你：打造一个炫酷的文字特效

前言

想必大家在浏览网页的时候，能看到很多不一样的文字特效，会觉得十分炫酷，但是却不知道是如何实现它的。这次，我来手把手教你如何实现一个简单而又炫酷的文字特效，包你满意。

效果展示

代码块展示

实现过程

首先在Html页面将想要展示的文字一个个分开展示，用span隔开（这是为了之后方便定义动画开始时间）。代码如下所示：

<h2>
        <span>炫</span>
        <span>酷</span>
        <span>的</span>
        <span>C</span>
        <span>S</span>
        <span>S</span>
        <span>特</span>
        <span>效</span>
    </h2>

然后开始css样式的编写。实现此效果的关键是自定义一个动画效果。在这里我定义了如下动画，部分代码如下所示：

h2 span{
    animation: animate 4s linear infinite;
}

@keyframes animate {
    0%,100%{
        color: white;
        filter: blur(2px);
        text-shadow: 0 0 10px #00b4ff,
                    0 0 20px #00b4ff,
                    0 0 40px #00b4ff,
                    0 0 80px #00b4ff,
                    0 0 120px #00b4ff,
                    0 0 160px #00b4ff,
                    0 0 200px #00b4ff;
    }
    25%,75%{
        color: #000;
        filter: blur(0px);
        text-shadow: none;
    }
}

定义了一个名为animate的动画，动画的相关属性就不多描述了，在之前的文章里已经讲过很多次。这里主要介绍一下blur（）和text-shadow。

blur起着模糊效果，括号里传入的值是模糊的半径。text-shadow在之前的文章里用到过，向文本添加一个或者多个阴影，整体效果如下所示：

完成这些之后，可以开始对每个span定义动画何时开始，这样才能到达逐渐显示的效果。这里使用到animation-delay属性。

h2 span:nth-child(3){
    animation-delay: 0.2s;
}

比如如上代码则表示等待0.2s后，开始动画。

总结

看完这个，是不是对文字特效的实现方式感觉很容易了，这种特效十分容易上手。所有还对文字特效感兴趣的朋友，不妨拿这个Demo去多试试，在尝试的过程中才能体会到这种特效的实现思路以及乐趣。对于动画，无非就是使用那几个属性@keyframes，transform，transition等等，这也是我在学习动画过程中使用频繁的属性。