LabEx
登录免费加入

使用计时函数创建 CSS3 过渡效果

CSSCSSBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文，您可以 切换至英文原版

介绍

在本实验中，参与者将探索 CSS3 过渡的强大世界，学习如何使用计时函数和过渡属性创建流畅且动态的视觉效果。实验提供了一个全面的实践方法，帮助理解如何实现和操作 CSS 过渡，从设置基本的 HTML 和 CSS 项目开始，逐步学习应用悬停效果、理解过渡语法，并探索各种计时函数。通过实践练习，学习者将掌握控制元素变换、创建交互式用户界面以及使用 CSS3 过渡技术为网页设计添加复杂视觉交互的技能。

设置 HTML 项目及基础样式

在这一步骤中，你将设置一个基础的 HTML 和 CSS 项目，以探索 CSS3 过渡效果。我们将创建一个简单的项目结构，并添加一些初始样式，为过渡效果做好准备。

首先，导航到项目目录：

cd ~/project

为我们的 CSS 过渡项目创建一个新目录：

mkdir css-transitions
cd css-transitions

接下来，使用 WebIDE 创建项目文件。创建一个 index.html 文件：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS3 Transitions</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="box">Hover Me</div>
    </div>
  </body>
</html>

然后，创建一个 styles.css 文件，并添加一些基础样式：

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.container {
  text-align: center;
}

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
}

让我们验证文件是否已正确创建：

ls

示例输出：

index.html  styles.css

此设置为我们的 CSS 过渡项目提供了一个基础框架。我们创建了一个简单的 HTML 结构，其中包含一个 div，我们将用它来演示各种过渡效果。CSS 提供了一些初始样式，使我们的元素在页面上居中并具有视觉吸引力。

实现悬停效果的基础过渡

在这一步骤中，你将学习如何在悬停元素时创建基础的 CSS 过渡效果。CSS 过渡允许你在指定的时间内平滑地改变属性值。

在 WebIDE 中打开 styles.css 文件，并修改 .box 类以添加悬停过渡效果：

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;

  /* 添加过渡属性 */
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: #2980b9;
}

让我们分解过渡属性：

  • transition: background-color 0.5s ease;
    • background-color: 需要过渡的属性
    • 0.5s: 过渡的持续时间（半秒）
    • ease: 计时函数（平滑开始和结束）

现在，让我们添加一个缩放过渡，使效果更加有趣：

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;

  /* 多个过渡属性 */
  transition:
    background-color 0.5s ease,
    transform 0.3s ease;
}

.box:hover {
  background-color: #2980b9;
  transform: scale(1.1);
}

保存文件并在网页浏览器中打开 index.html。当你悬停在盒子上时，你会看到：

  1. 背景颜色平滑变化
  2. 盒子略微增大
  3. 过渡在指定的时间内平滑发生

你将看到的示例：

  • 悬停前：蓝色盒子，正常大小
  • 悬停时：略微深蓝，盒子略微增大
  • 过渡效果平滑且渐进

探索过渡属性与语法

在这一步骤中，你将深入了解 CSS 过渡属性，并学习创建更复杂和精确过渡效果的完整语法。

更新 styles.css 文件以探索不同的过渡属性：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 20px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;

  /* 完整的过渡语法 */
  transition-property: background-color, transform, border-radius;
  transition-duration: 0.5s, 0.3s, 0.4s;
  transition-timing-function: ease-in-out, linear, ease;
  transition-delay: 0s, 0.1s, 0s;
}

.box:hover {
  background-color: #2980b9;
  transform: scale(1.2) rotate(15deg);
  border-radius: 50%;
}

让我们分解过渡属性：

  1. transition-property: 指定需要过渡的 CSS 属性

    • 可以是多个属性，用逗号分隔
    • 可以使用 all 来过渡所有可变化的属性

  2. transition-duration: 设置过渡的持续时间

    • 可以为不同的属性设置不同的持续时间
    • 以秒（s）或毫秒（ms）为单位

  3. transition-timing-function: 控制过渡的速度曲线

    • linear: 恒定速度
    • ease-in: 缓慢开始，加速
    • ease-out: 快速开始，减速
    • ease-in-out: 缓慢开始和结束

  4. transition-delay: 在过渡开始前添加延迟

    • 用于创建顺序或交错效果

你也可以使用简写的 transition 属性：

.box {
  transition:
    background-color 0.5s ease-in-out,
    transform 0.3s linear 0.1s,
    border-radius 0.4s ease;
}

更新 index.html 文件以包含多个盒子用于演示：

<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>

当你悬停在盒子上时，你会看到：

  • 不同的过渡属性
  • 不同的时间和延迟
  • 多个变换同时发生

