feat(motion): 动效层三件——背景辉光/入场/心跳,页脚撤双入口
- 背景鼠标辉光:ink 色 4% 径向渐变跟随(pointer:fine×非
reduced-motion 才有 JS,raf 节流 document 级监听 VT 存活)——
丙灰阶语言的"活背景",触屏/减动效自动隐藏
- 正文入场 rise-in 12px/0.4s(VT 换页自然重放)+ 列表行悬停
1px 微浮;全量 prefers-reduced-motion 豁免
- 首页"最近心跳":构建期拉 blog 仓最新 commit(gitea API 8s 超时
静默降级),脉冲点+相对时长——本站自己的脉搏
- 页脚撤「装备/制作」入口(页面保留,用户决策:只删入口)
- E2E 加固:g-chords 修好后 location.href 与 goto 竞态(en 页弦
导航迟到提交打断 goto)——中断重试模式
- 过程教训:str.replace 静默无操作再犯(锚点瞄错组件文件)——
脚本未进产物却报"全落地",replace 必须 assert 配对 grep 产物
验证: --mx 鼠标双跳 15.6% 实测跟随;E2E 31/31 PASS(竞态重试后
确定性);构建 34 页 exit 0
Spec: none (动效层+页脚撤口+测试加固,车道级交付)
Co-authored-by: GLM-5.3
This commit is contained in:
1 parent
0b6524f53c
commit
363cc616f7
6 files changed
+110
-5
No files matched your search
@@ -189,6 +189,29 @@ hr { border: none; border-top: 1px solid var(--line); margin-block: var(--space-
|
||||
}
|
||||
|
||||
/* ---------- 动效总闸(唯一曲线已入 tokens) ---------- */
|
||||
/* ===== 动效层(Phase 5e):背景辉光 + 入场 + 微交互 ===== */
|
||||
:root { --mx: 50%; --my: 30%; }
|
||||
.bg-glow {
|
||||
position: fixed; inset: 0; z-index: -1; pointer-events: none;
|
||||
background: radial-gradient(600px circle at var(--mx) var(--my),
|
||||
color-mix(in oklab, var(--ink-1) 4%, transparent), transparent 70%);
|
||||
opacity: 0; transition: opacity 0.6s ease;
|
||||
}
|
||||
@media (pointer: fine) {
|
||||
.bg-glow { opacity: 1; }
|
||||
@media (prefers-reduced-motion: reduce) { .bg-glow { opacity: 0; } }
|
||||
}
|
||||
/* 正文入场:一次性轻上浮(VT 换页内容替换自然重放,克制 12px/0.4s) */
|
||||
#main > * { animation: rise-in 0.4s ease both; }
|
||||
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#main > * { animation: none; }
|
||||
}
|
||||
/* 列表行微交互(桌面悬停语言:ink 系已有变色,补 1px 上浮) */
|
||||
@media (pointer: fine) {
|
||||
.postlist .row { transition: transform 0.15s ease; }
|
||||
.postlist .row:hover { transform: translateY(-1px); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
|
||||
Reference in new issue
Block a user