⚙️ Hugo 0.164.0
🧩 原生 JS · 零依赖
🕒 构建于 09-30 22:33
动画实验室
这个页面保留站点通用的头部与左侧菜单，内容则是另一套玩法：矩阵代码雨、数字计数器、SVG 技能环、翻牌卡片、创作热度图、反应力测试，外加一条阅读进度条。
0
文章总数
0
分类数量
0
标签数量
0
累计字数
0
预计阅读(分钟)
矩阵代码雨
Canvas 逐帧渲染的经典「黑客帝国」下落字符流，自适应容器大小与帧率。
# code rain · 0.164.0
SVG 技能环
stroke-dasharray 驱动，进入视口后环形进度动画展开；渐变描边 + 圆头端点。
PHP
Laravel / 生态
JS
ES / TS / 动画
CSS
布局 / 动效
Hugo
模板 / 构建
知识卡牌
点击卡片前后翻转：正面是概念，背面是答案。
🏗️
SSG
静态站点生成器，构建时输出纯 HTML，快且安全
🎨
CSS 变量
var(--x) 一眼换肤，主题化全靠它
⚡
IntersectionObserver
元素进入视口时触发动画 / 懒加载
🧠
缓动曲线
cubic-bezier 让动画更跟手、更顺滑
🕌
svg filter
backface-visibility 实现 3D 翻牌
💡 点击卡片查看答案
创作热度图
GitHub 风格贡献热力图，以 16 周 × 7 天网格展示「灵感活跃度」——示意数据，纯装饰。
少 多
反应力测试
点击开始 → 等待红色变绿色 → 立刻点击。测测你的手速，最佳成绩会保存在本地。
点击开始测试
最近：--最佳：--次数：0