Css3字体做出火焰效果的实现步骤
程序员文章站
2022-03-17 13:22:03
...
我们知道,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字体做出火焰效果的实现步骤的详细内容,更多请关注其它相关文章!