CSS 动效积累

border 旋转加载，4 种变体（默认/双环/反向/彩色），最通用的加载动画。

三点波浪式跳动，animation-delay 错开延迟，节奏感强。

shimmer 渐变扫光，模拟头像+标题+段落内容区加载占位。

scale + opacity 循环，三层同心圆扩散，柔和现代。

双环交错旋转，外环顺时针内环逆时针，不同颜色和粗细。

5 根竖条高度波动，类似音频均衡器，延迟错开形成波浪。

2-3 个小球沿圆轨道旋转，速度和大小不同，行星式运动。

Material 风格涟漪，按点击位置生成圆形扩散。

::before 伪元素 + skew 变换，高光斜向扫过按钮。

SVG stroke-dashoffset + CSS 描边动画两种方案。

background-position 动画 + hover 加速流动。

hover 轻微放大，active 时缩小回弹，带阴影变化。

hover 时背景色从左滑入替换，::before + transform: scaleX。

右侧箭头图标，hover 时箭头向右滑动并淡出，再从左侧滑入。

hover 阴影增强 + 边框变色 + 微位移，最常见的卡片交互。

overflow:hidden 裁剪放大 + 遮罩浮现标题。

底部信息从下浮现，translateY + opacity 过渡。

3D 透视，perspective + rotateX/Y 跟随鼠标倾斜。

下划线从中心展开，文字从遮罩中向上滑出，两种效果。

hover 时图标上下弹跳几次，bounce 动画效果。

hover 时边框从四角向中心扩展形成完整边框。

淡入+位移动画，4 种方向（上/下/左/右）入场过渡。

手风琴折叠，max-height 过渡 + 旋转图标。

圆形↔方形 border-radius 过渡 + 颜色渐变。

perspective + rotateY，正反面内容不同，点击触发。

元素从 scale(0) 弹入/缩放出，带弹性效果。

内容从上/下/左/右擦除显示，4 种方向，::before 遮罩滑动。

数字从 0 滚动到目标值，requestAnimationFrame 缓动。

CSS steps() + JS 字符串截取两种实现方案。

粒子向上浮动，多 div + 随机延迟/速度/大小。

background-position 循环动画，背景渐变流动。

每个字符上下波动，延迟错开形成波浪效果。

文字横向无限滚动，首尾无缝衔接。

条纹动画 + 进度增长，indeterminate 和 determinate 两种。

scale 缩放模拟心跳，两次快跳 + 停顿的节奏。

backdrop-filter 模糊 + 半透明白底，毛玻璃质感卡片。

background-clip:text + 动态渐变流动文字。

mix-blend-mode 多种值叠加效果演示。

多层 text-shadow 叠加，霓虹灯发光文字。

圆形跟随光标，hover 交互元素时变大变色，JS 实现。

scroll-snap-type 实现全屏整屏滚动，带指示器。

-webkit-text-stroke 镂空文字，hover 填充动画。

column-count 实现多列瀑布流布局，卡片不同高度。