1. CSS3 transition简介
CSS3中的transition属性可以实现在某个属性值发生变化时，以动画效果渐变过渡到新的属性值。通过使用transition属性，可以给网页元素添加动态效果，提升用户体验。
transition属性由四个子属性构成，分别是：
transition-property：指定应用过渡效果的CSS属性。
transition-duration：指定过渡效果的持续时间。
transition-timing-function：指定过渡效果的时间曲线。
transition-delay：指定过渡效果的延迟时间。
配合使用这些子属性，可以创建各种各样的过渡效果。
2. 使用transition实现下划线
在网页中，我们经常需要给链接添加下划线以表示可以点击，而当鼠标悬停在链接上时，通常希望下划线能够以渐变的效果显示出来，以提升用户体验。
接下来，我们通过使用transition来实现这种效果。
2.1 HTML结构
我们先来定义一个基本的HTML结构，包含一个带有下划线的链接。
<a href="#" class="underline">示例链接</a>2.2 CSS样式
为了实现下划线的渐变效果，在CSS中我们需要设置一些样式。
.underline {
position: relative;
text-decoration: none;
color: #000;
}
.underline::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #000;
transition: width 0.3s ease;
}
首先，我们将链接的text-decoration属性设置为none，去除默认的下划线样式。然后，我们给链接添加了一个伪元素::after，并设置其position为relative，使其相对于链接定位。接着，我们给伪元素添加了一个宽度为0的背景色为黑色的矩形，表示下划线。
最后，我们使用transition属性将下划线的宽度进行动画过渡，过渡时间为0.3秒，并指定了过渡的时间曲线为ease。
3. 实现效果
当鼠标悬停在链接上时，我们可以看到下划线会以渐变的方式显示出来。
为了完善效果，我们还可以通过:hover伪类将下划线宽度设置为链接的宽度，如下所示：
.underline:hover::after {
width: 100%;
}
这样一来，当鼠标悬停在链接上时，下划线的宽度会动态变化为链接的宽度，并以渐变的方式显示出来。
这样，我们就成功地利用CSS3的transition属性实现了下划线的渐变效果。