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

实现火焰文字实例描述在浏览页面时，经常会看到文字的火焰效果。本实例将使用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代码，定义一个
标签，在该标签中设置文字，代码如下：

星星之火可以燎原

【文字和页面特效——实现火焰文字】（2）在页面中编写CSS代码，首先为body元素设置样式，然后为div元素设置样式，应用text-shadow属性为文字设置阴影，并应用animation属性设置动画，最后应用@keyframes规则创建动画，实现文字的火焰效果。关键代码如下：

="text/css"> body{ font-size:120px; /*设置字体大小*/ font-weight:bold; /*设置字体粗细*/ font-family:'微软雅黑'; /*设置字体*/ background:#000; /*设置页面背景颜色*/ color:#fff; /*设置文字颜色*/ text-align:center/*设置文字居中*/ } div{ text-shadow:0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 0 -80px 70px #f38e1c; /*设置文字阴影*/ -webkit-animation: flame 2s infinite; /*设置动画*/ } @-webkit-keyframes flame{/*创建动画*/ 0%{ text-shadow:0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 0 -80px 70px #f38e1c; } 30%{ text-shadow:0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 10px -90px 80px #f38e1c; } 60%{ text-shadow:0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 0px -80px 100px #f38e1c; } 100%{ text-shadow:0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 0 -80px 70px #f38e1c; } }