Vue 파티클 효과 예시 공유

이 글은 주로 Vue 파티클 효과의 샘플 코드를 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

성취 효과:

예, 위에 보이는 성좌도와 유사한 점과 선은 vue-particles에 의해 생성되며 사용자 마우스 이벤트와 상호 작용할 수 있습니다.

포털: vue-particles

사용 튜토리얼

npm install vue-particles --save-dev

main.js 파일:

import Vue from 'vue' 
import VueParticles from 'vue-particles' 
Vue.use(VueParticles)

App.vue 파일 - 간단한 예:

<template> 
  <p id="app">
   <vue-particles color="#dedede"></vue-particles>
  </p>
 </template>

앱 . 전체 예:

<template> 
  <p id="app">
   <vue-particles
    color="#dedede"
    :particleOpacity="0.7"
    :particlesNumber="80"
    shapeType="circle"
    :particleSize="4"
    linesColor="#dedede"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
    clickMode="push"
   >
   </vue-particles>
  </p>
 </template>

속성:

• color: 문자열 유형. 기본값은 '#dedede'입니다. 입자 색상.

• particleOpacity: 숫자 유형. 기본값은 0.7입니다. 입자 투명성.

• particlesNumber: 숫자 유형. 기본값은 80입니다. 입자 수.

• shapeType: 문자열 유형. 기본값은 '원'입니다. 사용 가능한 입자 모양 유형은 "원", "가장자리", "삼각형", "다각형", "별"입니다.

• 입자 크기: 숫자 유형. 기본값은 80입니다. 개별 입자 크기.

• linesColor: 문자열 유형. 기본값은 '#dedede'입니다. 선 색상.

• linesWidth: 숫자 유형. 기본값 1. 선 너비.

• lineLinked: 부울 유형. 기본값은 true입니다. 케이블을 사용할 수 있나요?

• lineOpacity: 숫자 유형. 기본값은 0.4입니다. 라인 투명도.

• linesDistance: 숫자 유형. 기본값은 150입니다. 라인 거리.

• moveSpeed: 숫자 유형. 기본값 3. 입자 이동 속도입니다.

• hoverEffect: 부울 유형. 기본값은 true입니다. 호버 효과가 있나요?

• hoverMode: 문자열 유형. 기본값은 true입니다. 사용 가능한 호버 모드는 "grab", "repulse", "bubble"입니다.

• clickEffect: 부울 유형. 기본값은 true입니다. 클릭효과가 있나요?

• clickMode: 문자열 유형. 기본값은 true입니다. 사용 가능한 클릭 모드는 "push", "remove", "repulse", "bubble"입니다.

관련 추천:

캔버스는 눈부신 입자 이동 효과를 구현합니다

3JS는 별이 빛나는 하늘 입자 이동 효과 예제 공유를 구현합니다.

캔버스를 사용하여 입자 분수 애니메이션 효과를 만드는 방법

위 내용은 Vue 파티클 효과 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!