SVGCSS404
404 错误脸
SVG 描边动画拼出表情
自动播放动画，无需操作。
全屏打开演示简介
数字 404 的笔画通过 stroke-dashoffset 与 transform 动画，先组成脸再眨眼、转眼、咧嘴，是极简却很有性格的 404 页方案。
收录日期 2026-01-21 · 来源 前端嘛 · Code Fun
技术栈
SVGCSS @keyframeslight-dark()
解析
SVG stroke 动画
polyline / path 用 stroke-dasharray 控制可见长度，keyframes 改变 dashoffset 实现「画出来」的效果。
无障碍
svg 带 aria-label 描述动画含义；支持 light-dark() 随系统主题变色，可直接当 404 模板。
应用场景
- ▸自定义 404 页面
- ▸错误态空状态插图
- ▸SVG 动画教学
完整源码
← 更多效果加载源码中…
请稍候…