CSS：背景填充上悬停，从底部到顶部：(CSS: Background fills on hover

请看看这个例子：

https://www.outsideonline.com/2317131/wilma-rudolph-worlds-fastest-woman

需要注意的是，当你将鼠标悬停在链接 ，背景动画从底部填充锚文本到顶部 ，并清除是从上到下，当你徘徊远离它。

我已经做了我自己的网站类似的东西。 它相关的CSS：

a {
    box-shadow: inset 0 -3px 0 -1px #FFF986;
    -webkit-transition: box-shadow .15s ease-in-out;
    transition: box-shadow .15s ease-in-out;
    color: black;
}

a:hover {
    box-shadow: inset 0 -3px 0 40px #FFF986;
    -webkit-transition: box-shadow .15s ease-in-out;
    transition: box-shadow .15s ease-in-out;
}

这给了我一个类似的效果，但不是从顶部填充上下比如上例中的链接，后台开始从矩形的各方面，以填补对到中心。

如何迫使它从顶部我共享的例子链接填写下，什么样的？ 我缺少什么？

Answer 1:

你改变错误的参数：

a:hover { box-shadow: inset 0 -40px 0 -1px #FFF986;

 a { box-shadow: inset 0 -3px 0 -1px #FFF986; transition: box-shadow .15s ease-in-out; color: black; line-height: 40px; } a:hover { box-shadow: inset 0 -40px 0 -1px #FFF986; } 

 <a href="#">Hey Mickey!</a> 

Answer 2:

使用调整为200％的50％/ 50％线性梯度的另一种解决方案。 动画背景更改背景位置：

 a { background-image: linear-gradient(to top, yellow 50%, transparent 50%); background-size: 100% 200%; background-position: top; transition: background-position 0.5s ease-in-out; /** I've changed the time for demo purposes **/ color: black; } a:hover { background-position: bottom; } 

 <a href="#">I'm a link</a> <a href="#">I'm another link</a> 

文章来源: CSS: Background fills on hover from bottom to top: