随机背景方格填充动画效果-html代码-BFW代码库

随机背景方格填充动画效果

代码语言：html

所属分类：背景

代码描述：随机背景方格填充动画效果

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

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

<style>
html, body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

.container {
  position: relative;
  margin: 0;
}

.canvas {
  background: black;
  cursor: pointer;
}

.text {
  position: absolute;
  top: 50%;
  color: white;
  left: 20px;
  font-size: 40px;
  transform: translateY(-50%);
}
</style>

</head>
<body translate="no">
<div class="container">
<canvas class="canvas"></canvas>
<div class="text">Move over me</div>
</div>

<script>
const canvas = document.querySelector('.canvas');
const text = document.querySelector('.text');
const context = canvas.getContext('2d');

function init() {
  requestAnimationFrame(() => {
    const ratio = window.devicePixelRatio;
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
    canvas.width = window.innerWidth * ratio;
    canvas.height = window.innerHeight * ratio;
    context.scale(ratio, ratio);
  });
}

document.addEventListener('mousemove', e => {
  text.hidden = true;
  branch(e.clientX, e.clientY, e.clientX, e.clientY, Math.random() * 8);
});

document.addEventListener('touchmove', e => {
  text.hidden = true;
  branch(e.touches[0].clientX, e.touches[0].clientY, e.touche.........完整代码请登录后点击上方下载按钮下载查看