Particle Effect only CSS

Demo & Code

How to create an animated particle background using CSS and JavaScript - the CSS-only approach

...

codepen.io

[Demo] Particle Effect only CSS

dd-stuff.tistory.com

<html>
<head>
<style>
/* SCSS 시작*/
  body {
    background: #ecf3f3;
  }

  .particle {
      position: absolute;
      border-radius: 50%;
  }

  /* 파티클이 생성되는 위치를 조정하려면 transform 속성값의 random함수 내의 수치를 조절하면 됨 */
  @for $i from 1 through 30 {
      @keyframes particle-animation-#{$i} {
          100% {
              transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
          }
      }

      .particle:nth-child(#{$i}){
          animation: particle-animation-#{$i} 60s infinite;
          $size: random(5) + 5 + px;
          opacity: random(100)/100;
          height: $size;
          width: $size;
          animation-delay: -$i * .2s;
          transform: translate3d((random(90) * 1vw), (random(90) * 1vh), (random(100) * 1px));
          background: hsl(random(360), 70%, 50%);
      }
  }
/* SCSS 끝*/
</style>
</head>

<body>
  <div id="particle-container">
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
  </div>
</body>
</html>

SCSS to CSS

SCSS 구문을 아래의 변환 사이트에서 CSS로 변환하여 사용.

Best SCSS to CSS Converter

Secure and Best way to convert SCSS to CSS format Online.

jsonformatter.org