带下划线的CSS3过渡

如何在CSS3中从左到右创建 下划线动画hover

回答:

这是一个非常棘手的问题。

唯一的解决办法我能想出是过渡border-bottom:hover或我其实应该说我过渡border-

bottomwidthmargin-rightborder-bottom出现,并在同一时间保持,在这种情况下,链接对齐。

很难解释,所以我举了一个简短的例子,它并不完美,看起来有些混乱,但至少可以说明我的意思。:-)

HTML

<a href="#">Link</a><a href="#">Link</a>

的CSS

a {

text-decoration: none;

display: inline-block;

border-bottom: 1px solid blue;

margin-right: 39px;

width: 0px;

-webkit-transition: 0.5s ease;

transition: 0.5s ease;

}

a:hover {

-webkit-transition: 0.5s ease;

transition: 0.5s ease;

border-bottom: 1px solid blue;

width: 30px;

margin-right: 9px;

}

以上是 带下划线的CSS3过渡 的全部内容, 来源链接: utcz.com/qa/434063.html

回到顶部