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

发布时间:2022-03-08 10:47:14 作者:iii
来源:亿速云 阅读:157

这篇文章主要介绍“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中怎么给字体带上火焰效果”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. css3如何实现字体凹陷凸出效果
  2. css如何给字体加阴影效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3

上一篇:CSS3选择器的分类有几种

下一篇:如何使用css实现浮动布局

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》