旋涡穿梭动画

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

网友评论0