随机背景方格填充动画效果-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�.........完整代码请登录后点击上方下载按钮下载查看