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

PHP中文网 • 2025年3月10日 17:30:03 • 编程技术 • 阅读 2

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

关键帧− 这用于指定一个元素的动画。它包含将发生在元素样式上的变化。然后，元素从开始时的样式移动到最后提到的样式。

Animation-name − 这是用于引用动画的，这样您就不必每次添加动画时都要指定规则。

动画持续时间 − 这指定了动画应用于元素的持续时间。它的初始值为0ms，可以无限期地进行。

立即学习“前端免费学习笔记（深入）”；

Animation-iteration-count − 这确定了动画将重复播放的次数。

动画延迟 − 如果您需要将动画延迟一段时间，可以使用此属性。

动画方向 − 这指定了动画是需要向前方向、向后方向还是在两个方向上交替进行。

动画时间函数 − 当您希望动画在开始、中间和结束时具有不同的时间间隔时，使用此属性。

我们还可以使用“animation”缩写属性，它由所有这些属性组成。它适用于所有元素，但不可继承。需要注意的是，在使用缩写符号时，值的顺序很重要，因为每个值根据其顺序以不同的方式解释。

例子

在CSS中使用动画的示例如下所示。

   Animations in CSS      @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;      }

登录后复制

现在我们知道了CSS中的动画是什么，接下来我们将讨论如何通过动画来使div元素逐渐改变其宽度。

过渡属性

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

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

以下属性构成了缩写过渡属性。

Transition-delay − 这个属性指定了浏览器在应用过渡属性之前需要等待的时间。它的初始值为0，正值会使其等待更长时间，而负值会使过渡更快。

过渡持续时间 – 这设置了过渡效果可见的时间持续时间，在此持续时间之后，动画结束。此属性的默认值为0，因此默认情况下动画是不可见的。

Transition-property − 它设置将应用过渡效果的元素。它可以有两个可能的值，none和all。默认情况下，值设置为all，因此所有元素都应用了过渡效果，但none表示没有任何元素具有该过渡效果。

Transition-timing-function − 此属性用于控制动画开始、中间和结束时的过渡速度。初始值设置为ease，但CSS有许多预定义的时间函数。

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

例子

在CSS中使用transition属性的一个简单示例如下所示。

         a {         text-decoration: none;         font-size: 14px;         transition: font-size 4s 1s;      }      a:hover {         font-size: 36px;      }   This text will have its font modified on hover

登录后复制

在执行上述程序时，将显示一段文本，如果你将鼠标悬停在上面，你可以看到文本的过渡效果。

使用过渡作为解决方案

我们现在将看到一个使用过渡来解决手头问题的例子。

         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;      }   Example of using transition property to increase width gradually on hover.
   Please hover over here

登录后复制

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