尝试不同的计时函数

在这一步骤中，你将探索各种 CSS 计时函数，这些函数控制过渡的速度和加速度。计时函数定义了在过渡期间如何计算中间值。

更新 index.html 文件以包含多个盒子，用于演示不同的计时函数：

<body>
  <div class="container">
    <div class="box linear">Linear</div>
    <div class="box ease">Ease</div>
    <div class="box ease-in">Ease In</div>
    <div class="box ease-out">Ease Out</div>
    <div class="box ease-in-out">Ease In-Out</div>
  </div>
</body>

修改 styles.css 文件以展示不同的计时函数：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 20px;
  flex-wrap: wrap;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* Linear 计时函数 */
.linear {
  transition: transform 2s linear;
}
.linear:hover {
  transform: translateX(200px);
}

/* Ease（默认）计时函数 */
.ease {
  transition: transform 2s ease;
}
.ease:hover {
  transform: translateX(200px);
}

/* Ease-In 计时函数 */
.ease-in {
  transition: transform 2s ease-in;
}
.ease-in:hover {
  transform: translateX(200px);
}

/* Ease-Out 计时函数 */
.ease-out {
  transition: transform 2s ease-out;
}
.ease-out:hover {
  transform: translateX(200px);
}

/* Ease-In-Out 计时函数 */
.ease-in-out {
  transition: transform 2s ease-in-out;
}
.ease-in-out:hover {
  transform: translateX(200px);
}

计时函数特性：

  • linear: 从开始到结束保持恒定速度
  • ease: 缓慢开始，中间加速，最后减速（默认）
  • ease-in: 缓慢开始，结束时加速
  • ease-out: 快速开始，结束时减速
  • ease-in-out: 缓慢开始和结束，中间加速

你还可以使用自定义的 cubic-bezier 函数来实现更精确的控制：

.custom-timing {
  transition: transform 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

当你悬停在每个盒子上时，你会观察到基于其计时函数的不同运动模式。

创建高级过渡动画

在这一步骤中，你将创建一个更复杂的过渡动画，结合多个属性并展示高级的 CSS 过渡技术。

更新 index.html 文件以包含一个更具交互性的元素：

<body>
  <div class="container">
    <div class="card">
      <div class="card-front">Hover Me</div>
      <div class="card-back">Advanced Transition!</div>
    </div>
  </div>
</body>

修改 styles.css 文件以创建一个带有高级过渡效果的翻转卡片：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

.card {
  width: 300px;
  height: 200px;
  position: relative;
  perspective: 1000px;
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  transition:
    transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
    background-color 0.5s ease,
    box-shadow 0.5s ease;
}

.card-front {
  background-color: #3498db;
  color: white;
  transform: rotateY(0deg);
}

.card-back {
  background-color: #2ecc71;
  color: white;
  transform: rotateY(180deg);
}

.card:hover .card-front {
  transform: rotateY(180deg);
  background-color: #2980b9;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card:hover .card-back {
  transform: rotateY(0deg);
  background-color: #27ae60;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

关键的高级过渡技术：

  1. 使用 rotateY 实现 3D 旋转
  2. 使用 perspective 实现 3D 效果
  3. 使用 backface-visibility 隐藏元素的背面
  4. 多个过渡属性
  5. 自定义的 cubic-bezier 计时函数
  6. 悬停状态下的变换
  7. 颜色和阴影的过渡

动画展示了：

  • 平滑的 3D 卡片翻转
  • 悬停时的颜色变化
  • 阴影效果
  • 复杂的计时和多个属性的过渡

当你悬停在卡片上时：

  • 正面旋转并改变颜色
  • 背面变为可见
  • 平滑的多属性过渡

总结

在本实验中，参与者将学习如何通过构建一个专注于交互式设计技术的综合性网页项目来创建动态的 CSS3 过渡效果。实验从设置结构化的 HTML 和 CSS 环境开始，创建一个基础项目，其中包含一个居中的 div 元素，并使用背景颜色、边框圆角和 flexbox 布局等基本属性进行样式设计。

学习过程逐步深入，包括实现悬停效果、探索过渡属性和语法，以及尝试各种计时函数以创建流畅、引人入胜的动画。通过系统地开发一个 CSS 过渡项目，参与者将掌握操作元素属性的实用技能，理解过渡机制，并通过微妙且响应式的设计技术打造视觉上吸引人的网页交互，从而提升用户体验。

相关 CSS 课程
CSS 快速入门

CSS 快速入门

CSS
初级
构建一个井字棋网页应用

构建一个井字棋网页应用

HTMLCSSJavaScript
初级
创建打地鼠网页游戏

创建打地鼠网页游戏

HTMLCSSJavaScript
初级