Motionweb Studio（摩讯）· 实验室 https://motionweb.cc.cd/lab.html 网站设计、前端开发、动效与性能方面的技术记录。 zh-CN Fri, 16 Oct 2026 04:35:11 GMT 用 CSS 实现滚动驱动的路径描边 https://motionweb.cc.cd/lab.html scroll-path-draw 动效 Wed, 18 Feb 2026 09:00:00 GMT 给 SVG 路径加描边动画，常见做法是滚动监听加手算进度。改用 animation-timeline: view()，把进度交给合成器，主线程不再被滚动事件占住。 字体子集化到底省了多少 https://motionweb.cc.cd/lab.html font-subsetting 性能 Thu, 22 Jan 2026 09:00:00 GMT 中文字体动辄几 MB，实际页面用到的字通常不到两千个。构建期子集化后，三个真实项目首屏字节数降了 87% 到 92%。 状态流转图：把状态机画成人能看懂的图 https://motionweb.cc.cd/lab.html state-flow-graph 交互 Fri, 14 Nov 2025 09:00:00 GMT 订单、工单这类多状态流转，用表格描述永远说不清。输入状态定义与变更规则，输出可交互的图，节点按状态着色，点击看历史。 上线前的自检清单，做成了脚本 https://motionweb.cc.cd/lab.html preflight-checklist 工具 Tue, 30 Sep 2025 09:00:00 GMT 断链、锚点、canonical、分享图、404 页、图片有没有预留尺寸。与其每次手动过一遍，不如写成脚本跑一次。 为什么你的视差滚动会抖 https://motionweb.cc.cd/lab.html parallax-jank 动效 Wed, 11 Jun 2025 09:00:00 GMT 绝大多数抖动来自用 top 或 margin 做位移，这些属性会触发重排。换成 transform 走在合成层，同样的效果，掉帧立刻消失。 键盘操作一遍自己的站，会发现什么 https://motionweb.cc.cd/lab.html keyboard-audit 可访问性 Wed, 05 Mar 2025 09:00:00 GMT 只用 Tab 键走完整站，问题通常成片出现：焦点丢失、顺序混乱、下拉打不开、弹窗关不掉。记录了六个项目里的典型问题与修法。 图片到底该用什么格式和尺寸 https://motionweb.cc.cd/lab.html image-formats 性能 Mon, 09 Dec 2024 09:00:00 GMT AVIF、WebP、JPEG 各自在什么场景更划算，视网膜屏下该给多大，什么时候该裁切而不是缩放。整理成一张决策表。 零依赖构建一个小型静态站 https://motionweb.cc.cd/lab.html zero-dep-build 工程 Tue, 20 Aug 2024 09:00:00 GMT 官网这类项目，上一套重型框架往往得不偿失。用两三百行的 Node 脚本读页面片段、套统一版式、输出静态文件。