旋涡穿梭动画-html代码-BFW代码库

旋涡穿梭动画

代码语言：html

所属分类：其他

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

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

<title> #codevember 01 - infinity: mobius tunnel</title>

<style>
      html, body {
  overflow: hidden;
  background-color: black;
}

#codepen-link {
  position: absolute;
  top: 20px;
  right: 30px;
  height: 40px;
  width: 40px;
  z-index: 10;
  border-radius: 50%;
  box-sizing: border-box;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg");
  background-position: center center;
  background-size: cover;
  opacity: 0.4;
  transition: all 0.25s;
}
#codepen-link:hover {
  opacity: 0.8;
  box-shadow: 0 0 6px #efefef;
}

    </style>

</head>
<body translate="no">

<script>
      "use strict";

const { PI, cos, sin, abs } = Math;
const HALF_PI = 0.5 * PI;
const TAU = 2 * PI;
const TO_RAD = PI / 180;
const fadeInOut = (t, m) => {
  let hm = 0.5 * m;
  return abs((t + hm) % m - hm) / hm;
};

let canvas;
let ctx;
let circles;
let origin;
let tick;

function setup() {
  canvas = {
    a: document.createElement('canvas'),
    b: document.createElement('canvas') };

  ctx = {
    a: canvas.a.getContext('2d'),
    b: canvas.b.getContext('2d') };

  canvas.b.style = `
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	`;
  document.body.appendChild(canvas.b);

  circles = [];
  origin = { x: 0, y: 0 };
  tick = 0;
  resize();
  draw();
}

function resize() {
  canvas.a.width = canvas.b.width = window.in.........完整代码请登录后点击上方下载按钮下载查看