starmen1265/ChildHood
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects 2 Releases Wiki Activity

art(ui): 游戏开始界面概念稿(2K图与HTML)

Browse Source
This commit is contained in:
starmen1265
2026-06-21 23:29:00 +08:00
parent 830128d812
commit 1a9f5a5b0c
2 changed files with 604 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
output/start-screen/childhood-start-screen-2k.png
LFS
BIN
View File
Binary file not shown.
output/start-screen/childhood-start-screen.html
+601
View File
@@ -0,0 +1,601 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ChildHood Start Screen</title>
<style>
:root {
--ink: #2a2119;
--paper: #f7e7bf;
--sun: #f0ae4b;
--red: #b94d36;
--green: #39705c;
--blue: #3e6f8e;
--shadow: rgba(35, 28, 22, .28);
}
* {
box-sizing: border-box;
}
html,
body {
width: 2560px;
height: 1440px;
margin: 0;
overflow: hidden;
font-family: "Microsoft YaHei", "Noto Sans CJK SC", "SimHei", Arial, sans-serif;
color: var(--ink);
background: #f1c66b;
}
.screen {
position: relative;
width: 2560px;
height: 1440px;
overflow: hidden;
background:
radial-gradient(circle at 65% 28%, rgba(255, 236, 169, .95) 0 10%, rgba(245, 187, 91, .68) 17%, rgba(224, 120, 73, .18) 33%, transparent 51%),
linear-gradient(180deg, #f4c36a 0%, #d88a5e 44%, #786d6f 78%, #454d55 100%);
}
.grain {
position: absolute;
inset: 0;
opacity: .18;
background-image:
linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
linear-gradient(rgba(0,0,0,.08) 1px, transparent 1px);
background-size: 13px 13px, 17px 17px;
mix-blend-mode: soft-light;
pointer-events: none;
}
.cloud {
position: absolute;
height: 34px;
border-radius: 999px;
background: rgba(255, 230, 181, .55);
filter: blur(.2px);
}
.cloud::before,
.cloud::after {
content: "";
position: absolute;
border-radius: 50%;
background: inherit;
}
.cloud::before {
width: 76px;
height: 76px;
left: 58px;
bottom: 4px;
}
.cloud::after {
width: 110px;
height: 110px;
left: 124px;
bottom: -3px;
}
.cloud-a {
width: 320px;
left: 165px;
top: 145px;
}
.cloud-b {
width: 390px;
right: 255px;
top: 215px;
opacity: .72;
transform: scale(.82);
}
.sun {
position: absolute;
left: 1584px;
top: 214px;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle at 36% 34%, #ffe7a8 0 14%, #f2b35a 42%, #dd774d 100%);
box-shadow: 0 0 160px rgba(255, 200, 103, .65);
}
.wires {
position: absolute;
inset: 0;
pointer-events: none;
}
.wire {
position: absolute;
height: 3px;
background: rgba(55, 43, 40, .58);
transform-origin: left center;
box-shadow: 0 2px 0 rgba(255,255,255,.05);
}
.wire-1 {
width: 1320px;
left: 1050px;
top: 288px;
transform: rotate(-7deg);
}
.wire-2 {
width: 1180px;
left: 1160px;
top: 340px;
transform: rotate(-5deg);
}
.pole {
position: absolute;
right: 235px;
top: 196px;
width: 24px;
height: 810px;
background: linear-gradient(90deg, #4c372b, #76523a, #39291f);
box-shadow: 16px 0 0 rgba(0,0,0,.08);
}
.pole::before {
content: "";
position: absolute;
left: -130px;
top: 92px;
width: 286px;
height: 20px;
background: #5c4030;
transform: rotate(-6deg);
box-shadow: 0 8px 0 rgba(0,0,0,.12);
}
.scene {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 760px;
}
.distant {
position: absolute;
left: 0;
right: 0;
bottom: 420px;
height: 245px;
background: linear-gradient(180deg, rgba(64, 78, 81, .15), rgba(42, 58, 62, .55));
clip-path: polygon(0 66%, 7% 58%, 13% 63%, 20% 51%, 27% 60%, 36% 44%, 45% 55%, 52% 41%, 62% 54%, 70% 43%, 78% 50%, 87% 39%, 100% 54%, 100% 100%, 0 100%);
}
.street {
position: absolute;
left: -90px;
right: -90px;
bottom: -110px;
height: 520px;
background:
linear-gradient(92deg, transparent 0 45%, rgba(255,255,255,.28) 45.4% 46.2%, transparent 46.7% 100%),
linear-gradient(180deg, #5e6161 0%, #464b50 100%);
transform: perspective(780px) rotateX(58deg);
transform-origin: bottom center;
box-shadow: inset 0 60px 90px rgba(0,0,0,.16);
}
.sidewalk {
position: absolute;
left: 0;
right: 0;
bottom: 250px;
height: 92px;
background: linear-gradient(180deg, #b58f62 0%, #886c51 100%);
box-shadow: 0 -14px 0 rgba(74, 61, 49, .35), 0 16px 35px rgba(0,0,0,.25);
}
.buildings {
position: absolute;
left: 0;
right: 0;
bottom: 338px;
height: 340px;
}
.shop {
position: absolute;
bottom: 0;
background: #d1b479;
border: 6px solid rgba(58, 45, 37, .72);
box-shadow: 18px 24px 0 rgba(0,0,0,.14);
}
.shop::before {
content: "";
position: absolute;
left: -8px;
right: -8px;
top: -66px;
height: 66px;
background: #b94d36;
border: 6px solid rgba(58, 45, 37, .72);
}
.shop::after {
content: attr(data-sign);
position: absolute;
left: 16px;
right: 16px;
top: -52px;
height: 38px;
color: #f9e8bb;
font-size: 30px;
font-weight: 800;
letter-spacing: 0;
text-align: center;
line-height: 38px;
}
.shop-1 {
left: 132px;
width: 430px;
height: 260px;
background: #c8b071;
}
.shop-2 {
left: 548px;
width: 460px;
height: 300px;
background: #9fb37b;
}
.shop-2::before {
background: var(--green);
}
.shop-3 {
left: 982px;
width: 430px;
height: 245px;
background: #d0a36c;
}
.shop-3::before {
background: var(--blue);
}
.shop-4 {
right: 355px;
width: 460px;
height: 286px;
background: #b9886b;
}
.window {
position: absolute;
width: 122px;
height: 104px;
top: 58px;
background: linear-gradient(135deg, rgba(253,230,164,.88), rgba(75,87,88,.9));
border: 6px solid rgba(47, 40, 34, .68);
box-shadow: inset 0 -18px 0 rgba(0,0,0,.15);
}
.door {
position: absolute;
bottom: -6px;
width: 120px;
height: 182px;
background: linear-gradient(90deg, #533d31, #876048);
border: 6px solid rgba(47, 40, 34, .76);
}
.shop-1 .window { left: 38px; }
.shop-1 .door { right: 54px; }
.shop-2 .window { right: 42px; width: 170px; }
.shop-2 .door { left: 56px; }
.shop-3 .window { left: 42px; width: 148px; }
.shop-3 .door { right: 48px; }
.shop-4 .window { left: 44px; width: 162px; }
.shop-4 .door { right: 58px; }
.bike {
position: absolute;
left: 710px;
bottom: 278px;
width: 245px;
height: 120px;
opacity: .88;
}
.wheel {
position: absolute;
bottom: 0;
width: 86px;
height: 86px;
border: 9px solid #2f2a27;
border-radius: 50%;
box-shadow: inset 0 0 0 3px rgba(255,255,255,.08);
}
.wheel-a { left: 0; }
.wheel-b { right: 0; }
.bike-frame {
position: absolute;
left: 42px;
top: 34px;
width: 154px;
height: 64px;
border-left: 8px solid #2f2a27;
border-bottom: 8px solid #2f2a27;
transform: skewX(-22deg);
}
.boy {
position: absolute;
left: 1465px;
bottom: 233px;
width: 170px;
height: 360px;
filter: drop-shadow(20px 22px 0 rgba(0,0,0,.18));
}
.head {
position: absolute;
left: 51px;
top: 0;
width: 76px;
height: 82px;
border-radius: 44% 48% 46% 46%;
background: #352722;
}
.body {
position: absolute;
left: 38px;
top: 82px;
width: 96px;
height: 142px;
background: #b94d36;
clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}
.arm {
position: absolute;
top: 100px;
width: 30px;
height: 122px;
background: #4f3328;
border-radius: 16px;
transform-origin: top center;
}
.arm-a {
left: 22px;
transform: rotate(17deg);
}
.arm-b {
right: 22px;
transform: rotate(-19deg);
}
.leg {
position: absolute;
top: 218px;
width: 34px;
height: 132px;
background: #263f55;
border-radius: 14px 14px 9px 9px;
}
.leg-a { left: 55px; transform: rotate(5deg); }
.leg-b { right: 54px; transform: rotate(-7deg); }
.marbles {
position: absolute;
left: 1342px;
bottom: 206px;
width: 385px;
height: 110px;
}
.marble {
position: absolute;
width: 34px;
height: 34px;
border-radius: 50%;
box-shadow: inset -8px -8px 12px rgba(0,0,0,.32), inset 8px 7px 9px rgba(255,255,255,.42), 8px 10px 0 rgba(0,0,0,.14);
}
.m1 { left: 0; top: 62px; background: #dce7e4; }
.m2 { left: 70px; top: 28px; background: #4f937d; }
.m3 { left: 125px; top: 72px; background: #c14e3e; }
.m4 { left: 202px; top: 48px; background: #d9ac4f; }
.m5 { left: 310px; top: 76px; background: #5c76a2; }
.circle-line {
position: absolute;
left: 44px;
top: 18px;
width: 265px;
height: 82px;
border: 6px solid rgba(239, 220, 164, .56);
border-radius: 50%;
transform: rotate(-8deg);
}
.title-area {
position: absolute;
left: 170px;
top: 142px;
width: 980px;
text-shadow: 0 6px 0 rgba(69, 48, 38, .16);
}
.eyebrow {
width: max-content;
margin-bottom: 36px;
padding: 10px 22px 12px;
color: #f9e7c2;
background: rgba(67, 72, 72, .58);
border: 3px solid rgba(249, 231, 194, .42);
font-size: 28px;
font-weight: 700;
letter-spacing: 0;
}
.title {
margin: 0;
font-size: 168px;
line-height: .92;
letter-spacing: 0;
color: #fff0c4;
-webkit-text-stroke: 6px rgba(72, 45, 36, .76);
paint-order: stroke fill;
}
.subtitle {
margin-top: 26px;
font-size: 42px;
line-height: 1.35;
color: #53392c;
font-weight: 800;
}
.menu {
position: absolute;
right: 188px;
bottom: 144px;
width: 470px;
display: flex;
flex-direction: column;
gap: 22px;
}
.menu-item {
position: relative;
height: 82px;
padding: 0 34px;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff1cf;
background: rgba(49, 50, 47, .72);
border: 4px solid rgba(255, 235, 188, .42);
box-shadow: 14px 16px 0 rgba(0,0,0,.16);
font-size: 34px;
font-weight: 800;
letter-spacing: 0;
}
.menu-item.primary {
background: #b94d36;
border-color: #f8dda0;
color: #fff5d7;
}
.menu-item.primary::before {
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
background: #ffe3a1;
box-shadow: 27px 0 0 #ffe3a1, 54px 0 0 #ffe3a1;
}
.menu-item span:first-child {
min-width: 0;
}
.menu-item span:last-child {
font-size: 26px;
color: rgba(255, 241, 207, .76);
}
.footer {
position: absolute;
left: 170px;
bottom: 76px;
width: 980px;
display: flex;
gap: 34px;
color: rgba(255, 238, 199, .82);
font-size: 24px;
font-weight: 700;
text-shadow: 0 3px 0 rgba(0,0,0,.22);
}
</style>
</head>
<body>
<main class="screen" aria-label="ChildHood game start screen">
<div class="sun"></div>
<div class="cloud cloud-a"></div>
<div class="cloud cloud-b"></div>
<div class="wires">
<div class="wire wire-1"></div>
<div class="wire wire-2"></div>
<div class="pole"></div>
</div>
<section class="title-area">
<div class="eyebrow">千禧年前后的城郊暑假</div>
<h1 class="title">我的童年</h1>
<div class="subtitle">ChildHood</div>
</section>
<section class="scene">
<div class="distant"></div>
<div class="buildings">
<div class="shop shop-1" data-sign="小卖部"><div class="window"></div><div class="door"></div></div>
<div class="shop shop-2" data-sign="文具百货"><div class="window"></div><div class="door"></div></div>
<div class="shop shop-3" data-sign="游戏厅"><div class="window"></div><div class="door"></div></div>
<div class="shop shop-4" data-sign="录像厅"><div class="window"></div><div class="door"></div></div>
</div>
<div class="sidewalk"></div>
<div class="bike">
<div class="wheel wheel-a"></div>
<div class="wheel wheel-b"></div>
<div class="bike-frame"></div>
</div>
<div class="street"></div>
<div class="marbles">
<div class="circle-line"></div>
<div class="marble m1"></div>
<div class="marble m2"></div>
<div class="marble m3"></div>
<div class="marble m4"></div>
<div class="marble m5"></div>
</div>
<div class="boy">
<div class="head"></div>
<div class="body"></div>
<div class="arm arm-a"></div>
<div class="arm arm-b"></div>
<div class="leg leg-a"></div>
<div class="leg leg-b"></div>
</div>
</section>
<nav class="menu" aria-label="Main menu">
<div class="menu-item primary"><span>开始游戏</span><span>Enter</span></div>
<div class="menu-item"><span>继续游戏</span><span>Load</span></div>
<div class="menu-item"><span>设置</span><span>Options</span></div>
<div class="menu-item"><span>退出</span><span>Esc</span></div>
</nav>
<footer class="footer">
<span>3D Lowpoly 视觉方向</span>
<span>探索 / 小游戏 / 收集 / 日常叙事</span>
</footer>
<div class="grain"></div>
</main>
</body>
</html>