Particles.js는 입자의 동적 배경 애니메이션을 구현합니다.

이번에는 입자 동적 배경 애니메이션을 구현하기 위한 Particles.js를 가져오겠습니다. 입자 동적 배경 애니메이션을 구현하기 위한 Particles.js의 Notes는 무엇입니까?

작업 프로세스:

인터넷에 기본적인 과정이 있으니 참고하시면 되지만, 로그인 페이지에서 직접 사용하실 경우 작은 버그가 있어 조정이 필요합니다.

1. 먼저 페이지에 입자.js 파일을 삽입합니다.

rreee

2. 페이지의 p를 입자 배치용 컨테이너로 사용합니다. [보통 하단에 배치되는데 CSS 개선 필요]

<script src="js/particles.js"></script>

3. 구성 파일 로드: 인터넷에 따르면 load() 메서드를 사용하면 구성 json 파일을 가져와야 하는데, light path가 나를 무력하게 만듭니다.

                                                 공식 데모 http://codepen.io/VincentGarreau/pen/pnlso

를 참조하세요. >                                            js

<p id="particles"></p>
<style type="text/css">
 #particles {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1; //这个z-index 要是不设置 会对登录表单的点击产生干扰，会去抢风头，不好好做一个安静的背景。
  background-color: #26AFE3;
 }
</style>

로 직접 작성 4. 매개변수 옵션을 구성하고 사용합니다. 옵션 github 공식 웹사이트 페이지에 자세한 내용이 있습니다. 입자 수, 이동 속도 등을 제어하세요.

크롬에서 파일을 다운로드한 후 이 페이지로 전환하면 파티클 사용에 여전히 몇 가지 문제가 있습니다. 해결책을 기다리십시오.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Vue-router의 라우팅 메타 정보 사용에 대한 자세한 설명

vue에서 Particles.js 라이브러리를 사용하는 방법

위 내용은 Particles.js는 입자의 동적 배경 애니메이션을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!