602 lines
14 KiB
HTML
602 lines
14 KiB
HTML
<!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>
|