当前位置:Gxlcms > css > Css3字体做出火焰效果的实现步骤

Css3字体做出火焰效果的实现步骤

时间:2021-07-01 10:21:17 帮助过:42人阅读

我们知道,CSS3是可以做出很多酷炫的动画效果,那么今天的教学就是如何用CSS3的字体样式做出逼真的火焰特效文字,我们一起来看一下。

  1. html:
  2. <body>
  3. <p>火火火火</p>
  4. </body>
  5. css:
  6. <style>
  7. body{ font-size:120px; font-family:'微软雅黑'; background:#000; color:#fff;}
  8. @-webkit-keyframes test{
  9. 0%{
  10. text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;
  11. }
  12. 30%{
  13. text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,10px -90px 80px #f38e1c;
  14. }
  15. 60%{
  16. text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0px -80px 100px #f38e1c;
  17. }
  18. 100%{
  19. text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;
  20. }
  21. }
  22. p{font-weight:bold; color:#fff;
  23. text-shadow:0 0 20px #fefcc9,10px -10px 30px #feec85,20px -20px 40px #ffae34,20px -40px 50px #f3d131,0 -80px 70px #f38e1c;
  24. animation:1s test linear infinite;
  25. }
  26. </style>


相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

相关阅读:

让div宽度自适应教学

网页的效果图与DIV+CSS关系

网页中使用h标签的开发经验

以上就是Css3字体做出火焰效果的实现步骤的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行