放大缩小动画：掌握 CSS 基础

简介

在这个实验中，我们将通过创建一个简单而有效的放大和缩小效果来探索 CSS 动画。CSS 动画使我们无需使用 JavaScript 就能为网页添加动态视觉效果。在本实验结束时，你将了解如何使用 CSS 关键帧和动画属性来创建平滑过渡，从而提升网站的用户体验。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/fonts("Fonts") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/DynamicStylingGroup -.-> css/animations("Animations") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-35259{{"放大缩小动画"}} css/fonts -.-> lab-35259{{"放大缩小动画"}} css/box_model -.-> lab-35259{{"放大缩小动画"}} css/width_and_height -.-> lab-35259{{"放大缩小动画"}} css/backgrounds -.-> lab-35259{{"放大缩小动画"}} css/animations -.-> lab-35259{{"放大缩小动画"}} css/transformations -.-> lab-35259{{"放大缩小动画"}} end

理解 HTML 结构

在开始创建动画之前，你需要了解我们将使用的 HTML 结构。在这一步中，我们将检查提供的 HTML 文件并进行必要的修改。

在编辑器中打开 index.html 文件。
如果文件为空或缺失，请使用以下内容创建它：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zoom In Zoom Out Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>CSS Animation Demo</h1>
    <p>This box demonstrates a zoom in zoom out animation:</p>

    <div class="zoom-in-out-box"></div>
  </body>
</html>

让我们来理解这段 HTML 的作用：
- 我们有一个标准的 HTML 文档结构，包含标题和视口设置
- 我们链接到一个名为 style.css 的外部 CSS 文件
- 我们包含一个标题和段落来解释我们的演示
- 最重要的是，我们有一个带有 zoom-in-out-box 类的 <div> 元素，它将被用于动画
如果你进行了任何更改，请保存 index.html 文件。

这个 div 元素将是我们创建动画的画布。在下一步中，我们将使用 CSS 对这个元素进行样式设置。

基本 CSS 样式设置

既然我们已经有了 HTML 结构，接下来让我们为动画元素创建基本的 CSS 样式。

在编辑器中打开 style.css 文件。
如果文件为空或缺失，请使用以下内容创建它：

body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #333;
}

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
}

让我们来理解这段 CSS 的作用：
- 我们为页面设置了一些基本样式（字体、宽度和边距）
- 我们将标题设置为深灰色
- 对于我们的动画元素 .zoom-in-out-box，我们：
  - 在其周围添加了 24px 的边距
  - 将其宽度和高度设置为 50px
  - 为其赋予了鲜艳的粉色背景颜色
完成这些更改后，保存 style.css 文件。
要查看你的进度，请点击 VSCode 右下角的 “Go Live” 按钮。这将在端口 8080 上启动一个 Web 服务器。然后刷新 Web 8080 标签页，查看你设置好样式的盒子。

现在你应该在网页上看到一个小的粉色方块。这个方块就是我们将在接下来的步骤中进行动画处理的元素。

创建关键帧动画

CSS 动画的实现方式是定义关键帧（keyframes），这些关键帧指定了元素在动画序列的不同时间点应具有的样式。让我们为缩放动画创建关键帧。

再次打开 style.css 文件，并在文件末尾添加以下代码：

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

让我们来理解这段代码的作用：
- @keyframes 是一个 CSS 规则，用于定义动画的阶段和样式
- zoom-in-zoom-out 是我们为动画取的名称（稍后我们会引用这个名称）
- 在关键帧内部，我们定义了动画在不同时间点的变化：
  - 在 0%（开始时），元素使用 scale(1, 1) 保持正常大小
  - 在 50%（动画进行到一半时），元素使用 scale(1.5, 1.5) 放大到 1.5 倍大小
  - 在 100%（结束时），元素恢复到正常大小
- transform 属性结合 scale() 函数用于改变元素的大小
添加这些关键帧后，保存 style.css 文件。

关键帧定义了动画的具体效果，但我们还没有将其应用到元素上。在下一步中，我们将把动画应用到我们的方块上。

应用动画

既然我们已经定义了关键帧，接下来需要将动画应用到我们的方块元素上。

再次打开 style.css 文件，并按如下方式修改 .zoom-in-out-box 选择器：

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 1s ease infinite;
}

让我们来理解一下我们添加的 animation 属性：
- animation 是一个简写属性，可一次性设置多个动画属性
- zoom-in-zoom-out 是我们关键帧动画的名称
- 1s 指定动画的一个周期持续 1 秒
- ease 是一个计时函数，它使动画开始时较慢，然后加速，最后再减慢
- infinite 表示动画将无限循环
完成这些更改后，保存 style.css 文件。
如果 Web 服务器已经在运行，只需刷新 Web 8080 标签页。如果没有运行，点击右下角的 “Go Live” 启动服务器，然后打开 Web 8080 标签页。

现在你应该能看到你的粉色方块在持续的动画中平稳地放大和缩小。方块会逐渐变大，直到达到其原始大小的 1.5 倍，然后再缩小回正常大小。这个循环会无限重复。

尝试不同的动画属性

让我们通过尝试不同的动画属性来定制我们的动画。这将帮助你理解这些属性是如何影响动画行为的。

打开 style.css 文件，并修改 .zoom-in-out-box 选择器，尝试不同的动画属性：

.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 2s ease-in-out infinite;
  /* Add a slight rotation during the animation */
  border-radius: 10px;
}

让我们来理解一下我们做了哪些更改：
- 我们将动画持续时间延长到了 2s（2 秒）
- 我们将计时函数改为 ease-in-out，这使得动画的开始和结束都更加平滑
- 我们添加了一个 10px 的 border-radius，使方块的角变成圆角
我们还可以修改关键帧来添加旋转效果：

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1) rotate(0deg);
  }
  50% {
    transform: scale(1.5, 1.5) rotate(45deg);
    background-color: #2196f3;
  }
  100% {
    transform: scale(1, 1) rotate(0deg);
  }
}

在这个更新后的关键帧定义中：
- 我们在 transform 属性中添加了 rotate() 函数
- 在 50% 的进度时，元素在放大的同时旋转 45 度
- 我们还在 50% 的进度时将背景颜色改为蓝色
完成这些更改后，保存 style.css 文件。
刷新 Web 8080 标签页，查看增强后的动画效果。

现在你的动画应该变慢了（每个周期 2 秒），方块有圆角，在缩放的同时会旋转，并且在动画进行到一半时会改变颜色。这展示了 CSS 动画如何结合多个属性的变化来实现丰富的视觉效果。

你可以自由地进一步尝试不同的属性和值，看看它们会如何影响你的动画。

总结

恭喜你完成了「放大缩小动画」实验！在这个实验中，你学到了：

如何为 CSS 动画构建 HTML 结构
如何使用基本的 CSS 属性来设置元素样式
如何创建关键帧动画，以定义动画的各个阶段
如何使用 animation 属性将动画应用到元素上
如何通过调整计时、缓动效果以及组合多个属性变化来定制动画

这些 CSS 动画技术可用于创建引人入胜的用户界面，以响应用户交互或吸引用户对网页上重要元素的关注。

若要继续你的学习之旅，你可以考虑探索其他动画属性，如 animation-delay、animation-direction 和 animation-fill-mode。你还可以尝试对 transform 之外的不同 CSS 属性进行动画处理，例如 opacity、position 和 size。