CSS 如何将鼠标悬停在一个分部元素上以逐渐改变其宽度

每当我们想把一个元素的样式从一种形式的样式逐渐改变成另一种样式时，无论是用户的一些互动还是在网站上的停留时间。你可以使用动画来改变任何时间段内的大量样式。让我们看看你需要的动画的属性。

Keyframes – 这是用来为一个元素指定一个动画。它包含将发生在元素的样式上的变化。然后元素从开始的样式移动到最后提到的样式。
Animation-name – 这是用来引用动画的，这样你就不必在每次需要添加动画的时候指定规则。
Animation-duration – 这指定了动画将应用于元素的持续时间。它的初始值为0ms，可以无限期地持续下去。
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属性

我们将使用过渡属性来解决这个问题。这个属性是用来给元素添加过渡效果的。它是CSS中可用的速记属性之一。

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

以下属性组成了速记过渡属性。

Transition-delay – 这指定了浏览器需要等待的时间，之后过渡属性就会被应用。其初始值为0，正值使其等待时间更长，而负值使过渡更快。
Transition-duration – 这设置了过渡效果可见的时间长度，在这个时间长度之后，动画结束。这个属性的默认值是0，因此动画在默认情况下是不可见的。
Transition-property – 它设置了过渡效果将被应用到的元素。它可以有两个可能的值，无和所有。默认情况下，值被设置为全部，所以所有的元素都有过渡效果，但没有，所以没有任何元素有过渡效果。
Transition-timing-function – 这个属性在你需要控制动画开始、中间和结束时的过渡速度时使用。初始值被设置为easy，但CSS有很多预定义的定时函数。

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

例子

下面是一个在CSS中使用过渡属性的简单例子。

<!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框，它的宽度在2s内从150px逐渐变为500px。