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