CSS 动画与特效

CSS 动效实验室：脉冲/加载/悬停/轮播/玻璃/霓虹等 36 种，画布复现 + 悬停读数 + 公式说明。

技术栈: Canvas 2D, easing, keyframes, clip-path

• 关键帧与渐变文字 — 加载动画、过渡曲线对比与流光渐变文字。
• 玻璃拟态 — backdrop-filter 毛玻璃卡片与流动背景。
• 3D 翻转与倾斜卡片 — perspective + rotateX/Y 的 3D 卡片。
• 滚动驱动动画 — animation-timeline: view()，不支持时回退 IntersectionObserver。
• 脉冲环 — 可调周期、颜色与尺寸的 CSS 脉冲环。
• 加载器 — 纯 CSS 加载动画：环/点阵/条等。
• 悬停动效 — 卡片悬停反馈合集。
• 渐变流动 — 多色渐变背景流动。
• 缓动曲线 — CSS transition-timing-function 对比。
• 弹簧感 — 近似弹簧/回弹动效。
• 交错入场 — 交错入场：子元素依次出现，每个比前一个延迟一小段时间。
• FLIP 布局动画 — First-Last-Invert-Play 布局动画。
• 裁剪路径 Clip-path — clip-path 揭示/变形。
• 3D 变换 — perspective 三维变换。
• 过渡属性 — CSS transition 专属属性。
• 视差 — 多层以不同速度跟随指针，近快远慢，模拟 CSS 视差。
• 滤镜动效 — animated filter。
• 混合模式 — 混合模式：上下两层颜色按公式（如 正片叠底 = 上×下）合成，得到新的颜色。
• 骨架屏 — Skeleton loading。
• 进度条 — 线性条、环、半环、水波填充。
• 涟漪 — 水波纹：点击处出现一个圆，半径不断变大、透明度变小，像水面涟漪。
• 手风琴 — 点开一块、高度过渡展开。
• 弹层进出 — Modal enter/exit。
• 轮播 — 轮播：一组卡片横向排开，按时间或点击平滑滑到下一张。
• 揭示 — 擦除、百叶窗、圆形扩散、对角线、像素块、模糊清晰。
• 霓虹 — 多层阴影模拟 text-shadow / box-shadow 霓虹。
• 液态 — blob 边、水滴、波浪底边，悬停时黏滞拉伸。
• 跑马灯 — 横向文字、双行、徽标带、垂直。
• Ken Burns 推镜 — 图片缓动缩放平移。
• 抖动反馈 — 左右、上下、旋转、弹性、心跳、震动条。
• 关键帧序列 — 复杂 @keyframes。
• 新拟态 — 浅底上双阴影做出凸起/凹陷按钮感。
• 自定义光标 — 自定义光标环跟随指针（或自动巡游），可带拖尾。
• 文字描边动 — 文字描边沿路径奔跑（stroke-dashoffset 感），可虚线流动。
• 边框光束 — 光束沿圆角矩形边框旋转奔跑，常见于高亮卡片。
• 聚光跟随 — 暗幕上开一束跟随指针的聚光，照亮下方卡片。