div+css实现复古VHS录像带风格字体页面代码-html代码-BFW代码库

div+css实现复古VHS录像带风格字体页面代码

代码语言：html

代码描述：div+css实现复古VHS录像带风格字体页面代码

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

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Syne Mono — VHS Anti-Piracy Demo</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');

    :root {
      --bg: #050505;
      --ink: #f4f4f0;
      --blood: #ff1f1f;
      --dirty: #a7a7a0;
      --frame: 5px;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: "Syne Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      overflow: hidden;
    }

    body::before,
    body::after {
      content: "";
      pointer-events: none;
      position: fixed;
      inset: 0;
      z-index: 50;
    }

    body::before {
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0.07) 0px,
          rgba(255, 255, 255, 0.07) 1px,
          transparent 2px,
          transparent 5px
        );
      mix-blend-mode: overlay;
      opacity: 0.45;
      animation: scanlines 0.18s linear infinite;
    }

    body::after {
      background:
        radial-gradient(c.........完整代码请登录后点击上方下载按钮下载查看