代码之家 › 专栏 › 技术社区 › JasonGenX

CSS:从下到上悬停时背景填充:

css3 css html

0

JasonGenX · 技术社区 · 8 年前

请看这个例子:

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;
}

这给了我一个类似的效果,但不是像在示例链接中那样从上到下填充:背景开始从矩形的所有边向中心填充。

如何强制它从上到下填充,就像我共享的示例链接那样?我错过了什么?

2 回复 | 直到 8 年前

1

4

Kosh 7 年前

您更改了错误的参数:

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>

2

Ori Drori 8 年前

另一个使用50%/50%线性渐变的解决方案调整为200%。要设置背景动画,请更改背景位置:

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>