线条悬浮动画特效-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);
    this.colorIndex = getRandomInt(0, 4);
  }

  draw(ctx, lineWidth = 0.5) {
    let fromX = this.x;
    let fromY = this.y;
    let toX = fromX + 500;
    let toY = fromY - 900;
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = `rgba(225,225,255, ${this.opac})`;
    ctx.beginPath();
    ctx.moveTo(fromX, fromY);
    ctx.lineTo(toX, toY);
    ctx.closePath();
    ctx.stroke();
  }

  getTime() {
    return this.time.getTotalMilliseconds();
  }
  opacityUp() {
    this.opac += this.rateOfOpacityChange;
    if (this.opac > 1.0) {
      this.opac = 1.0;
    }
  }
  opacityDown() {
    this.opac -= this.rateOfOpacityChange;
    if (this.opac < 0.2) {
      this.opac = 0.2;
    }
  }}


class MyTime {
.........完整代码请登录后点击上方下载按钮下载查看