SCSS를 사용하여 파티클을 대량으로 생성

개요

SCSS의 random 함수를 사용하여 particle(입자)를 대량으로 생성한다.
정확히 말하면 요소 자체는 emmet에서 생성되어 SCSS에서 요소의 스타일을 정의합니다.

코드

particles.css

body {
  background: #000;
  margin: 0;
  padding: 0;
}

.main-container {
  height: 100vh;
  left: 0;
  position: absolute;
  width: 100vw;
}

.particle {
  background: #fff;
  position: absolute;
}

@for $i from 1 through 10000 {
  .particle:nth-child(#{$i}) {
    $size: random(2) + px;
    height: $size;
    width: $size;
    $x: random(10000);
    left: percentage($x/10000);
    $y: random(10000);
    top: percentage($y/10000);
  }
}

particles.html.particle*10000는 emmet로 확장됩니다.
전개에 10 몇 초의 처리 시간이 걸리므로, 여기도 무언가의 패키지를 도입해 해결하고 싶다.

<!DOCTYPE html>
<html lang="ja">
  <link rel="stylesheet" href="particles.css" />
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div class="main-container">
      .particle*10000
    </div>
  </body>
</html>

결과

SCSS를 처음 사용했지만, random 함수로 무차고차에 대량의 룰 세트를 정의할 수 있는 것은, 표현의 범위가 마치 바뀌어 온다.
다음은 잘 움직이는 애니메이션도 정의하고 싶다.

Reference

이 문제에 관하여(SCSS를 사용하여 파티클을 대량으로 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/jolypas/items/085c5b5620745922af34

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다