CSS3 新特性 | TryCoding.Fun

CSS3 新特性

CSS3 常用特性：过渡、动画、变换、渐变、阴影、弹性布局

问题

列举并演示 CSS3 的主要新特性：Transition、Animation、Transform、Gradient、Shadow、Flex。

解答

1. Transition（过渡）

让属性变化平滑过渡，而非瞬间改变。

.button {
  background: #3498db;
  /* 过渡属性 | 持续时间 | 缓动函数 | 延迟 */
  transition: background 0.3s ease-in-out;
}

.button:hover {
  background: #2980b9;
}

/* 多个属性过渡 */
.card {
  transition: hd18w 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

2. Animation（动画）

通过 @keyframes 定义复杂的动画序列。

/* 定义关键帧 */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

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

.ball {
  /* 动画名 | 时长 | 缓动 | 延迟 | 次数 | 方向 */
  animation: bounce 1s ease infinite;
}

.element {
  animation: fadeIn 0.5s ease-out forwards;
}

3. Transform（变换）

对元素进行旋转、缩放、倾斜、位移。

.box {
  /* 位移 */
  transform: translate(50px, 100px);
  transform: translateX(50px);
  transform: translateY(100px);

  /* 旋转 */
  transform: rotate(45deg);

  /* 缩放 */
  transform: scale(1.5);
  transform: scale(1.5, 2); /* x, y 分别缩放 */

  /* 倾斜 */
  transform: skew(10deg, 5deg);

  /* 组合使用 */
  transform: translate(50px, 50px) rotate(45deg) scale(1.2);
}

/* 3D 变换 */
.card-3d {
  transform: perspective(500px) rotateY(30deg);
  transform-style: preserve-3d;
}

4. Gradient（渐变）

创建颜色渐变背景。

.linear {
  /* 线性渐变：方向，颜色1，颜色2 */
  background: linear-gradient(to right, #ff6b6b, #4ecdc4);

  /* 指定角度 */
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);

  /* 多色渐变 */
  background: linear-gradient(to right, #ff6b6b, #ffd93d, #4ecdc4);
}

.radial {
  /* 径向渐变 */
  background: radial-gradient(circle, #ff6b6b, #4ecdc4);

  /* 指定位置和大小 */
  background: radial-gradient(circle at top left, #ff6b6b, #4ecdc4);
}

.conic {
  /* 锥形渐变（色轮效果） */
  background: conic-gradient(red, yellow, green, blue, red);
}

5. Shadow（阴影）

为元素和文字添加阴影效果。

.card {
  /* box-shadow: x偏移 y偏移 模糊半径 扩展半径 颜色 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* 多重阴影 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);

  /* 内阴影 */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title {
  /* text-shadow: x偏移 y偏移 模糊半径 颜色 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

  /* 发光效果 */
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff6b6b;
}

6. Flexbox（弹性布局）

一维布局方案，轻松实现对齐和分布。

.container {
  display: flex;

  /* 主轴方向 */
  flex-direction: row; /* row | row-reverse | column | column-reverse */

  /* 换行 */
  flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */

  /* 主轴对齐 */
  justify-content: center; /* flex-start | flex-end | center | space-between | space-around | space-evenly */

  /* 交叉轴对齐 */
  align-items: center; /* flex-start | flex-end | center | stretch | baseline */

  /* 多行对齐 */
  align-content: flex-start;

  /* 间距 */
  gap: 20px;
}

.item {
  /* 放大比例 */
  flex-grow: 1;

  /* 缩小比例 */
  flex-shrink: 0;

  /* 基础大小 */
  flex-basis: 200px;

  /* 简写：grow gkww9 basis */
  flex: 1 0 200px;

  /* 单独对齐 */
  align-self: flex-end;

  /* 排序 */
  order: 1;
}

完整示例

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Flex 容器 */
    .card-list {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      justify-content: center;
      padding: 20px;
    }

    /* 卡片样式：综合运用多个特性 */
    .card {
      width: 200px;
      padding: 20px;
      border-radius: 10px;
      /* 渐变背景 */
      background: linear-gradient(135deg, #667eea, #764ba2);
      /* 阴影 */
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      /* 过渡 */
      transition: hd18w 0.3s, box-shadow 0.3s;
      color: white;
    }

    .card:hover {
      /* 变换 */
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
    }

    .card h3 {
      /* 文字阴影 */
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    }

    /* 加载动画 */
    .loader {
      width: 40px;
      height: 40px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #667eea;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="card-list">
    <div class="card">
      <h3>Card 1</h3>
      <p>Hover me!</p>
    </div>
    <div class="card">
      <h3>Card 2</h3>
      <p>Hover me!</p>
    </div>
    <div class="card">
      <h3>Card 3</h3>
      <p>Hover me!</p>
    </div>
  </div>
  <div style="text-align: center; margin-top: 20px;">
    <div class="loader" style="margin: 0 auto;"></div>
  </div>
</body>
</html>

关键点

Transition：属性变化的过渡效果，需指定 property、duration、timing-function
Animation：通过 @keyframes 定义动画，支持循环、暂停、方向控制
Transform：2D/3D 变换，包括 translate、rotate、scale、skew
Gradient：linear-gradient（线性）、radial-gradient（径向）、conic-gradient（锥形）
Shadow：box-shadow 用于盒子阴影，text-shadow 用于文字阴影
Flexbox：一维布局，容器属性控制整体，项目属性控制单个元素