前端代码：

import React, { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import '../assets/styles/404.scss';
interface Icanvas {
  words: number[];
  width: number;
  height: number;
}
const canvasObj: Icanvas = {
  width: 0,
  height: 0,
  words: []
};
let timeDraw: NodeJS.Timeout; //eslint-disable-line
let canvas2d: CanvasRenderingContext2D | null;
export default function NoMatch() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const history = useNavigate();
  // 返回首页
  function toHome() {
    history('/');
  }
  // 绘制canvas
  function draw() {
    if (canvas2d) {
      canvas2d.fillStyle = 'rgba(0,0,0,0.05)';
      canvas2d.fillRect(0, 0, canvasObj.width, canvasObj.height);
      canvas2d.fillStyle = color2();
      canvasObj.words.map(function (y, n) {
        const text = String.fromCharCode(Math.ceil(65 + Math.random() * 57));
        const x = n * 10;
        if (canvas2d) {
          canvas2d.fillText(text, x, y);
        }
        canvasObj.words[n] = y > 758 + Math.random() * 484 ? 0 : y + 10;
      });
    }
  }
  // 生成随机色
  function color2() {
    let color = Math.ceil(Math.random() * 16777215).toString(16);
    while (color.length < 6) {
      color = '0' + color;
    }
    return '#' + color;
  }
  // 初始化canvas
  function canvasInit() {
    canvas2d = canvasRef.current?.getContext('2d') || null;
    if (canvas2d) {
      canvasObj.width = canvas2d.canvas.width = window.screen.width;
      canvasObj.height = canvas2d.canvas.height = window.screen.height;
      canvas2d.fillStyle = color2();
      canvasObj.words = Array(256).fill(1);
      timeDraw = setInterval(draw, 100);
    }
  }
  useEffect(() => {
    canvasInit();
    return () => {
      clearInterval(timeDraw);
    };
  }, []);
  return (
    <div className="error404">
      <div className="error404-bg">
        <canvas ref={canvasRef} id="canvas" width="1000" height="500"></canvas>
      </div>
      <div className="error404-content">
        <h3>404</h3>
        <div>
          <span className="error404-button" onClick={toHome.bind(this)}>
            返回首页
          </span>
        </div>
      </div>
    </div>
  );
}

前端css:

.error404 {
  position: relative;
  height: calc(100vh - 120px);
  &-bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }
  &-content {
    text-align: center;
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px #272727;
    width: 300px;
    height: 220px;
    position: absolute;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -110px;
    color: #393;
    animation: linear-box 2s linear infinite;
    -webkit-animation: linear-box 2s linear infinite; /* Safari 和 Chrome */
    background: linear-gradient(#1b1b1b, #111);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    > h3 {
      font-size: 50px;
      font-weight: 800;
      margin-bottom: 40px;
    }
  }
  &-button {
    background: linear-gradient(#393939, #292929);
    color: #5f5;
    outline: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    &:hover {
      box-shadow: 0 0 5px rgb(0 255 0 / 20%);
    }
  }
  @keyframes linear-box {
    0% {
      box-shadow: 0 0 5px rgba(0, 255, 0, 0.184), 0 2px 0 #000;
    }
    50% {
      box-shadow: 0 0 5px rgb(0, 255, 0), 0 2px 0 #000;
    }
    75% {
      box-shadow: 0 0 5px rgba(0, 255, 0, 0.184), 0 2px 0 #000;
    }
    100% {
      box-shadow: 0 0 5px rgb(0, 255, 0), 0 2px 0 #000;
    }
  }
}

复制即可使用