954cbc6823
- 提交 world.html 及 assets/(地形贴图/背景/视频/js)、index/login/terrain_preview - world.html: 微观世界入场加载页重构为左下角提示药丸 + 全宽进度条 - 排除 .bak/__bak 备份文件(.gitignore)
154 lines
5.0 KiB
HTML
154 lines
5.0 KiB
HTML
<!DOCTYPE html><html lang="zh"><head><meta charset="utf-8"><title>草地变体预览</title><style>
|
|
body{background:#16181d;color:#e8e8e8;font-family:-apple-system,"PingFang SC",sans-serif;margin:0;padding:24px}
|
|
h1{font-size:20px;margin:0 0 6px}.hint{color:#9aa0a6;font-size:13px;margin-bottom:20px;line-height:1.6}
|
|
.section{font-size:15px;color:#7cc4ff;margin:24px 0 12px;font-weight:600}
|
|
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
|
|
.card{background:#22252c;border-radius:10px;overflow:hidden;border:1px solid #333842}
|
|
.vid-wrap{position:relative;aspect-ratio:1/1;background:#000}
|
|
.vid-wrap.static{background:repeating-linear-gradient(45deg,#1b1e24,#1b1e24 10px,#20242c 10px,#20242c 20px)}
|
|
video{width:100%;height:100%;object-fit:cover;display:block}
|
|
.num{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.65);color:#fff;font-weight:700;padding:3px 9px;border-radius:6px;font-size:14px}
|
|
.row{display:flex;align-items:center;gap:10px;padding:10px}.row img{width:54px;height:54px;object-fit:cover;border-radius:6px;border:1px solid #3a3f48}
|
|
.tag{font-size:12px;color:#9aa0a6}</style></head><body>
|
|
<h1>草地变体预览</h1><div class="hint">视频为动态循环播放（与游戏内一致）。扫一眼，哪个不顺眼就告诉我编号，我直接删。</div>
|
|
<div class="section">动态视频变体（游戏中实际使用的 7 个）</div><div class="grid"><div class="card">
|
|
<div class="vid-wrap">
|
|
<span class="num">#2</span>
|
|
<video src="assets/terrain/plain_%d.mp4" muted loop autoplay playsinline></video>
|
|
</div>
|
|
<div class="row">
|
|
<img src="assets/terrain/plain_2.png" alt="#2">
|
|
<span class="tag">plain_2.png</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="vid-wrap">
|
|
<span class="num">#4</span>
|
|
<video src="assets/terrain/plain_%d.mp4" muted loop autoplay playsinline></video>
|
|
</div>
|
|
<div class="row">
|
|
<img src="assets/terrain/plain_4.png" alt="#4">
|
|
<span class="tag">plain_4.png</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="vid-wrap">
|
|
<span class="num">#5</span>
|
|
<video src="assets/terrain/plain_%d.mp4" muted loop autoplay playsinline></video>
|
|
</div>
|
|
<div class="row">
|
|
<img src="assets/terrain/plain_5.png" alt="#5">
|
|
<span class="tag">plain_5.png</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="vid-wrap">
|
|
<span class="num">#8</span>
|
|
<video src="assets/terrain/plain_%d.mp4" muted loop autoplay playsinline></video>
|
|
</div>
|
|
<div class="row">
|
|
<img src="assets/terrain/plain_8.png" alt="#8">
|
|
<span class="tag">plain_8.png</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="vid-wrap">
|
|
<span class="num">#12</span>
|
|
<video src="assets/terrain/plain_%d.mp4" muted loop autoplay playsinline></video>
|
|
</div>
|
|
<div class="row">
|
|
<img src="assets/terrain/plain_12.png" alt="#12">
|
|
<span class="tag">plain_12.png</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="vid-wrap">
|
|
<span class="num">#13</span>
|
|
<video src="assets/terrain/plain_%d.mp4" muted loop autoplay playsinline></video>
|
|
</div>
|
|
<div class="row">
|
|
<img src="assets/terrain/plain_13.png" alt="#13">
|
|
<span class="tag">plain_13.png</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="vid-wrap">
|
|
<span class="num">#14</span>
|
|
<video src="assets/terrain/plain_%d.mp4" muted loop autoplay playsinline></video>
|
|
</div>
|
|
<div class="row">
|
|
<img src="assets/terrain/plain_14.png" alt="#14">
|
|
<span class="tag">plain_14.png</span>
|
|
</div>
|
|
</div></div><div class="section">静态 PNG 变体（含 #16 兜底，共 8 个）</div><div class="grid"><div class="card">
|
|
<div class="vid-wrap static">
|
|
<span class="num">#2</span>
|
|
</div>
|
|
<div class="row">
|
|
<img src="assets/terrain/plain_2.png" alt="#2">
|
|
<span class="tag">plain_2.png</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="vid-wrap static">
|
|
<span class="num">#4</span>
|
|
</div>
|
|
<div class="row">
|
|
<img src="assets/terrain/plain_4.png" alt="#4">
|
|
<span class="tag">plain_4.png</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="vid-wrap static">
|
|
<span class="num">#5</span>
|
|
</div>
|
|
<div class="row">
|
|
<img src="assets/terrain/plain_5.png" alt="#5">
|
|
<span class="tag">plain_5.png</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="vid-wrap static">
|
|
<span class="num">#8</span>
|
|
</div>
|
|
<div class="row">
|
|
<img src="assets/terrain/plain_8.png" alt="#8">
|
|
<span class="tag">plain_8.png</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="vid-wrap static">
|
|
<span class="num">#12</span>
|
|
</div>
|
|
<div class="row">
|
|
<img src="assets/terrain/plain_12.png" alt="#12">
|
|
<span class="tag">plain_12.png</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="vid-wrap static">
|
|
<span class="num">#13</span>
|
|
</div>
|
|
<div class="row">
|
|
<img src="assets/terrain/plain_13.png" alt="#13">
|
|
<span class="tag">plain_13.png</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="vid-wrap static">
|
|
<span class="num">#14</span>
|
|
</div>
|
|
<div class="row">
|
|
<img src="assets/terrain/plain_14.png" alt="#14">
|
|
<span class="tag">plain_14.png</span>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="vid-wrap static">
|
|
<span class="num">#16</span>
|
|
</div>
|
|
<div class="row">
|
|
<img src="assets/terrain/plain_16.png" alt="#16">
|
|
<span class="tag">plain_16.png</span>
|
|
</div>
|
|
</div></div></body></html> |