Animated particles background made with only CSS no JavaScript.

 Animated particles background for website made with only CSS.

HTML Code:

       <div id="janak">
    <div class="loader">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>
  </div>
   

CSS Code:

          * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #janak {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      overflow: hidden;
      background-color: #001f25;
    }

    .loader {
      position: relative;
      width: 250px;
      height: 300px;
    }

    .loader span {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: rotate(calc(36deg * var(--i)));
      cursor: pointer;
    }

    .loader span::before {
      content: "";
      position: absolute;
      box-sizing: border-box;
      top: 0;
      left: 0;
      width: 15px;
      height: 15px;
      background-color: rgba(253, 238, 188, 0.363);
      border: 4px solid #00efff;
      border-radius: 25%;
      box-shadow: 0 0 20px #00efff, -30px -30px 0 #00efff, -30px -30px 20px #00eeff,
        30px 30px 0 #00efff, 30px 30px 20px #00efff, -30px 30px 0 #00efff,
        -30px 30px 20px #00efff;
      animation: animate 5s linear infinite;
      animation-delay: calc(-0.12s * var(--i));
      transform-origin: 2px;
      transition: 1.5s;
    }

    .loader span::before {
      transform-origin: 250px;
      box-shadow: 0 0 20px #00efff, -100px -200px 0 #00efff,
        -500px -200px 20px #00efff, 800px 200px 0 #00efff, 600px 200px 20px #00efff,
        700px -200px 0 #00efff, 100px -200px 20px #00efff, -300px 200px 0 #00efff,
        -900px 200px 20px #00efff;
    }

    .loader:active span::before {
      transform-origin: 250px;
      box-shadow: 0 0 20px #00efff, -100px -200px 0 #00efff,
        -500px -200px 20px #00efff, 800px 200px 0 #00efff, 600px 200px 20px #00efff,
        700px -200px 0 #00efff, 100px -200px 20px #00efff, -300px 200px 0 #00efff,
        -900px 200px 20px #00efff;
    }

    @keyframes animate {
      0% {
        transform: rotate(0deg);
        filter: hue-rotate(0deg);
      }

      100% {
        filter: hue-rotate(720deg);
        transform: rotate(360deg);
      }
    }