如何在 CSS 中将鼠标悬停在分区元素上以逐渐改变其宽度?

cssweb developmentfront end technology更新于 2025/2/12 21:00:17

每当我们想要逐渐将元素的样式从一种样式更改为另一种样式时，无论是用户交互还是用户在网站上停留的时间。您可以使用动画来在任意时间段内更改多种样式。让我们来看看动画所需的属性。

Keyframes − 用于指定元素的动画。它包含元素样式将要发生的变化。然后，元素将从开头的样式移动到结尾提到的样式。
Animation-name − 此属性用于引用动画，这样您就不必在每次需要添加动画时都指定规则。
Animation-duration − 此属性指定动画应用于元素的持续时间。其初始值为 0 毫秒，可以无限期地持续下去。
Animation-iteration-count − 此属性决定动画重复的次数。
Animation-delay − 如果您需要动画延迟一段时间，可以使用此属性。
Animation-direction − 指定动画是向前、向后还是双向交替播放。
Animation-timing-function − 当您希望动画在开始、中间和结束时具有不同的时间时，请使用此属性。

我们还可以使用简写属性"animation"，它由所有这些属性组成。它适用于所有元素，但不可继承。需要注意的是，使用简写符号时值的顺序很重要，因为每个值的解释都基于其顺序而不同。

示例

下面给出了一个在 CSS 中使用动画的示例。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Animations in CSS</title>
   <style>
      @keyframes example {
         from {
            background-color: maroon;
         }
         to {
            background-color: plum;
         }
      }
      div {
         width: 500px;
         height: 500px;
         margin: 12.25%;
         background-color: maroon;
         animation-name: example;
         animation-iteration-count: infinite;
         animation-duration: 4s;
      }
   </style>
</head>
<body>
   <div></div>
</body>
</html>

现在我们了解了 CSS 中的动画，我们将讨论如何为 div 元素添加动画，使其宽度逐渐变化。

Transition 属性

我们将使用 transition 属性来解决这个问题。此属性用于为元素添加过渡效果。它是 CSS 中可用的简写属性之一。

它定义了动画发生时发生的过渡，元素的状态会从一种状态转换为另一种状态。它适用于所有元素，并且不可继承。

以下属性构成了简写 transition 属性。

Transition-delay − 这指定了浏览器在应用 transition 属性之前需要等待的时间。它的初始值为 0，正值表示等待时间更长，负值表示过渡速度更快。
Transition-duration − 设置过渡效果的持续时间，动画在此持续时间后结束。此属性的默认值为 0，因此默认情况下动画不可见。
Transition-property − 设置将应用过渡效果的元素。它可以有两个值:none 和 all。默认情况下，设置为 all 表示所有元素都会应用过渡效果，设置为 none 表示所有元素都不会应用该过渡效果。
Transition-timing-function − 当您需要控制动画开始、中间和结束时的过渡速度时，使用此属性。初始值设置为 ease，但 CSS 有很多预定义的定时函数。

我们可以在悬停状态下设置 transition 属性，动画将在悬停时触发，或者使用 active 伪类。我们也可以使用 JS 动态分配类名，并使用它们来触发过渡。

示例

下面给出了一个在 CSS 中使用 transition 属性的简单示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      a {
         text-decoration: none;
         font-size: 14px;
         transition: font-size 4s 1s;
      }
      a:hover {
         font-size: 36px;
      }
   </style>
</head>
<body>
   <a>This text will have its font modified on hover</a>
</body>
</html>

执行上述程序后，将显示一段文本，如果将鼠标悬停在该文本上，则可以在文本中看到过渡效果。

使用过渡作为解决方案

现在我们将看到一个使用过渡来解决当前问题的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         color: royalblue;
      }
      div {
         width: 150px;
         height: 200px;
         background: linear-gradient(
            0deg,
            rgb(111, 190, 87) 20%,
            rgb(119, 218, 119) 50%,
            rgb(93, 81, 76) 98%
         );
         transition: width 2s;
      }
      .textCenter {
         display: flex;
         align-items: center;
         justify-content: center;
      }
      div:hover {
         width: 500px;
      }
   </style>
</head>
<body>
   <h1>Example of using transition property to increase width gradually on hover.</h1>
   <div class="textCenter">Please hover over here</div>
</body>
</html>

上述程序的输出是一个 div 框，其宽度在 2 秒内从 150px 逐渐变为 500px。