Source codes:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title></title>
<style type=”text/css”>
body{
height: 95vh;
display: grid;
place-items: center;
background: black;
}
.flame-box{
height: 60px;
width: 60px;
transform-origin: center bottom;
animation: flameAnimation 3ms 200ms ease-in infinite alternate;
}
.flame{
bottom: 0;
position: absolute;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
transform: rotate(-45deg)
scale(1.5, 1.5);
}
.yellow{
height: 30px;
width: 30px;
left: 15px;
background: #ffd700;
box-shadow: 0px 0px 9px 4px
#ffd700;
}
.orange{
left: 10px;
width: 40px;
height: 40px;
background: #ffa500;
box-shadow: 0px 0px 9px 4px
#ffa500;
}
.red{
height: 50px;
width: 50px;
left: 5px;
background: #ff4500;
box-shadow: 0px 0px 5px 4px
#ff4500;
}
.white{
height: 30px;
width: 30px;
left: 15px;
bottom: -4px;
background: #ffffff;
box-shadow: 0px 0px 9px 4px
#ffffff;
}
.circle{
border-radius: 50%;
position: absolute;
}
.blue{
left: 25px;
bottom: -25px;
width: 10px;
height: 10px;
background: #6a5acd;
box-shadow: 0px 0px 15px 10px #6a5acd;
}
.black{
left: 10px;
bottom: -60px;
width: 40px;
height: 40px;
background: #000000;
box-shadow: 0px 0px 15px 10px #000000;
}
@keyframes flameAnimation{
0% {transform: rotate(-1deg);}
20%{transform: rotate(1deg);}
40%{transform: rotate(-1deg);}
60%{transform: rotate(1deg) scaleY(1.04);}
80%{transform: rotate(-2deg) scaleY(0.92);}
100% {transform: rotate(1deg);}
}
</style>
</head>
<body>
<div class=”flame-box”>
<div class=”red flame”></div>
<div class=”orange flame”></div>
<div class=”yellow flame”></div>
<div class=”white flame”></div>
<div class=”blue circle”></div>
<div class=”black circle”></div>
</div>
</body>
</html>
