• particles.js粒子特效（常用登录页背景）

    1、效果图

     2、js下载

    particles.js开源地址：GitHub - VincentGarreau/particles.js: A lightweight JavaScript library for creating particles

    3、index.html引入JQ、particles.js

    1. <script src="/assets/libs/jquery/dist/jquery.min.js">script>
    2. <script src="/assets/js/particles.js">script>

    4、DOM

    2. <div id="particles-js">
    3.   <canvas class="particles-js-canvas-el" width="1920" height="1080" style="width: 100%; height: 100%;">canvas>
    4. div>

    如果页面没有显示效果，请检查canvas和父层div的高度是否有高度。

    4、参数介绍

    对应第2点的开源地址的详细文档阅读

    keyoption type / notesexample
    particles.number.valuenumber40
    particles.number.density.enablebooleantrue / false
    particles.number.density.value_areanumber800
    particles.color.valueHEX (string)
    RGB (object)
    HSL (object)
    array selection (HEX)
    random (string)    		"#b61924"
    {r:182, g:25, b:36}
    {h:356, s:76, l:41}
    ["#b61924", "#333333", "999999"]
    "random"
    particles.shape.typestring
    array selection    		"circle"
    "edge"
    "triangle"
    "polygon"
    "star"
    "image"
    ["circle", "triangle", "image"]
    particles.shape.stroke.widthnumber2
    particles.shape.stroke.colorHEX (string)"#222222"
    particles.shape.polygon.nb_slidesnumber5
    particles.shape.image.srcpath link
    svg / png / gif / jpg    		"assets/img/yop.svg"
    "http://mywebsite.com/assets/img/yop.png"
    particles.shape.image.widthnumber
    (for aspect ratio)    		100
    particles.shape.image.heightnumber
    (for aspect ratio)    		100
    particles.opacity.valuenumber (0 to 1)0.75
    particles.opacity.randombooleantrue / false
    particles.opacity.anim.enablebooleantrue / false
    particles.opacity.anim.speednumber3
    particles.opacity.anim.opacity_minnumber (0 to 1)0.25
    particles.opacity.anim.syncbooleantrue / false
    particles.size.valuenumber20
    particles.size.randombooleantrue / false
    particles.size.anim.enablebooleantrue / false
    particles.size.anim.speednumber3
    particles.size.anim.size_minnumber0.25
    particles.size.anim.syncbooleantrue / false
    particles.line_linked.enablebooleantrue / false
    particles.line_linked.distancenumber150
    particles.line_linked.colorHEX (string)#ffffff
    particles.line_linked.opacitynumber (0 to 1)0.5
    particles.line_linked.widthnumber1.5
    particles.move.enablebooleantrue / false
    particles.move.speednumber4
    particles.move.directionstring"none"
    "top"
    "top-right"
    "right"
    "bottom-right"
    "bottom"
    "bottom-left"
    "left"
    "top-left"
    particles.move.randombooleantrue / false
    particles.move.straightbooleantrue / false
    particles.move.out_modestring
    (out of canvas)    		"out"
    "bounce"
    particles.move.bounceboolean
    (between particles)    		true / false
    particles.move.attract.enablebooleantrue / false
    particles.move.attract.rotateXnumber3000
    particles.move.attract.rotateYnumber1500
    interactivity.detect_onstring"canvas", "window"
    interactivity.events.onhover.enablebooleantrue / false
    interactivity.events.onhover.modestring
    array selection    		"grab"
    "bubble"
    "repulse"
    ["grab", "bubble"]
    interactivity.events.onclick.enablebooleantrue / false
    interactivity.events.onclick.modestring
    array selection    		"push"
    "remove"
    "bubble"
    "repulse"
    ["push", "repulse"]
    interactivity.events.resizebooleantrue / false
    interactivity.events.modes.grab.distancenumber100
    interactivity.events.modes.grab.line_linked.opacitynumber (0 to 1)0.75
    interactivity.events.modes.bubble.distancenumber100
    interactivity.events.modes.bubble.sizenumber40
    interactivity.events.modes.bubble.durationnumber
    (second)    		0.4
    interactivity.events.modes.repulse.distancenumber200
    interactivity.events.modes.repulse.durationnumber
    (second)    		1.2
    interactivity.events.modes.push.particles_nbnumber4
    interactivity.events.modes.push.particles_nbnumber4
    retina_detectbooleantrue / false
  • 相关阅读:
    欧暇·地中海酒店凭借创新营销，获年轻消费者高度认可
    C++/Qt音视频通话开发MetaRTC源码解读，音频推流和拉流
    Java8新特性
    @hystrixcommand
    git分支及提交规范【AI 文心一言】
    2023秋招—大数据开发面经—多益网络
    如何开发npm依赖包，并发布到npm
    SV--随机约束（一）
    springboot集成Actuator+Prometheus+Grafana
    计算机毕业设计之交互式大学英语学习平台
  • 原文地址：https://blog.csdn.net/weixin_39921970/article/details/127651800