How to bring Flame effect to fonts in Css3
This article mainly introduces "how to bring the flame effect to the font in Css3". In the daily operation, I believe that many people have doubts about how to bring the flame effect to the font in Css3. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful for you to answer the doubt of "how to bring the flame effect to the font in Css3"! Next, please follow the editor to study!
Html:
casts a thousand beams
Css:
Body {font-size:120px; font-family:' Microsoft Yahei'; 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 f38e1c 0-80px 70px # f38e1c
}
30% {
Text-shadow:0 0 20px # fefcc9,10px-10px 30px # feec85,20px-20px 40px # ffae34,20px-40px 50px # f3d131 Magi 10px-90px 80px # f38e1c
}
60% {
Text-shadow:0 0 20px # fefcc9,10px-10px 30px # feec85,20px-20px 40px # ffae34,20px-40px 50px # f3d131 f38e1c 0PX-80px 100px # f38e1c
}
100% {
Text-shadow:0 0 20px # fefcc9,10px-10px 30px # feec85,20px-20px 40px # ffae34,20px-40px 50px # f3d131 f38e1c 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 f38e1c 0-80px 70px # f38e1c
Animation:1s test linear infinite
}
At this point, the study on "how to bring flame effect to fonts in Css3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
