投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / 文字广告 / CSS3实现火焰文字特效插件
CSS3实现火焰文字特效插件
标签:

插件介绍

    这是一款效果非常炫酷的css3火焰文字特效。该css3火焰文字特效仅用10行代码就可以实现,效果特别炫酷。

    浏览器兼容性

    浏览器兼容性
    时间:2018-07-26
    阅读:

CSS3实现火焰文字特效插件

简要教程

这是一款效果非常炫酷的css3火焰文字特效。该css3火焰文字特效仅用10行代码就可以实现,效果特别炫酷。

HTML结构

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

<span class="text-effect">站长天下</span>

CSS3

然后通过下面的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; }
}


下一篇:没有了