数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用CSS使悬停在div元素上时宽度逐渐变化？
无论何时我们想要逐渐改变元素的样式，从一种样式到另一种样式，无论是用户的交互还是在网站上的停留时间，都可以使用动画来改变各种样式，持续任意时间长度。让我们来看看动画所需的属性。
关键帧 - 用于为元素指定动画。它包含将发生在元素样式上的更改。然后，元素从开始时的样式移动到最后提到的样式。
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属性
我们将使用transition属性来解决这个问题。此属性用于向元素添加过渡效果。它是CSS中可用的简写属性之一。
它定义了动画发生时发生的过渡，以及元素从一种状态变为另一种状态。它应用于所有元素，并且不可继承。
以下属性构成了transition简写属性。
transition-delay - 指定浏览器需要等待的时间，之后应用transition属性。其初始值为0，正值使其等待更长时间，而负值使过渡更快。
transition-duration - 设置transition效果可见的持续时间，此持续时间后动画结束。此属性的默认值为0，因此默认情况下动画不可见。
transition-property - 设置将应用transition效果的元素。它可以有两个可能的值：none和all。默认情况下，值为all，因此所有元素都应用了transition效果，但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>
执行上述程序后，将显示文本，如果悬停在其上，则可以看到文本的过渡。
使用Transition作为解决方案
我们现在将看到一个使用transition来解决问题的示例。
<!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。
结论
总而言之，使用CSS悬停选择器来逐渐更改div元素的宽度是添加细微动画效果的有效方法，无需任何额外的代码。在创建网页中的交互式元素（如按钮和菜单）时，它尤其有用。只需几行代码，您就可以创建动态效果，帮助您的页面脱颖而出。
705 次浏览
