particles实现透明点线粒子变换canvas效果代码-html代码-BFW代码库

particles实现透明点线粒子变换canvas效果代码

代码语言：html

所属分类：粒子

代码描述：particles实现透明点线粒子变换canvas效果代码，点击可生成新的粒子线条。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style>
        @charset "utf-8";
    @import url(https://fonts.googleapis.com/css?family=Lato:400,300,100);
    body {
      font-family: "Lato";
      background: #417bff;
      overflow: hidden;
      height: 100%; 
      width: 100%;
      -webkit-font-smoothing: antialiased;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
    }
    
    #particles-js, #parallax, .layer, .some-space, .some-more-space {
      height: 100%;
      position: absolute;
      width: 100%;
    }
    
    #particles-js {
      opacity: 0.6;
    }
    
    h1 {
      color: white;
      font-size: 5em;
      font-weight: 100;
      letter-spacing: 0.2em;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate3d(-50%, -50%, 0);
              transform: translate3d(-50%, -50%, 0);
    }
    
    a {
      color: white;
      border: 1px solid white;
      display: table;
      position: absolute;
      top: 60%;
      left: 50%;
      letter-spacing: 0.05em;
      -webkit-transform: translate3d(-50%, -50%, 0);
              transform: translate3d(-50%, -50%, 0);
      text-decoration: none;
      transition: all 200ms ease;
      padding: 10px 15px;
    }
    a:hover {
      background: white;
      color: black;
    }
    
    .some-space {
      animation: rotate 18s 0.5s infinite linear reverse;
    }
    
    .some-more-space {
      -webkit-animation: rotate 15s 0.1s infinite linear;
              animation: rotate 15s 0.1s infinite linear;
    }
    
    @-webkit-keyframes rotate {
      0% {
        -webkit-transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);
                transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);
      }
      100% {
        -webkit-transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);
                transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);
      }
    }
    
    @keyframes rotate {
      0% {
        -webkit-transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);
                transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);
      }
      100% {
        -webkit-transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);
                transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);
      }
    }
    </style>

</head>

<body>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/particles-min.js"></script>

    <div id="parallax">
        <div class="layer" data-depth="0.6">
            <div class="some-space">
                <h1>bfw.wiki</h1>
            </div>
        </div>
        <div class="layer" data-depth="0.4">
            <div id="particles-js"></div>
        </div>
    </div>

    <script>
        ;(function($, window, document, undefined) {
        
          // Strict Mode
          'use strict';
        
          // Constants
          var NAME = 'parallax';
          var MAGIC_NUMBER = 30;
          var DEFAULTS = {
            relativeInput: false,
            clipRelativeInput: false,
            calibrationThreshold: 100,
            calibrationDelay: 500,
            supportDelay: 500,
            calibrateX: false,
            calibrateY: true,
            invertX: true,
            invertY: true,
            limitX: false,
            limitY: false,
            scalarX: 10.0,
            scalarY: 10.0,
            frictionX: 0.1,
            frictionY: 0.1,
            originX: 0.5,
            originY: 0.5,
            pointerEvents: true,
            precision: 1
          };
        
          function Plugin(element, options) {
        
            // DOM Context
            this.element = element;
        
            // Selections
            this.$context = $(element).data('api', this);
            this.$layers = this.$context.find('.layer');
        
            // Data Extraction
            var data = {
              calibrateX: this.$context.data('calibrate-x') || null,
              calibrateY: this.$context.data('calibrate-y') || null,
              invertX: this.$context.data('invert-x') || null,
              invertY: this.$context.data('invert-y') || null,
              limitX: parseFloat(this.$context.data('li.........完整代码请登录后点击上方下载按钮下载查看