当然！以下是精选的 28 个炫酷的纯 CSS 特效动画示例，全部基于 CSS3 实现，无 JS 依赖，并附带简要说明和源代码片段，适用于官网首页、按钮交互、Loading 动画、文字特效、卡片悬停等常见场景。

🎨 28 个炫酷的纯 CSS 特效动画示例（含源代码）

📌 分类导航

  • ✅ 按钮交互（6个）
  • ✅ 加载动画（6个）
  • ✅ 文字特效（5个）
  • ✅ 背景动画（4个）
  • ✅ 悬浮/卡片动效（4个）
  • ✅ 图标特效（3个）

🔘 一、按钮交互动画（6个）

1. 涟漪按钮（ripple effect）

button {
  position: relative;
  overflow: hidden;
}
button::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  width: 100px;
  height: 100px;
  animation: ripple 0.6s ease-out;
}
@keyframes ripple {
  from { transform: scale(0); opacity: 1; }
  to { transform: scale(4); opacity: 0; }
}

2. 高亮边框按钮

button {
  border: 2px solid transparent;
  transition: border 0.3s;
}
button:hover {
  border: 2px solid #00f;
}

3. 滑入文本按钮

button span::after {
  content: attr(data-hover);
  position: absolute;
  left: 0;
  bottom: -100%;
  transition: bottom 0.3s;
}
button:hover span::after {
  bottom: 0;
}

4. 渐变背景动画按钮

button {
  background: linear-gradient(270deg, #ff8a00, #e52e71);
  background-size: 400% 400%;
  animation: gradientMove 8s ease infinite;
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

5. 呼吸光圈按钮

button::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 120%;
  height: 120%;
  border: 2px solid #0ff;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 0.2; }
}

6. 点亮边框按钮

button {
  border: 1px solid #fff;
  box-shadow: 0 0 0 transparent;
  transition: 0.3s;
}
button:hover {
  box-shadow: 0 0 20px #0ff;
}

🔄 二、加载动画 Loading（6个）

7. 三点跳动 Loading

<div class="dots"><span></span><span></span><span></span></div>

.dots span {
  animation: bounce 0.6s infinite alternate;
}
@keyframes bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

8. 转圈环

.loader {
  border: 4px solid #eee;
  border-top: 4px solid #00f;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}

9. 骨架屏闪烁效果

.skeleton {
  background: linear-gradient(90deg, #eee, #ddd, #eee);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  100% { background-position: -200% 0; }
}

10. 环形进度条

.progress {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 6px solid #ccc;
  border-top-color: #09f;
  animation: spin 1s infinite linear;
}

11. 波浪线加载条

.loader {
  background: repeating-linear-gradient(
    -45deg,
    #00f,
    #00f 10px,
    #fff 10px,
    #fff 20px
  );
  animation: moveWave 1s linear infinite;
}
@keyframes moveWave {
  0% { background-position: 0 0; }
  100% { background-position: 40px 0; }
}

12. 多层旋转方块

.square {
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  animation: rotate 1s infinite linear;
}
@keyframes rotate {
  100% { transform: rotate(405deg); }
}

✍️ 三、文字动画特效（5个）

13. 打字机效果

.typing {
  border-right: 2px solid;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 4s steps(20) 1s 1 normal both,
             blink 0.75s step-end infinite;
}
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
@keyframes blink {
  50% { border-color: transparent }
}

14. 渐变文本填充

.text {
  background: linear-gradient(to right, #00f, #0ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

15. 文本抖动

.shake {
  animation: shake 0.5s infinite;
}
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

16. 字母跳跃展示

span {
  display: inline-block;
  animation: jump 0.5s ease infinite;
}
@keyframes jump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

17. 打印逐字动画

@keyframes fadeIn {
  0% { opacity: 0 }
  100% { opacity: 1 }
}
span:nth-child(n) {
  animation: fadeIn 1s forwards;
  animation-delay: calc(0.1s * var(--i));
}

🌄 四、背景动画（4个）

18. 渐变背景流动

body {
  background: linear-gradient(270deg, #ff8a00, #e52e71);
  background-size: 400% 400%;
  animation: bgFlow 10s ease infinite;
}
@keyframes bgFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

19. 粒子点阵背景（使用 box-shadow）

.dot {
  width: 4px;
  height: 4px;
  background: #0ff;
  box-shadow: 10px 0, 20px 0, 30px 0;
  animation: moveDot 2s infinite linear;
}

20. 光线扫过背景

.bg-sweep::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: sweep 3s linear infinite;
}
@keyframes sweep {
  from { left: -100%; }
  to { left: 100%; }
}

21. 闪烁星星

.star {
  width: 2px;
  height: 2px;
  background: white;
  animation: twinkle 2s infinite ease-in-out;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

🧊 五、悬浮/卡片动效（4个）

22. 卡片悬浮 + 阴影

.card {
  transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

23. 翻转卡片

.card {
  transform-style: preserve-3d;
  transition: transform 0.8s;
}
.card:hover {
  transform: rotateY(180deg);
}

24. 缩放进入

.card {
  opacity: 0;
  transform: scale(0.8);
  animation: zoomIn 1s forwards;
}
@keyframes zoomIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

25. 渐变边框悬停

.card {
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: border 0.3s;
}
.card:hover {
  border-image: linear-gradient(to right, #0ff, #00f) 1;
}

🖼️ 六、图标特效（3个）

26. Icon 缓动旋转

.icon:hover {
  animation: spin 1s linear infinite;
}

27. 点亮图标边缘

.icon {
  filter: drop-shadow(0 0 6px #00f);
}

28. 缓动放大点击

.icon:active {
  transform: scale(1.2);
  transition: transform 0.1s ease;
}

✅ 如何使用这些代码？

  • 直接嵌入到 .vue / .html 项目中；
  • 可组合使用（如按钮 + loading）；
  • 可搭配 Tailwind CSS 增强效率；
  • 可改编为 SCSS 变量批量生成动效。

📚 延伸资源