<p> Fire </p>
body {background-color: black;}
@keyframes fire {
0% {
text-shadow:
0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;
}
33% {
text-shadow:
10px -90px 80px #fefcc9,
0 0 20px #feec85,
10px -10px 30px #ffae34,
-20px -20px 40px #ec760c,
20px -40px 50px #cd4606,
-20px -60px 60px #973716,
0 -80px 70px #451b0e;
}
66% {
text-shadow:
0 0 20px #fefcc9,
-20px -20px 40px #ffae34,
10px -10px 30px #feec85,
-20px -60px 60px #cd4606,
20px -40px 50px #ec760c,
10px -90px 80px #451b0e;
0 -80px 70px #973716,
}
}
p
{
color: white;
font-size: 72px;
text-align:center;
margin-top:150px;
transition: all 0.2s ease-in;
animation: fire 3s infinite;
text-shadow:
0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.