My Knowledge Base

外观

渐变、过渡与动画

约 1655 字大约 6 分钟

2025-08-16

一、前言

CSS 渐变、过渡和动画是现代 Web 开发中必不可少的技能，它们能为网站增添丰富的视觉效果和交互体验。

二、CSS 渐变

渐变是 CSS 中创建平滑颜色过渡的强大工具，无需图片即可实现丰富的背景效果。

2.1 线性渐变 (linear-gradient)

基本语法：

.linear-gradient {
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
}

方向控制：

/* 使用关键词 */
background: linear-gradient(to right, red, yellow);
background: linear-gradient(to bottom right, red, yellow);

/* 使用角度（0deg 指向顶部，90deg 指向右侧） */
background: linear-gradient(45deg, red, yellow);

多颜色渐变：

/* 三色渐变 */
background: linear-gradient(to right, red, yellow, green);

/* 指定颜色位置 */
background: linear-gradient(to right, red 0%, yellow 50%, green 100%);

/* 不均匀分布 */
background: linear-gradient(to right, red, yellow 20%, green);

实用技巧：

  • 创建微妙的背景：background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
  • 创建斜条纹：background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%);

2.2 径向渐变 (radial-gradient)

基本语法：

.radial-gradient {
  background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
}

基本用法：

/* 默认圆形，从中心开始 */
background: radial-gradient(red, yellow, green);

/* 指定形状和位置 */
background: radial-gradient(circle at top left, red, yellow, green);

/* 指定大小 */
background: radial-gradient(closest-side, red, yellow, green);
/* 可选值：closest-side, farthest-side, closest-corner, farthest-corner */

实用技巧：

  • 创建柔和的焦点效果：background: radial-gradient(circle, rgba(255,255,255,0.8), rgba(0,0,0,0.2));
  • 模拟阴影效果：background: radial-gradient(farthest-corner at 50% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 70%);

2.3 重复渐变

重复线性渐变：

/* 创建条纹图案 */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    red,
    red 10px,
    yellow 10px,
    yellow 20px
  );
}

重复径向渐变：

/* 创建波点图案 */
.polka-dots {
  background: repeating-radial-gradient(
    circle,
    white,
    white 10px,
    black 10px,
    black 20px
  );
}

使用场景：

  • 背景纹理
  • 图案设计
  • 无需图片的装饰效果

三、CSS 过渡 (Transition)

过渡让 CSS 属性的变化更加平滑，是创建简单交互效果的首选。

3.1 过渡基础

四个关键属性：

.element {
  /* 过渡的属性 */
  transition-property: background-color, transform;
  
  /* 过渡持续时间 */
  transition-duration: 0.3s;
  
  /* 过渡效果 */
  transition-timing-function: ease;
  
  /* 过渡延迟 */
  transition-delay: 0.1s;
}

简写语法：

/* transition: property duration timing-function delay; */
.element {
  transition: background-color 0.3s ease 0.1s, transform 0.4s linear;
}

常用简写：

/* 所有属性，0.3秒，ease效果 */
.element {
  transition: all 0.3s ease;
}

/* 特定属性 */
.button {
  transition: background-color 0.2s, box-shadow 0.2s;
}

3.2 过渡效果 (timing function)

常用预设值：

值描述适用场景
ease (默认)开始慢，中间快，结束慢一般过渡
linear匀速旋转、循环动画
ease-in开始慢，逐渐加速元素进入视图
ease-out开始快，逐渐减速元素离开视图
ease-in-out开始和结束慢，中间快重要状态变化

自定义贝塞尔曲线：

/* 使用 cubic-bezier() 创建自定义效果 */
.element {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

3.3 实用过渡技巧

悬停效果：

.button {
  background-color: #0066cc;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #0055aa;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

按钮交互：

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background: #4CAF50;
  color: white;
  transition: all 0.2s;
}

.button:active {
  transform: scale(0.98);
  opacity: 0.9;
}

菜单展开：

.menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.menu.open {
  max-height: 500px; /* 设置足够大的值 */
}

最佳实践：

  • 优先过渡 transform 和 opacity 属性（性能最佳）
  • 避免过渡 width、height、margin 和 padding
  • 为交互元素添加过渡效果提升用户体验
  • 保持过渡时间在 0.1-0.4 秒之间（太短不明显，太长让人等待）

四、CSS 动画 (Animation)

CSS 动画比过渡更强大，可以创建多阶段、复杂的动画效果。

4.1 关键帧动画 (@keyframes)

基础语法：

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 或使用百分比 */
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

实用技巧：

  • 使用有意义的动画名称：@keyframes pulse 而不是 @keyframes animation1
  • 保持关键帧简洁，只包含需要变化的属性
  • 可以在关键帧中使用多个属性

4.2 动画属性

关键动画属性：

.element {
  /* 动画名称（必须） */
  animation-name: fadeIn;
  
  /* 动画持续时间 */
  animation-duration: 1s;
  
  /* 动画效果 */
  animation-timing-function: ease-out;
  
  /* 动画延迟 */
  animation-delay: 0.2s;
  
  /* 动画次数 */
  animation-iteration-count: 3; /* 或 infinite */
  
  /* 动画方向 */
  animation-direction: alternate; /* normal, reverse, alternate */
  
  /* 动画结束状态 */
  animation-fill-mode: forwards; /* none, backwards, both */
  
  /* 动画状态 */
  animation-play-state: paused; /* running, paused */
}

简写语法：

/* animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
.element {
  animation: fadeIn 1s ease-out 0.2s 3 alternate forwards;
}

4.3 常用动画效果

淡入淡出：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-in;
}

滑入效果：

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in {
  animation: slideInFromLeft 0.6s ease-out;
}

旋转效果：

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 1s linear infinite;
}

脉动效果：

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

4.4 实用动画技巧

加载动画：

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #0066cc;
  border-radius: 50%;
  animation: spinner 0.8s linear infinite;
}

悬停按钮动画：

@keyframes buttonPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 102, 204, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 102, 204, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 102, 204, 0);
  }
}

.button:hover {
  animation: buttonPulse 1.5s infinite;
}

页面加载动画：

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-section {
  animation: fadeInUp 0.6s ease-out forwards;
  animation-delay: calc(0.1s * var(--delay, 0));
}

五、最佳实践与性能优化

5.1 性能考虑

  1. 优先使用 transform 和 opacity

    • 这些属性由 GPU 处理，性能最佳
    • 避免使用会触发重排的属性（width, height, margin, padding）

  2. 使用 will-change 提示浏览器

    .animated-element {
  will-change: transform, opacity;
}

  3. 控制动画复杂度

    • 避免在移动设备上使用过于复杂的动画
    • 限制同时运行的动画数量

5.2 可访问性考虑

  1. 尊重用户偏好

    @media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

  2. 提供控制选项

    • 对于长时间运行的动画，提供暂停/停止选项
    • 避免使用可能引起癫痫发作的快速闪烁效果

5.3 调试技巧

  1. 使用浏览器开发者工具

    • Chrome DevTools 的 Animation 面板
    • 可以调整动画速度、暂停和检查关键帧

  2. 临时减慢动画速度

    * {
  animation-duration: 10s !important;
  transition-duration: 10s !important;
}