canvas三维粒子波纹动画效果代码-html代码-BFW代码库

canvas三维粒子波纹动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas三维粒子波纹动画效果代码，可设置修改参数。

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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">


    <style>
        * {
          margin: 0;
          padding: 0;
        }

        body, html {
          width: 100%;
          height: 100%;
          position: relative;
        }

        body {
          background: radial-gradient(circle, #6d2717, #0c0000);
        }

        canvas {
          pointer-events: none;
        }

        a, a:focus {
          position: fixed;
          top: 0;
          left: 0;
          margin: 25px;
          color: #ddd;
        }

        .controls {
          width: 500px;
          display: inline-block;
          position: absolute;
          top: 20px;
          left: 50%;
          transform: translate(-50%, 0);
        }

        .btn-group {
          display: inline-block;
        }

        .btn {
          display: inline-block;
          margin-bottom: 0;
          font-weight: 500;
          text-align: center;
          -ms-touch-action: manipulation;
          touch-action: manipulation;
          cursor: pointer;
          background-image: none;
          border: 1px solid transparent;
          white-space: nowrap;
          line-height: 1.5;
          padding: 4px 15px;
          font-size: 12px;
          border-radius: 0px;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
          transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
          position: relative;
          color: rgba(0, 0, 0, 0.65);
          background-color: #fff;
          border-color: #d9d9d9;
        }

        .btn:first-child {
          border-radius: 4px 0 0 4px;
        }

        .btn:last-child {
          border-radius: 0 4px 4px 0;
        }

        .btn.active {
          color: #fff;
          background-color: #dc7953;
          border-color: #dc7953;
        }

        .rotate {
          margin-left: 20px;
        }

        .rotate .btn {
          border: none;
          border-radius: 20px;
        }
    </style>
</head>
<body>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jwmeyy.js"></script>
    <div class="controls">
        <div .........完整代码请登录后点击上方下载按钮下载查看