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
@@ -44,6 +44,22 @@ const withSlash = (p: string) => (p.endsWith('/') ? p : `${p}/`);
|
||||
<meta name="theme-color" content="#191d23" media="(prefers-color-scheme: dark)" />
|
||||
<title>{title}</title>
|
||||
<ThemeScript />
|
||||
<script is:inline>
|
||||
// 背景辉光跟随(一次性注册:document 级监听 × raf 节流,VT 换页存活);
|
||||
// pointer:fine 且非 reduced-motion 才启用,其余设备辉光层保持隐藏
|
||||
if (matchMedia('(pointer: fine)').matches && !matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||
let raf = 0, mx = 50, my = 30;
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
mx = (e.clientX / innerWidth) * 100;
|
||||
my = (e.clientY / innerHeight) * 100;
|
||||
if (!raf) raf = requestAnimationFrame(() => {
|
||||
raf = 0;
|
||||
document.documentElement.style.setProperty('--mx', mx + '%');
|
||||
document.documentElement.style.setProperty('--my', my + '%');
|
||||
});
|
||||
}, { passive: true });
|
||||
}
|
||||
</script>
|
||||
<ClientRouter />
|
||||
<!-- 非阻塞字体 CSS:preload+onload 回切(Lighthouse P0-1:渲染阻塞 708KB 元凶) -->
|
||||
<link rel="preload" as="style" href={sansVar} onload="this.rel='stylesheet'" />
|
||||
@@ -76,6 +92,9 @@ const withSlash = (p: string) => (p.endsWith('/') ? p : `${p}/`);
|
||||
<link rel="alternate" hreflang="x-default" href={new URL(withSlash(zhPath), Astro.site)} />
|
||||
</head>
|
||||
<body>
|
||||
<!-- 背景辉光:跟随鼠标的 ink 色径向渐变(丙灰阶语言,3-4% 透明度;
|
||||
pointer:fine + 非 reduced-motion 才有 JS 驱动,其余静态隐藏) -->
|
||||
<div class="bg-glow" aria-hidden="true"></div>
|
||||
<a class="skip-link" href="#main">跳到正文</a>
|
||||
<Header />
|
||||
<main id="main" class="container">
|
||||
|
||||
Reference in new issue
Block a user