.flame
View Compiled
body{
background:#000;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.flame{
width:150px;
height:150px;
background:linear-gradient(-45deg, red, orange);
border-radius: 150px 150px 0px 150px;
transform:rotate(-135deg);
animation:.1s flame infinite;
filter:blur(10px);
position:relative;
box-shadow:17px 20px 90px #700;
border:45px solid black;
border-left-width:25px;
border-top-width:25px;
&:after,
&:before{
content:'';
width:100px;
height:100px;
display:block;
position:absolute;
background:linear-gradient(-45deg, red, orange);
animation:.2s flame infinite;
transform:scale(.8) rotate(20deg);
border-radius: 100px 100px 0px 100px;
top:20px;
}
&:before{
top:0;
animation-duration:.09s;
transform:scale(.9) rotate(-15deg) translate(10px, 0px);
}
}
@keyframes flame{
0% {height:150px; width:150px;}
50% {height:140px; width:140px;}
100% {height:150px; width:150px;}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.