Flame | Learning Axis

HTML

CSS

body{
            height: 95vh;
            display: grid;
            place-items: center;
            background: black;
        }
        .flame-box{
            height: 60px;
            width: 60px;
            transform-origin: center bottom;
            animation: flicker 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 flicker{
            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);}
        }