Sirius

by Sirius_Bor6

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>candle</title>
        <link rel="stylesheet"  href="c_style.css">
    </head>
    <body>
<div class="g-candle">
  <div class="g-body"></div>
  <div class="g-fire-box">
    <div class="g-fire">
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
      <div class="g-ball"></div>
     ...

CSS

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
}

.g-candle {
  position: aboslute;
  width: 400px;
  margin: 0 auto;
  height: 400px;
}

.g-body {
  position: relative;
  width: 100px;
  height: 300px;
  margin: 280px auto;
  background: linear-gradient(230deg, #ca9800, #573903, black 70%);
  z-index: 1;
}
.g-body::before {
  position: absolute;
  content: "";
  width: 100px;
  height: 40px;
  border-radius: 50%;
  box-sizing: border-box;
  top: -20px;
  background: radial-gradient(#a46800, #5c3104 45%, #905602 100%);
}
.g-body::after {
  position: absolute;
  content: "";
  width: 4px;
  height: 48px;
  background: #fff;
  left: 50%;
  top: -22px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 60%, #fff);
  opacity: .7;
  -webkit-filter: blur(1px);
          filter: blur(1px);
}

.g-fire-box {
  position: absolute;
  top: 97px;
  left: 50%;
  width: 80px;
  height: 200px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-filter: blur(2px) contrast(20);
          filter: blur(2px) contrast(20);
}

.g-fire {
  position: absolute;
  top: 30px;
  left: 50%;
  border-radius: 45%;
  box-sizing: border-box;
  border: 120px solid #000;
  border-bottom: 120px solid transparent;
  -webkit-transform: translate(-50%, 0) scaleX(0.45);
          transform: translate(-50%, 0) scaleX(0.45);
  background-color: #761b00;
}

.g-ball {
  position: absolute;
  top: 60px;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  background: #fa8763;
  border-radius: 50%;
  z-index: -1;
  mix-blend-mode: screen;
}

.g-ball:nth-child(0) {
  width: 38px;
  height: 38px;
  left: calc(65px - 55px);
}

.g-ball:nth-child(0) {
  -webkit-animation: movetop 1s linear -0.421s infinite;
          animation: movetop 1s linear -0.421s...