纯 html + css 实现渐变背景的链接

这种效果看起来很酷，我们来实现一下！

html

<a href="#" class="anime-link">
    hello,world
</a>

css

.anime-link {
    color: #000;
    /* 隐藏 a 标签自带的下划线 */
    text-decoration: none;
    /* 添加渐变背景 */
    background-image: linear-gradient(120deg, #f2cfe3, #c4e0f3);
    background-repeat: no-repeat;
    /* 将背景高度缩小到 2px */
    background-size: 100% 2px;
    /* 将背景放到文本下面, 模拟下划线 */
    background-position: 0 100%;
    /* 添加动画效果 */
    transition: background-size 0.3s;
}
.anime-link:hover {
    background-size: 100% 100%;
} 

done!

在线代码链接：jsbin.com/quxeyaz/edi…