Css3中怎么给字体带上火焰效果

这篇文章主要介绍“Css3中怎么给字体带上火焰效果”,在日常操作中,相信很多人在Css3中怎么给字体带上火焰效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Css3中怎么给字体带上火焰效果”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

专注于为中小企业提供成都网站设计、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业罗山免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

html:

<body>

<p>光芒万丈</p>

</body>

css:

<style>

body{ font-size:120px; font-family:'微软雅黑'; background:#000; color:#fff;}

@-webkit-keyframes test{

0%{

text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;

}

30%{

text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,10px -90px 80px #f38e1c;

}

60%{

text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0px -80px 100px #f38e1c;

}

100%{

text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;

}

}

p{font-weight:bold; color:#fff;

text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;

animation:1s test linear infinite;

}

</style>

到此,关于“Css3中怎么给字体带上火焰效果”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!

分享标题:Css3中怎么给字体带上火焰效果
URL网址:https://www.cdcxhl.com/article16/pjsddg.html

成都网站建设公司_创新互联,为您提供网站制作微信公众号品牌网站制作定制网站网页设计公司网站维护

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

手机网站建设