如何在CSS中通过悬停在一个分割元素上逐渐改变宽度？

WBOY 转载: 2023-08-23 23:57:02 938浏览

每当我们想要逐渐改变一个元素的样式，从一种样式过渡到另一种样式，无论是通过用户的交互还是通过停留在网站上的时间来实现。您可以使用动画来在任意时间段内改变许多样式。让我们来看一下您需要的动画属性。

关键帧− 这用于指定一个元素的动画。它包含将发生在元素样式上的变化。然后，元素从开始时的样式移动到最后提到的样式。
Animation-name − 这是用于引用动画的，这样您就不必每次添加动画时都要指定规则。
动画持续时间 − 这指定了动画应用于元素的持续时间。它的初始值为0ms，可以无限期地进行。
Animation-iteration-count − 这确定了动画将重复播放的次数。
动画延迟 − 如果您需要将动画延迟一段时间，可以使用此属性。
动画方向 − 这指定了动画是需要向前方向、向后方向还是在两个方向上交替进行。
动画时间函数 − 当您希望动画在开始、中间和结束时具有不同的时间间隔时，使用此属性。

我们还可以使用“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，正值会使其等待更长时间，而负值会使过渡更快。
过渡持续时间 - 这设置了过渡效果可见的时间持续时间，在此持续时间之后，动画结束。此属性的默认值为0，因此默认情况下动画是不可见的。
Transition-property − 它设置将应用过渡效果的元素。它可以有两个可能的值，none和all。默认情况下，值设置为all，因此所有元素都应用了过渡效果，但none表示没有任何元素具有该过渡效果。
Transition-timing-function − 此属性用于控制动画开始、中间和结束时的过渡速度。初始值设置为ease，但CSS有许多预定义的时间函数。

我们可以在悬停状态下设置过渡属性，动画将在悬停或使用活动伪类时触发。我们还可以使用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。