线条悬浮动画特效-html代码-BFW代码库

线条悬浮动画特效

代码语言：html

所属分类：动画

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


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

<style>
@import url('https://fonts.googleapis.com/css?family=Merriweather&display=swap');

body{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Merriweather', 'serif';
}

*:focus{
  outline: none;
}

.root{
  display:flex;
  flex-direction:column;
}

.bigbox{
  height:100vh;
  border:1px solid #AAA;
}

#drawing{
  border:1px solid white;
  position:absolute;
}

#can{
  border: 1px solid white;
  position: absolute;
  background: #252525;
}

.intro{
  background:#555;
  display:flex;
  justify-content:center;
  align-items: center;
}

.intro__text{
  color:#FAFAFA;
  font-size:1.5em;
}
</style>

</head>
<body translate="no">
<div class="root">
<div class="bigbox intro">
<canvas width="500px" height="500px" id="can">
</canvas>
</div>
</div>

<script>
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; // max is exclusive
}

class Line {
  constructor(x, y, sdf) {
    this.x = x;
    this.y = y;
    this.ox = x;
    this.oy = y;
    this.radius = 100;
    this.opac = 0.2;
    this.rateOfOpacityChange = 0.04;
    this.time = new MyTime(sdf).........完整代码请登录后点击上方下载按钮下载查看