为什么要整理 CSS 特效代码
CSS 特效不依赖 JavaScript，加载快、易维护，适合做悬停反馈、加载状态和轻量入场动画。与其到处找片段，不如按类型整理成自己的代码库。
悬停与按钮特效
最常见的是颜色过渡、上浮和阴影变化。核心写法：
.btn {
transition: transform .25s ease, box-shadow .25s ease;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
进阶可用伪元素做“扫光”和边框描边，关键是把 overflow: hidden 与 transform 配合，避免触发重排。
加载与等待动画
旋转圆环、脉冲圆点和进度条是三类基础形态。旋转动画用 @keyframes 配合 rotate：
@keyframes spin { to { transform: rotate(360deg); } }
.loader {
width: 36px; height: 36px;
border: 3px solid #e5e5e5;
border-top-color: #2f6fed;
border-radius: 50%;
animation: spin .8s linear infinite;
}
脉冲动画则改 scale 和 opacity，适合骨架屏占位。
文字与背景特效
文字渐变用 background-clip: text，打字机效果靠 steps() 控制 width。背景动画常用多层渐变加位移：
@keyframes flow {
from { background-position: 0 0; }
to { background-position: 200px 0; }
}
注意控制动画帧率与面积，大面积背景动效容易造成移动端掉帧。
滚动与入场动画
配合 IntersectionObserver 添加类名，再用 CSS 做位移和淡入，比纯 CSS 滚动驱动更可控。关键帧只写起止状态：
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.show {
opacity: 1; transform: none;
transition: all .6s ease;
}
使用建议
优先用 transform 和 opacity，它们走合成层，性能更好；避免频繁改 width、top。同时用 prefers-reduced-motion 尊重系统减弱动效设置。代码片段要按项目取舍，别为了特效牺牲可读性和加载速度。
