什么是 CSS 特效
CSS 特效指不依赖 JavaScript、纯用 CSS 实现的视觉与交互动画：鼠标悬停时按钮发光、页面加载时骨架屏闪烁、滚动时卡片渐入。靠的是三件套：transform（变形）、transition（过渡）、animation（关键帧动画）。
纯 CSS 特效的优势是性能好（浏览器在合成线程上跑，不阻塞主线程）、代码量小、对 SEO 友好。复杂交互（拖拽、轮播逻辑）仍需 JS，但「能 CSS 就不 JS」是前端特效的通用原则。
- transform：元素旋转、缩放、平移、倾斜，不脱离文档流
- transition：属性变化时平滑过渡，适合悬停、聚焦等「状态切换」
- animation + @keyframes：定义关键帧序列，适合循环、多步骤动画
HTML
<style> .demo { width: 120px; height: 120px; margin: 30px auto; background: linear-gradient(135deg, #f778ba, #4a9eff); border-radius: 16px; transition: transform .4s ease, box-shadow .4s ease; } .demo:hover { transform: scale(1.15) rotate(6deg); box-shadow: 0 12px 32px rgba(247, 120, 186, .45); } </style> <div class="demo"></div> <p style="text-align:center;color:#888">把鼠标移上去试试</p>
本节要点CSS 特效三剑客：transform 管变形、transition 管过渡、animation 管关键帧；优先用 CSS 实现简单特效。
