chore: 初始化项目仓库
This commit is contained in:
rogerwang2008 committed
commit
17a224be27
8 files changed
+690
No files matched your search
@@ -0,0 +1,314 @@
|
||||
<!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>
|
||||
Reference in new issue
Block a user