原生js结合css实现波纹炫动动画效果-html代码-BFW代码库

原生js结合css实现波纹炫动动画效果

代码语言：html

所属分类：动画

代码描述：原生js结合css实现波纹炫动动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
  width: 100%;
  height: 100%;
  background: #050510;
  overflow: hidden;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(#120616, #050510);
  display: flex;
  align-items: center;
  justify-content: center;
}

#canvas {
  width: 100%;
  height: auto;
}
</style>

</head>
<body translate="no">
<canvas id="canvas" width="1024" height="768"></canvas>

<script >
"use strict";
var _a = [Math.PI * 2, Math.PI / 2, Math.PI / 4],PI_DOUBLE = _a[0],PI_HALF = _a[1],PI_QUARTER = _a[2];
var COLOR_MAX = 255;
var BASE_COLOR = [0.5, 0.1, 0.45];
var POINTS_AMOUNT = 100;
var SPRING_RADIUS = 350;
var SPRING_HEIGHT = 700;
var NOIZE_MAX = 16;
var ROTATION_SPEED = 0.05;
var FL = 160;
var getRGB = function (_a) {
  var red = _a[0],green = _a[1],blue = _a[2];
  return "rgb(" + Math.floor(red * COLOR_MAX) + ", " + Math.floor(green * COLOR_MAX) + ", " + Math.floor(blue * COLOR_MAX) + ")";
};
function main() {
  var canvasEl = document.getElementById('canvas');
  var context = canvasEl.getContext('2d');
  var width = canvasEl.width,height = canvasEl.height;
  var rotationDirection = 1;
  var getUpdatedPoint = function (point, index, radius) {
    var angle = point.angle + ROTATION_SPEED * rotationDirection;
    var progress = index / POINTS_AMOUNT;
    return {
      radius: radius,
      angle: angle,
      y: progress * SPRING_HEIGHT - SPRING_HEIGHT / 2 + Math.random() * NOIZE_MAX,
      x: Math.cos(angle) * radius,
      z: radius + Math.sin(angle) * radius * (Math.sin(progress * Math.PI) * 0.5 + 0.5) };

  };
  var drawSegment = function (context, point, index) {.........完整代码请登录后点击上方下载按钮下载查看