这是一个非常酷的css3火焰文字效果。只需10行代码就可以实现css3火焰文本效果，效果特别酷。

HTML结构

使用任意元素来包裹要实现火焰文字特效的文字。

<span class="text-effect">jQuery之家</span>

然后通过下面的CSS代码来实现文字的火焰特效。

.text-effect{
display: block;
font-size: 130px;
color: #fff;
text-align: center;
text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red;
position: relative;
}
@media only screen and (max-width: 990px){
.text-effect{ font-size: 100px; }
}
@media only screen and (max-width: 767px){
.text-effect{ font-size: 80px; }
}
@media only screen and (max-width: 479px){
.text-effect{ font-size: 50px; }
}

在线预览 网盘下载