实现火焰文字

实例描述

在浏览页面时，经常会看到文字的火焰效果。本实例将使用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>

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

<style type="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;}
}
</style>

文字和页面特效——实现火焰文字相关推荐

css3 火焰文字,CSS3-CSS3源码之火焰文字特效
这是一个非常酷的css3火焰文字效果.只需10行代码就可以实现css3火焰文本效果,效果特别酷. HTML结构使用任意元素来包裹要实现火焰文字特效的文字. jQuery之家然后通过下面的CSS代码 ...
HTML5火焰文字特效DEMO演示---转载
只有google支持 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
html5 火焰效果图,css3火焰文字特效
这是一款效果非常炫酷的css3火焰文字特效.该css3火焰文字特效仅用10行代码就可以实现,效果特别炫酷. 使用方法 HTML结构使用任意元素来包裹要实现火焰文字特效的文字. jQuery之家 CS ...
html5火焰字体效果,CSS3文字特效属性text-shadow如何实现火焰文字的效果
CSS3文字特效属性text-shadow如何实现火焰文字的效果发布时间:2020-07-14 09:15:52 来源:亿速云阅读:177 作者:Leah 本篇文章给大家分享的是有关CSS3文字特 ...
【有利可图网】PS教程：简单制造火焰文字特效
简单几步用滤镜制作火焰文字特效,很简单的操作,大家可以动手试试~ 1.新建图层,大小随意,背景选择黑色 2.输入文字,字体可自由选择,缩放到合适大小 3.在菜单栏中,执行图像>旋转画布>逆 ...
wps文档怎么给整段文字加框_WPS文字技巧—如何为WPS文档增加页面特效边框
在一些特殊的WPS文档排版中,我们常常需要为它增加一些特殊的设置,但是一些新手小伙伴却不知道怎么设置?下面我们就来给大家分享一个在WPS文字你不可不知的小秘密-如何为WPS文档增加页面特效边框,能够快 ...
html语言鼠标悬停特效,CSS3鼠标悬停文字幻影动画特效
这是一款CSS3鼠标悬停文字幻影动画特效.该特效利用before和after伪元素来制作当鼠标悬停在超链接文本上的时候的幻影效果. 使用方法在页面中引入bootstrap.css.jquery和ph ...
jquery 立体走马灯_jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...
js在html中加文字走马灯特效,jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...

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

实现火焰文字

实例描述

技术要点

代码实现

文字和页面特效——实现火焰文字相关推荐

最新文章

热门文章