CSS 如何在元素上创建多个转换效果

使用CSS在元素上创建多个转换效果是向网站添加趣味和互动性的好方法。通过合并各种转换效果，我们可以为用户创建动态和吸引人的体验。本文将介绍如何使用CSS在元素上创建多个转换效果的基础知识。

CSS（层叠样式表）是一种用于样式化网页的强大工具。其中最有用的功能之一是创建平滑且视觉上引人入胜的过渡效果，使元素在不同状态之间进行过渡，例如在悬停或点击时

CSS过渡效果是什么

在了解如何创建多个过渡效果之前，让我们先了解一下什么是CSS过渡效果。过渡效果是元素在两个状态之间逐渐变化的过程。例如，当我们悬停在一个按钮上时，它的背景颜色会逐渐从一种颜色变为另一种颜色。CSS允许我们指定过渡的持续时间和时机，以及正在过渡的属性。

语法

css-selector{
   transition: property duration timing-function delay;
}

CSS中的过渡属性

我们可以在CSS中使用的过渡属性包括−

过渡属性（transition-property） − 这个属性指定应该过渡的CSS属性。
过渡持续时间（transition-duration） − 这个属性指定过渡的持续时间，可以用秒或毫秒表示。默认情况下，过渡持续时间为0，表示没有应用过渡效果。
过渡缓动函数（transition-timing-function） − 这个属性控制过渡的速度和时间。
过渡延迟时间（transition-delay） − 这个属性指定过渡开始前的延迟时间。

创建基本过渡效果

要创建一个过渡效果，我们需要指定要动画化的属性，比如过渡的持续时间、缓动函数和任何延迟。例如，要为一个按钮的宽度创建一个过渡效果，我们可以使用以下代码−

button {
   transition: width 0.5s ease-in-out;
}

以上代码指定了按钮的宽度会在0.5秒内以缓入缓出的时序函数进行转换。

创建多个过渡效果

要在一个元素上创建多个过渡效果，我们需要在CSS代码中添加额外的过渡效果。例如，要创建一个既有宽度过渡效果又有背景颜色过渡效果的按钮，我们可以使用以下代码：

button {
   transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

上面的代码指定了按钮的宽度和背景颜色属性在0.5秒的时间内使用ease-in-out的时间函数进行过渡。

下面是使用CSS创建元素上多个过渡效果的一些完整代码示例 −

示例1

在这个示例中，我们将创建一个按钮，过渡其宽度和背景颜色属性。然而，我们将为每个过渡使用不同的持续时间以创建交错效果。

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      button {
         margin: auto;
         width: 100px;
         height: 50px;
         background-color: green;
         border: none;
         color: #fff;
         font-size: 16px;
         padding: 10px 20px;
         transition: width 0.5s ease-in, background-color 1s ease-out;
      }
      button:hover {
         width: 150px;
         background-color: red;
      }
   </style>
</head>
   <body>
      <h3>Multiple Transitions with Different Durations</h3>
      <button>Hover Me</button>
   </body>
</html>

在上面的示例中，我们为按钮设置了宽度为 100px 和绿色的 background-color 。然后，我们将过渡属性设置为同时过渡宽度和 background-color 属性。然而，我们使用了0.5秒的持续时间来过渡宽度，而使用了1秒的持续时间来过渡背景颜色。这会创建一个阶梯效果，其中按钮的宽度比背景颜色过渡得更快。当悬停在按钮上时，宽度会扩展到 150px ，并且 background-color 会变成红色。

示例2

在这个示例中，我们将创建一个框，过渡背景颜色和边框半径属性。然而，我们将对边框半径过渡使用延迟。

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      .box {
         margin: auto;
         width: 200px;
         height: 200px;
         background-color: red;
         border-radius: 50%;
         transition: background-color 0.5s ease-in-out, border-radius
         0.5s ease-in-out 0.5s;
      }
      .box:hover {
         background-color: blue;
         border-radius: 0;
      }
   </style>
</head>
   <body>
      <h3>Multiple Transitions with Delays</h3>
      <div> Hover over the below circle to see multiple transitions</div>
      <div class="box"></div>
   </body>
</html>

在上面的示例中，我们为框设置了200px的宽度和高度，并将背景颜色设置为红色。然后我们设置过渡属性来过渡背景颜色和边框半径属性。然而，我们为边框半径过渡设置了0.5秒的延迟。这意味着背景颜色会立即过渡，而边框半径将等待0.5秒后再过渡。当鼠标悬停在框上时，背景颜色将变为蓝色，边框半径将过渡到0，形成一个正方形。

示例3

在这里，我们将创建一个按钮，过渡宽度和颜色属性。然而，我们将为每个过渡使用不同的时间函数来创建独特的效果。

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      button {
         margin: auto;
         width: 120px;
         height: 60px;
         background-color: blue;
         border: none;
         color: red;
         font-size: 18px;
         padding: 10px 20px;
         transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
         color 1s ease-in-out;
      }
      button:hover {
         width: 180px;
         color: #fff;
      }
   </style>
</head>
   <body>
      <h3>Multiple Transitions with Different Timing Functions</h3>
      <button>Hover Me</button>
   </body>
</html>

在上述示例中，我们设置了按钮的宽度为120px，背景颜色为蓝色，然后将过渡属性设为过渡宽度和颜色属性。然而，我们对每个过渡使用了不同的时间函数。宽度过渡使用了自定义的cubic-bezier函数。当鼠标悬停在按钮上时，宽度会从120px扩展到180px，并且文本颜色会从红色变为白色。