canvas蓝色网格背景闪烁动画效果代码-html代码-BFW代码库

canvas蓝色网格背景闪烁动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas蓝色网格背景闪烁动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(to right, #2f80ed, #56ccf2);
          height: 100vh;
        }
        
        #pixels {
          width: 340px;
          height: 340px;
          border-radius: 12px;
          background: #39419c;
          border: 2px solid #39419c;
        }
        
        .wrapper {
          width: 340px;
          height: 340px;
          position: relative;
        }
        
        .wrapper:before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translate(-50%, 0);
          width: 220px;
          height: 50px;
          box-shadow: 0 10px 60px rgba(0, 0, 0, 0.5);
        }
    </style>



</head>

<body>
    <div class="wrapper">
        <canvas id="pixels" width="340" height="340"></canvas>
    </div>

    <script>
        const cellSize = 12;
        const canvasWidth = 340;
        const canvasHeight = 340;
        
        /** Create an array to represnt grid */
        const makeGrid = (canvasWidth, canvasHeight, cellWidth, cellHeight) => {
          const cellsX = Math.ceil(canvasWidth / cellWidth); // cells per row
          const cellsY = Math.ceil(canvasHeight / cellHeight); // rows
          const fadeDirection = ["in", "out"];
          const colours = [
          "#407CEE",
          "#386BE8",
          "#315DC9",
          "#354EB0",
          "#39419C&qu.........完整代码请登录后点击上方下载按钮下载查看