28个纯CSS动画特效合集：零JS实现按钮、加载、3D卡片等交互

1. 萌新先停手：CSS动画到底能扛多少事，又扛不住什么事

先讲个我自己的经历。前两年带新人，几乎每个刚入行的前端都默认一个事——动画就是JS的专利。一说做特效，满脑子全是轮播图插件、three.js、canvas，开口就是"这个要不要引个库"。等我把一套纯CSS按钮光效怼到他们面前，他们第一反应是：这玩意居然能不用JS？

所以我一直觉得，"前端萌新别卷JS了"这句话不是贩卖焦虑，是真心话。CSS动画这套东西，价格低、见效快、面试还爱问，完全可以作为你点亮交互能力的第一个技能树。这篇博文我把28个纯CSS动画特效整理成了一份可复用的合集，全部都是复制粘贴就能跑的程度，每个我都标注了难度和适用场景，后面还会把核心机制和踩过的坑一并交代清楚。不管你是刚入行想给个人项目加点质感，还是准备面试想补一补动画原理，这份清单都够你消化一阵子。

先说清楚一个边界：CSS动画到底能扛多少事？以我的判断，日常UI里的交互动效，80%以上用纯CSS就能搞定。按钮悬停、卡片浮起、加载转圈、文字渐变、3D翻转、玻璃拟态悬浮，这些都是CSS的主场。真正需要JS的场景，是数据驱动的动画（比如图表过渡）、用户拖拽相关的物理反馈、游戏类渲染，以及需要JS计算位置后再做动画的情况。这些是另一门课，今天不碰。

1.1 为什么我敢说你被JS惯坏了

很多新人写动画的第一反应是 setInterval + 改style，或者直接上requestAnimationFrame。不是说不行，而是大部分需求根本没必要动用这套。CSS动画的优势有三个，越到后面越值钱：

一是声明式。你只需要告诉浏览器"从哪到哪、多快、什么节奏"，剩下的它自己算。JS写动画你得自己管理每一帧的状态，代码一多就乱。

二是性能。这个是硬道理。浏览器有合成器（compositor），动画如果跑在transform和opacity上，可以不进入主线程，由GPU直接合成渲染。你用JS去改left、top这些会触发layout和paint的属性，每帧都要重算布局，卡顿就是这么来的。CSS动画能自动走合成器这条快车道，这是它最被低估的优势。

三是可维护性。一个类名控制一个状态，hover就过渡，加个class就播放，语义清楚。JS动画的状态管理一多，后面人接手就想骂人。

1.2 渲染管线里的真相：为什么transform和opacity这么香

这里需要补一个偏底层的基础知识，面试问到"CSS动画为什么性能好"就靠它了。浏览器渲染一帧要走这么几步：样式计算（Style）→ 布局（Layout）→ 绘制（Paint）→ 合成（Composite）。

你改 width、height、left、top，会触发 Layout，意味着浏览器要重新计算元素的位置和尺寸，后面 Paint 和 Composite 全部跟着走一遍，这是最贵的操作。你改 background-color、box-shadow，会触发 Paint，比 Layout 便宜一些，但每一帧都得重绘。而你改 transform 和 opacity，浏览器可以直接跳过 Layout 和 Paint，把元素丢给合成器做位移、旋转、缩放和透明度变化。这就是为什么我一直强调：做动画优先用 transform 和 opacity，实在不行才去改其他属性。

你自己写动效的时候，可以记住这个判断顺序：能用 transform，就不要用 top/left；能用 opacity，就不要用 display: none；能用 transform: scale，就不要用 width/height 去硬挤。

1.3 transition和animation，选错就是你动画不动的第一个原因

很多新手分不清这两个东西，其实一句话就能说清：transition 管的是状态切换时补间过渡，它需要你改变某个属性值才触发；animation 管的是定义好的关键帧动画，它不需要外部状态改变，自己就会播。

按钮悬停变色这种"从正常态到悬浮态"的过渡，是 transition 的典型场景。而加载转圈、霓虹闪烁这种"不需要交互自己一直动"的，就必须用 animation。选错会出现什么现象？最常见的：你给一个元素写了 transition: opacity 0.3s，但根本没有状态变化触发它，那它永远不会动。或者你给一个元素写了 animation，却想在 hover 时才播，结果元素一加载就开始自顾自地转。搞清楚这两个的定位，后面抄代码才不会抄出莫名其妙的问题。

2. 28个特效全家桶：抄之前先看这份清单

这套合集的核心思路很简单：我按"能直接用在真实项目里"的标准，从这些年自己攒的代码里筛了28个纯CSS特效。每个特效都遵循三条原则：不依赖JS、不依赖外部库、尽量只用 transform/opacity 来保证性能。

2.1 我按使用场景把28个特效分成了五类

分类很重要，因为同样是特效，用错的场景比没用特效还尴尬。比如加载动画做成闪烁霓虹，用户会觉得页面坏了；按钮光效做得太花，重要操作反而没人敢点。我的分类标准是：悬停交互类用在按钮和卡片上，加载背景类用在等待和页面氛围上，文字类用在标题和品牌露出上，3D卡片类用在产品展示上，最后一类纯装饰类就是给页面加一点呼吸感。

2.2 完整清单和难度参考

下面是28个特效的完整清单，星号越多越难。我后面几个大章节会挑重点的逐一拆源码，剩下的一小节给极简速查版本，全部代码都是可以直接跑通的。

3. 悬停交互类拆解：按钮光效、边框描画、图标漂浮、卡片上浮

先拆悬停交互，这是你项目里最常用的。我挑四个代表性强的写完整代码，其他几个在这个基础上改改参数就能用。

3.1 按钮流光扫过：一个伪元素搞定高级感

这个效果是百搭之王。原理不复杂：按钮上盖一个半透明的斜向渐变条，平时藏在左边，hover时让它从左边快速滑到右边，视觉上就像一道光扫过去。关键点是父元素必须 overflow: hidden，不然那条光会露出去。

css复制.btn-shine {
  position: relative;
  overflow: hidden;
  padding: 12px 32px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  f