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

代码语言：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 class="functions btn-group"></div>
        <div class="rotate btn-group">
            <div class="btn rotatex" data-rotate="x">rotatex</div>
            <div class="btn rotatey" data-rotate="y">rotatey</div>
            <div class="btn rotatez" data-rotate="z">rotatez</div>
        </div>
    </div>
    <canvas width="2560" height="1000" style="min-width: 1000px; width: 100%; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%)"></canvas>

    <script>
        var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

        function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

        function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

        function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

        var Point = function (_F3$Obj) {
            _inherits(Point, _F3$Obj);

            function Point() {
                var radius = arguments.length > 0 && arguments[0] !== u.........完整代码请登录后点击上方下载按钮下载查看