话不多说，我就直接先上图吧！

（截图技术不好，强迫症的同学请见谅）

说起特效，很多同学都会想到动画效果，当然，我做的这个特效动画也是必不可少的，但是只依靠单纯的文字动画效果是不能达到上图所示的烟雾效果的，这个时候就需要用到我们所学习的另一个很重要的知识点了那就是我们学习过的CSS3的文本阴影效果。

话不多说，我们直接开始吧！

第一步：就是先实现动画前的效果，之前有说过，光靠文字的特效无法实现烟雾效果，所以我们要先通过文本阴影效果先实现第一个图所显示的效果。

这个效果其实非常简单，我们先给整个body设置一个黑色的背景色，然后把颜色设置为透明，然再之后将要施加特效的文字设置一个阴影颜色，最后将文字做一下居中处理就好了。

body{

background-color: black;

color: transparent;

text-align: center;

}

span {

  display: inline-block;

  text-shadow: 0 0 0 whitesmoke;

  margin-top: 300px;

  font-size: 40px;

}

这样我们动画前的效果就做好了！

接下来就是最重要的一个动画效果的制作了。

其实动画效果也是比较简单的，直接上代码吧！

@keyframes smoky {

  60% {

    text-shadow: 0 0 40px whitesmoke;

  }

  to {

transform: translate(300px, -150px) rotate(-60deg) skewX(70deg) scale(1.3);

    text-shadow: 0 0 20px whitesmoke;

    opacity: 0;

  }

}

这里面，rotate是阴影的偏移角度（也就是烟雾飘向的方向），translate就是阴影的偏移位置（也就是烟雾要飘多远），skew是控制阴影的一个翻转效果，以达到一个更逼真的烟雾的效果，scale的放大效果就是制造一个烟雾四散的感觉。

可能有些同学会比较奇怪，在开始设置文本阴影的时候我是没有设置模糊距离的，为什么动画开始是直接设置的40px的模糊距离。还有为什么动画是直接从60%开始而不是我们常用的从0%开始。

这两个问题当你们自己尝试制作的时候就会明白了，如果动画开始不设置模糊距离的话，那么最初的烟雾是这样的

（这里要说明的一下是我是将要做成特效的这一段文字的每一个字都是用单独的span标签包起来的，当然，整段话一起也是可以的，只是具体的实现效果不是很好）

这样的话就完全不是我们想要的烟雾效果了，只有在动画的起始阶段就给它设置一个模糊距离，我们才能看到一个比较逼真的动画效果。

而为什么直接从动画的60%同样是为了烟雾的效果更佳逼真，因为如果我们从0%直接开始的话，文字就会在一瞬间从我们开始设置的0直接变为40px的模糊距离，然后才开始动画，这样从文字直接转换成烟雾就会有一种很突兀的感觉，所以我们从60%直接开始动画，让文字变成烟雾的效果更为自然一些。

好了，简单的两步之后，我们的动画就做好了。

这个效果起始还有很多可以完善的地方，比如说我们如果需要动画结束后文字直接消失的话，可以在动画的的生效时间之后再添加一个animation-fill-mode: both属性。这样动画结束后就直接消失了。

好了，这次简单的分享就到这了，希望能够对同学们起到一点帮助吧。