CSS3之transition实现下划线的示例代码

下面我将为您提供关于“CSS3之transition实现下划线的示例代码”的完整攻略：

一、transition基本概念

在学习transition之前，先简述一下transition的基本概念：transition是CSS的一个属性，用于指定一个元素在属性变化时的“过渡”。例如，当一个元素的宽度从200px变为300px时，通过transition将会过渡到300px。

二、transition实现下划线的示例

下面我将提供两个实现下划线的示例：

1、基础示例

button {
    background: transparent;
    border: none;
    color: #333;
    text-decoration: none;
    position: relative;
}
button:after {
    content: "";
    display: block;
    height: 2px;
    width: 0;
    background-color: #333;
    position: absolute;
    bottom: -1px;
    left: 0;
    transition: width 0.3s ease;
}
button:hover:after {
    width: 100%;
}

上面的代码首先为button元素设置了position:relative属性，并将button:after元素的position属性设置为absolute，bottom属性设置为-1px，width属性设置为0，则它会隐藏在button元素底部。同时，我们为button:hover:after添加了一个transition，当鼠标悬停在button上时，它的宽度将从0缓慢过渡到100%。

2、渐变颜色下划线示例

a {
    display: inline-block;
    position: relative;
    color: #333;
    text-decoration: none;
}
a:before {
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    background-color: #3399cc;
    position: absolute;
    bottom: -2px;
    left: 0;
    transition: width 0.3s ease;
}
a:hover:before {
    width: 100%;
}

上面的示例与第一示例类似，不同之处在于添加了一个渐变色的效果。我们为a元素添加了一个:before伪元素，将它的height属性设置为3px，bottom属性设置为-2px，width属性设置为0，而background-color属性设置为我们想要的渐变颜色。当鼠标悬停在a元素上时，它的宽度将从0缓慢过渡到100%，同时也会呈现出我们想要的渐变颜色。

三、总结

通过上述两个示例代码的介绍，您应该已经掌握了使用CSS3之transition实现下划线的方法。不论是基础示例还是渐变颜色下划线示例，在使用时只需要将代码复制到自己的CSS样式文件中即可。希望本攻略对您有所帮助。