:root {
--bg: #0e0e0f;
--surface: #161618;
--line: #2a2a2e;
--seed: #7cb87c;
--grow: #6baed6;
--harvest: #e6a84a;
--enjoy: #c97bcc;
--text-primary: #e8e6e1;
--text-dim: #7a7870;
--text-mid: #b0ada6;
}
body {
background: var(--bg);
color: var(--text-primary);
font-family: 'Noto Serif SC', serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
}
.container {
width: 100%;
max-width: 860px;
}
h1 {
font-size: 13px;
font-weight: 300;
letter-spacing: 0.18em;
color: var(--text-dim);
text-transform: uppercase;
margin-bottom: 56px;
font-family: 'DM Mono', monospace;
}
.timeline-wrap {
position: relative;
padding: 0 0 40px 0;
}
.axis {
position: relative;
height: 2px;
background: var(--line);
margin: 100px 0 0 0;
}
.segment {
position: absolute;
top: 0;
height: 2px;
opacity: 0;
animation: fadeIn 0.6s forwards;
}
.seg-seed { left: 0%; width: 25%; background: var(--seed); animation-delay: 0.2s; }
.seg-grow { left: 25%; width: 25%; background: var(--grow); animation-delay: 0.4s; }
.seg-harvest { left: 50%; width: 25%; background: var(--harvest); animation-delay: 0.6s; }
.seg-enjoy { left: 75%; width: 25%; background: var(--enjoy); animation-delay: 0.8s; }
@keyframes fadeIn {
from { opacity: 0; transform: scaleX(0); transform-origin: left; }
to { opacity: 1; transform: scaleX(1); }
}
.milestone {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
}
.milestone .dot {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid var(--bg);
position: relative;
z-index: 2;
transition: transform 0.2s;
}
.milestone:hover .dot { transform: scale(1.4); }
.m1 { left: 0%; }
.m2 { left: 25%; }
.m3 { left: 50%; }
.m4 { left: 75%; }
.m5 { left: 100%; }
.m1 .dot { background: var(--seed); }
.m2 .dot { background: var(--grow); }
.m3 .dot { background: var(--harvest); }
.m4 .dot { background: var(--enjoy); }
.m5 .dot { background: var(--text-dim); }
.label-above {
position: absolute;
bottom: calc(100% + 18px);
left: 50%;
transform: translateX(-50%);
text-align: center;
white-space: nowrap;
}
.label-below {
position: absolute;
top: calc(100% + 18px);
left: 50%;
transform: translateX(-50%);
text-align: center;
white-space: nowrap;
}
.t-label {
font-family: 'DM Mono', monospace;
font-size: 10px;
color: var(--text-dim);
letter-spacing: 0.1em;
display: block;
margin-bottom: 4px;
}
.event-text {
font-size: 12px;
color: var(--text-mid);
line-height: 1.5;
max-width: 120px;
}
.connector {
position: absolute;
left: 50%;
width: 1px;
background: var(--line);
}
.connector-above { bottom: 100%; height: 18px; }
.connector-below { top: 100%; height: 18px; }
.phases {
display: flex;
margin-top: 80px;
}
.phase {
flex: 1;
padding: 20px 16px;
border-top: 1px solid;
opacity: 0;
animation: riseUp 0.5s forwards;
}
.phase:nth-child(1) { border-color: var(--seed); animation-delay: 0.3s; }
.phase:nth-child(2) { border-color: var(--grow); animation-delay: 0.5s; }
.phase:nth-child(3) { border-color: var(--harvest); animation-delay: 0.7s; }
.phase:nth-child(4) { border-color: var(--enjoy); animation-delay: 0.9s; }
@keyframes riseUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.phase-icon { font-size: 18px; margin-bottom: 8px; display: block; }
.phase-name {
font-size: 13px;
font-weight: 600;
margin-bottom: 6px;
display: block;
}
.phase:nth-child(1) .phase-name { color: var(--seed); }
.phase:nth-child(2) .phase-name { color: var(--grow); }
.phase:nth-child(3) .phase-name { color: var(--harvest); }
.phase:nth-child(4) .phase-name { color: var(--enjoy); }
.phase-state {
font-size: 11px;
color: var(--text-dim);
line-height: 1.7;
}
.phase-divider {
width: 100%;
height: 1px;
background: var(--line);
margin: 10px 0;
}
.phase-meta-label {
font-family: 'DM Mono', monospace;
font-size: 9px;
color: var(--text-dim);
letter-spacing: 0.12em;
display: block;
margin-bottom: 3px;
text-transform: uppercase;
}
.phase-build {
font-size: 12px;
color: var(--text-primary);
display: block;
margin-bottom: 10px;
font-weight: 400;
}
.phase-transition {
font-size: 11px;
color: var(--text-mid);
display: block;
}
.tick {
position: absolute;
top: -5px;
width: 1px;
height: 12px;
background: currentColor;
}
词汇习得时间轴 · Vocabulary Acquisition
<div class="milestone m1">
<div class="label-above">
<span class="t-label">T1</span>
<span class="event-text">第一次接触</span>
<div class="connector connector-above"></div>
</div>
<div class="dot"></div>
</div>
<div class="milestone m2">
<div class="dot"></div>
<div class="label-below">
<div class="connector connector-below"></div>
<span class="t-label">T2</span>
<span class="event-text">知道学过<br>但不知含义</span>
</div>
</div>
<div class="milestone m3">
<div class="label-above">
<span class="t-label">T3</span>
<span class="event-text">情景清晰<br>无法主动输出</span>
<div class="connector connector-above"></div>
</div>
<div class="dot"></div>
</div>
<div class="milestone m4">
<div class="dot"></div>
<div class="label-below">
<div class="connector connector-below"></div>
<span class="t-label">T4</span>
<span class="event-text">熟练使用</span>
</div>
</div>
<div class="milestone m5">
<div class="dot" style="background:transparent;border-color:var(--text-dim);border-style:dashed;"></div>
</div>
</div>
<div class="phases">
<div class="phase">
<span class="phase-icon">🌱</span>
<span class="phase-name">播种期</span>
<span class="phase-state">有印象<br>无语义<br>见过 ≠ 懂</span>
<div class="phase-divider"></div>
<span class="phase-meta-label">建立的东西</span>
<span class="phase-build">字面印象</span>
<span class="phase-meta-label">从无到有</span>
<span class="phase-transition">无字面印象 → 有字面印象</span>
</div>
<div class="phase">
<span class="phase-icon">🌿</span>
<span class="phase-name">成长期</span>
<span class="phase-state">时记时忘<br>情景模糊<br>理解不稳定</span>
<div class="phase-divider"></div>
<span class="phase-meta-label">建立的东西</span>
<span class="phase-build">语义场景印象</span>
<span class="phase-meta-label">从无到有</span>
<span class="phase-transition">无语义场景 → 有语义场景</span>
</div>
<div class="phase">
<span class="phase-icon">🌳</span>
<span class="phase-name">收割期</span>
<span class="phase-state">情景自动闪现<br>能懂难说<br>输出受阻</span>
<div class="phase-divider"></div>
<span class="phase-meta-label">建立的东西</span>
<span class="phase-build">使用的主动性</span>
<span class="phase-meta-label">从无到有</span>
<span class="phase-transition">无主动性 → 有主动性</span>
</div>
<div class="phase">
<span class="phase-icon">🍷</span>
<span class="phase-name">享用期</span>
<span class="phase-state">自动语义激活<br>无需翻译<br>参与高层表达</span>
<div class="phase-divider"></div>
<span class="phase-meta-label">建立的东西</span>
<span class="phase-build">自由使用</span>
<span class="phase-meta-label">从无到有</span>
<span class="phase-transition">有主动性 → 自由</span>
</div>
</div>