Home > Article > Web Front-end > Steps to implement flame effect in CSS3 fonts

Steps to implement flame effect in CSS3 fonts

php中世界最好的语言Original: 2017-11-30 11:38:282002browse

We know that CSS3 can create many cool animation effects, so today’s tutorial is how to use CSS3 font styles to create realistic flame special effects text. Let’s take a look.

html：
<body>
<p>火火火火</p>
</body>
css：
<style>
body{ font-size:120px; font-family:&#39;微软雅黑&#39;; 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>

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Steps to implement flame effect in CSS3 fonts

Related articles