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

ID:13111 / 打印

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

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

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