文字和页面特效——实现火焰文字

实现火焰文字

实例描述

在浏览页面时，经常会看到文字的火焰效果。本实例将使用CSS3来实现文字的燃烧效果。运行本实例，在页面中会输出几个燃烧的火焰文字，结果如图所示。

技术要点

在本实例中，实现文字的火焰效果主要使用了CSS3中的text-shadow属性和animation属性，通过text-shadow属性向文本添加多个阴影，通过animation属性设置动画。text-shadow属性的语法格式如下：

text-shadow: h-shadow v-shadow blur color;

参数说明：

l h-shadow：必选参数，用于设置水平阴影的位置，可以为负值。

l v-shadow：必选参数，用于设置垂直阴影的位置，可以为负值。

l blur：可选参数，用于设置模糊的距离。

l color：可选参数，用于设置阴影的颜色。

l animation属性的语法格式如下：

animation: name duration timing-function delay iteration-count direction;

参数说明如表所示。

animation属性的参数说明

参 数	描 述
name	规定需要绑定到选择器的keyframe名称
duration	规定完成动画需要的时间，单位为秒
timing-function	规定动画的速度曲线
delay	规定在动画开始之前的延迟
iteration-count	规定动画应该播放的次数
direction	规定是否应该轮流反向播放动画

代码实现

（1）新建index.html文件，在文件中编写HTML代码，定义一个

标签，在该标签中设置文字，代码如下：

<div>星星之火可以燎原</div>