jiazi-gala-poster-demo/references/a.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>落日 · 文字游戏</title>
<style>
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    padding: 0;
    background: #000;           /* 黑底 */
  }
  body {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "Noto Sans SC", "Source Han Sans SC", sans-serif;
    -webkit-text-size-adjust: 100%;
  }

  /* 舞台：28 列 × 50 行 的文字网格，1em = 1 个汉字格子 */
  .scene {
    position: relative;
    font-size: min(3.4vw, 1.85vh, 13px);
    line-height: 1em;
    width: 28em;
    height: 50em;
    overflow: hidden;
    user-select: none;
  }

  /* 每一个文字块 */
  .t {
    position: absolute;
    left: calc(var(--x) * 1em);
    top:  calc(var(--y) * 1em);
    white-space: pre;      /* 保留空格与换行 */
    line-height: 1em;
    letter-spacing: 0;
    margin: 0;
  }

  /* 城市：黑底上可见的深灰剪影 */
  .bld { color: #4a4a5a; }

  /* 天线：小字号，向上多排 */
  .ant {
    font-size: 0.45em;
    line-height: 1em;
    color: #8a8a9e;
  }
</style>
</head>
<body>

<div class="scene">

  <!-- ==================== 云 · 晚霞色 ==================== -->

  <!-- 云 A -->
  <div class="t" style="--x:10;--y:0;color:#ff9ebb">　云云云　
云云云云云
　云云云　</div>

  <!-- 云 B -->
  <div class="t" style="--x:17;--y:1;color:#b98cff">　云云云　
云云云云云
　云云云　</div>

  <!-- 云 C -->
  <div class="t" style="--x:1;--y:2;color:#ffa95c">　云云云　
云云云云云
　云云云　</div>

  <!-- 云 E -->
  <div class="t" style="--x:4;--y:5;color:#ff85b3">　云云云　
云云云云云
　云云云　</div>

  <!-- 云 D -->
  <div class="t" style="--x:23;--y:8;color:#c98cff">　云云云　
云云云云云
　云云云　</div>


  <!-- ==================== 落日 · 圆盘 ==================== -->

  <div class="t" style="--x:13;--y:10;color:#ff5a36">日日</div>
  <div class="t" style="--x:10;--y:11;color:#ff5a36">日日日日日日日日</div>
  <div class="t" style="--x:9;--y:12;color:#ff6533">日日日日日日日日日日</div>
  <div class="t" style="--x:8;--y:13;color:#ff7330">日日日日日日日日日日日日</div>
  <div class="t" style="--x:7;--y:14;color:#ff812d">日日日日日日日日日日日日日日</div>
  <div class="t" style="--x:7;--y:15;color:#ff8f2b">日日日日日日日日日日日日日日</div>
  <div class="t" style="--x:6;--y:16;color:#ff9d29">日日日日日日日日日日日日日日日日</div>
  <div class="t" style="--x:6;--y:17;color:#ffaa2a">日日日日日日日日日日日日日日日日</div>
  <div class="t" style="--x:6;--y:18;color:#ffb62d">日日日日日日日日日日日日日日日日</div>
  <div class="t" style="--x:6;--y:19;color:#ffc132">日日日日日日日日日日日日日日日日</div>
  <div class="t" style="--x:6;--y:20;color:#ffcb38">日日日日日日日日日日日日日日日日</div>
  <div class="t" style="--x:7;--y:21;color:#ffd33f">日日日日日日日日日日日日日日</div>
  <div class="t" style="--x:7;--y:22;color:#ffda46">日日日日日日日日日日日日日日</div>
  <div class="t" style="--x:8;--y:23;color:#ffe04e">日日日日日日日日日日日日</div>
  <div class="t" style="--x:9;--y:24;color:#ffe556">日日日日日日日日日日</div>
  <div class="t" style="--x:10;--y:25;color:#ffe95e">日日日日日日日日</div>
  <div class="t" style="--x:13;--y:26;color:#ffec66">日日</div>


  <!-- ==================== 飞鸟 · 两斜行 ==================== -->

  <!-- 左行：从太阳左上角向左上飞到左边界（10 只） -->
  <div class="t" style="--x:5.5;--y:14;color:#e0a45c">麻雀</div>
  <div class="t" style="--x:4.92;--y:13;color:#a0c8f0">海鸥</div>
  <div class="t" style="--x:4.34;--y:12;color:#b0a8c8">乌鸦</div>
  <div class="t" style="--x:3.76;--y:11;color:#e0a45c">麻雀</div>
  <div class="t" style="--x:3.18;--y:10;color:#a0c8f0">海鸥</div>
  <div class="t" style="--x:2.6;--y:9;color:#b0a8c8">乌鸦</div>
  <div class="t" style="--x:2.02;--y:8;color:#e0a45c">麻雀</div>
  <div class="t" style="--x:1.44;--y:7;color:#a0c8f0">海鸥</div>
  <div class="t" style="--x:0.86;--y:6;color:#b0a8c8">乌鸦</div>
  <div class="t" style="--x:0.28;--y:5;color:#e0a45c">麻雀</div>

  <!-- 右行：从更高处向右上飞到右边界（10 只） -->
  <div class="t" style="--x:19;--y:11;color:#b0a8c8">乌鸦</div>
  <div class="t" style="--x:19.7;--y:10;color:#a0c8f0">海鸥</div>
  <div class="t" style="--x:20.4;--y:9;color:#e0a45c">麻雀</div>
  <div class="t" style="--x:21.1;--y:8;color:#b0a8c8">乌鸦</div>
  <div class="t" style="--x:21.8;--y:7;color:#a0c8f0">海鸥</div>
  <div class="t" style="--x:22.5;--y:6;color:#e0a45c">麻雀</div>
  <div class="t" style="--x:23.2;--y:5;color:#b0a8c8">乌鸦</div>
  <div class="t" style="--x:23.9;--y:4;color:#a0c8f0">海鸥</div>
  <div class="t" style="--x:24.6;--y:3;color:#e0a45c">麻雀</div>
  <div class="t" style="--x:25.3;--y:2;color:#b0a8c8">乌鸦</div>


  <!-- ==================== 天线 · 小字号向上多排 ==================== -->

  <div class="t" style="--x:7.55;--y:25.6"><div class="ant">天线
天线
天线
天线
天线
天线
天线
天线
天线
天线
天线
天线</div></div>

  <div class="t" style="--x:21.5;--y:25.6"><div class="ant">天线
天线
天线
天线
天线
天线
天线
天线
天线
天线
天线
天线</div></div>


  <!-- ==================== 城市 · 楼群 ==================== -->

  <!-- 楼 1（列 0-2，行 35-49） -->
  <div class="t bld" style="--x:0;--y:35">楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼</div>

  <!-- 楼 2（列 3-5，行 39-49） -->
  <div class="t bld" style="--x:3;--y:39">楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼</div>

  <!-- 楼 3（列 6-9，行 31-49） -->
  <div class="t bld" style="--x:6;--y:31">楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼</div>

  <!-- 楼 4（列 10-12，行 36-49） -->
  <div class="t bld" style="--x:10;--y:36">楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼</div>

  <!-- 楼 5（列 13-16，行 30-49，最高的楼） -->
  <div class="t bld" style="--x:13;--y:30">楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼</div>

  <!-- 楼 6（列 17-19，行 34-49） -->
  <div class="t bld" style="--x:17;--y:34">楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼
楼楼楼</div>

  <!-- 楼 7（列 20-23，行 31-49） -->
  <div class="t bld" style="--x:20;--y:31">楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼</div>

  <!-- 楼 8（列 24-27，行 37-49） -->
  <div class="t bld" style="--x:24;--y:37">楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼
楼楼楼楼</div>

</div>

</body>
</html>