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 c.........完整代码请登录后点击上方下载按钮下载查看