Skip to content

Commit d34a371

Browse files
author
Thouen
committed
docs(homepage): 精致打磨 polish pass
统一缓动曲线(cubic-bezier)与微交互质感: - 分隔线精致化:扫描线/遥测顶线两端渐隐 - 刻度标尺主次韵律:每5格主刻度+普通次刻度双层 - HUD读数精致化:grid布局+左侧刻度点+tabular-nums+状态点 - 登记表hover升级:右移4px+标题金色+发光状态条 - 信号条hover更丝滑:位移8px+箭头发光+缓动曲线 - CTA按钮spring动效+金色阴影+active按压反馈 - 标题脉冲更柔和 - 无障碍:focus-visible金色外发光环 - reduced-motion完整降级,移动端优化
1 parent 9134db9 commit d34a371

1 file changed

Lines changed: 212 additions & 0 deletions

File tree

docs/assets/style.css

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3882,4 +3882,216 @@ code, pre { font-family: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, mon
38823882
padding-left: clamp(6px, 2vw, 18px);
38833883
}
38843884
.tk-hero__inner { gap: 40px; }
3885+
}
3886+
3887+
/* ============================================================
3888+
Polish Pass — 精致打磨
3889+
统一缓动、细节质感、无障碍、分隔线韵律
3890+
============================================================ */
3891+
3892+
/* ---------- 统一精致缓动曲线 ---------- */
3893+
.tk-btn,
3894+
.tk-signal,
3895+
.tk-signal__go,
3896+
.tk-register__row,
3897+
.tk-register__num,
3898+
.tk-metric,
3899+
.tk-link,
3900+
.tk-chip {
3901+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3902+
}
3903+
3904+
/* ---------- 分隔线精致化:两端渐隐 ---------- */
3905+
.tk-hero__scan {
3906+
background: linear-gradient(90deg,
3907+
transparent 0%,
3908+
rgba(200, 167, 91, 0.1) 8%,
3909+
var(--gold) 40%,
3910+
var(--gold-bright) 50%,
3911+
var(--gold) 60%,
3912+
rgba(200, 167, 91, 0.1) 92%,
3913+
transparent 100%);
3914+
}
3915+
3916+
/* 遥测面板顶部分隔线:两端渐隐 */
3917+
.tk-hero__telemetry {
3918+
border-top: 1px solid var(--gold-line);
3919+
border-image: linear-gradient(90deg,
3920+
transparent 0%,
3921+
var(--gold-line) 15%,
3922+
var(--gold-line) 85%,
3923+
transparent 100%) 1;
3924+
}
3925+
3926+
/* ---------- 刻度标尺:主次刻度韵律 ---------- */
3927+
.tk-hero__ruler {
3928+
background-image:
3929+
repeating-linear-gradient(
3930+
to bottom,
3931+
transparent 0,
3932+
transparent 115px,
3933+
var(--gold-border) 115px,
3934+
var(--gold-border) 117px
3935+
),
3936+
repeating-linear-gradient(
3937+
to bottom,
3938+
transparent 0,
3939+
transparent 23px,
3940+
var(--gold-line) 23px,
3941+
var(--gold-line) 24px
3942+
);
3943+
}
3944+
3945+
/* ---------- focus-visible 无障碍:金色外发光 ---------- */
3946+
.tk-btn:focus-visible,
3947+
.tk-signal:focus-visible,
3948+
.tk-link:focus-visible {
3949+
outline: none;
3950+
box-shadow: 0 0 0 3px var(--gold-glow);
3951+
border-color: var(--gold-bright);
3952+
}
3953+
.tk-signal:focus-visible { padding-left: 34px; }
3954+
3955+
/* ---------- HUD 读数精致化 ---------- */
3956+
.tk-hud {
3957+
gap: 4px;
3958+
padding: 6px 0 6px 16px;
3959+
border-left: 1px solid var(--gold-line);
3960+
border-image: linear-gradient(180deg,
3961+
transparent 0%,
3962+
var(--gold-line) 30%,
3963+
var(--gold-line) 70%,
3964+
transparent 100%) 1;
3965+
}
3966+
.tk-hud__row {
3967+
display: grid;
3968+
grid-template-columns: 44px auto;
3969+
gap: 12px;
3970+
align-items: baseline;
3971+
}
3972+
.tk-hud__label {
3973+
position: relative;
3974+
padding-left: 12px;
3975+
font-weight: 500;
3976+
}
3977+
.tk-hud__label::before {
3978+
content: "";
3979+
position: absolute;
3980+
left: 0; top: 50%;
3981+
width: 5px; height: 1px;
3982+
background: var(--gold-line);
3983+
}
3984+
.tk-hud__val {
3985+
font-weight: 600;
3986+
font-variant-numeric: tabular-nums;
3987+
}
3988+
.tk-hud__val--ok {
3989+
position: relative;
3990+
padding-left: 12px;
3991+
}
3992+
.tk-hud__val--ok::before {
3993+
content: "";
3994+
position: absolute;
3995+
left: 0; top: 50%;
3996+
transform: translateY(-50%);
3997+
width: 6px; height: 6px;
3998+
border-radius: 50%;
3999+
background: var(--success);
4000+
box-shadow: 0 0 6px var(--success-glow);
4001+
animation: tk-blink 2s ease-in-out infinite;
4002+
}
4003+
4004+
/* ---------- 登记表 hover 细节升级 ---------- */
4005+
.tk-register__row {
4006+
transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
4007+
transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
4008+
}
4009+
.tk-register__row:hover {
4010+
transform: translateX(4px);
4011+
}
4012+
.tk-register__row::before {
4013+
background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 50%, transparent 100%);
4014+
box-shadow: 0 0 8px var(--gold-glow);
4015+
}
4016+
.tk-register__name {
4017+
transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
4018+
transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
4019+
}
4020+
.tk-register__row:hover .tk-register__name {
4021+
color: var(--gold-light);
4022+
}
4023+
4024+
/* ---------- 信号条 hover 更丝滑 ---------- */
4025+
.tk-signal {
4026+
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
4027+
}
4028+
.tk-signal::before {
4029+
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
4030+
}
4031+
.tk-signal:hover {
4032+
padding-left: 40px;
4033+
}
4034+
.tk-signal__go {
4035+
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
4036+
color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
4037+
}
4038+
.tk-signal:hover .tk-signal__go {
4039+
transform: translateX(8px);
4040+
color: var(--gold-bright);
4041+
text-shadow: 0 0 10px var(--gold-glow);
4042+
}
4043+
4044+
/* ---------- CTA 按钮精致化 ---------- */
4045+
.tk-btn {
4046+
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
4047+
background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
4048+
border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
4049+
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
4050+
}
4051+
.tk-btn--primary {
4052+
box-shadow: 0 4px 18px -8px var(--gold-glow);
4053+
}
4054+
.tk-btn--primary:hover {
4055+
box-shadow: 0 12px 32px -10px var(--gold-glow);
4056+
}
4057+
.tk-btn--primary:active {
4058+
transform: translateY(-1px) scale(0.98);
4059+
}
4060+
4061+
/* ---------- 标题脉冲更柔和 ---------- */
4062+
@keyframes tk-pulse-accent {
4063+
0%, 100% {
4064+
opacity: 1;
4065+
text-shadow: 0 0 20px var(--gold-glow), 0 0 48px var(--gold-glow);
4066+
}
4067+
50% {
4068+
opacity: 0.75;
4069+
text-shadow: 0 0 10px var(--gold-glow), 0 0 24px var(--gold-glow);
4070+
}
4071+
}
4072+
4073+
/* ---------- reduced-motion 完整降级 ---------- */
4074+
@media (prefers-reduced-motion: reduce) {
4075+
.tk-btn,
4076+
.tk-signal,
4077+
.tk-register__row,
4078+
.tk-register__num,
4079+
.tk-register__name,
4080+
.tk-metric,
4081+
.tk-link,
4082+
.tk-signal__go {
4083+
transition: none !important;
4084+
}
4085+
.tk-register__row:hover { transform: none !important; }
4086+
.tk-signal:hover { padding-left: 24px !important; }
4087+
.tk-signal:hover .tk-signal__go { transform: none !important; text-shadow: none !important; }
4088+
.tk-hud__val--ok::before { animation: none !important; }
4089+
.tk-btn--primary { box-shadow: none !important; }
4090+
}
4091+
4092+
/* ---------- 移动端打磨 ---------- */
4093+
@media (max-width: 768px) {
4094+
.tk-hud { display: none; }
4095+
.tk-hero__ruler { display: none; }
4096+
.tk-signal:hover { padding-left: 24px; }
38854097
}

0 commit comments

Comments
 (0)