Question

我需要创建一个按钮，悬停时，它不仅需要从底部到顶部填充背景颜色，而且还必须从底部到顶部更改文本颜色。

我对这种方法还不错： CSS: Background fills on hover from bottom to top:

但是它也必须将内部文本的颜色从下到上

<style>
 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;
        }
</style>
 <a href="#">I'm a link</a>
 <a href="#">I'm another link</a>

以下是我确切需要的屏幕截图：这是a link to screenshot！

Answer 1

为背景考虑一个额外的图层，并使用背景为文本着色。然后以相同的方式为两个动画设置动画：

\;

a {
  padding:20px;
  display:inline-block;
  border:1px solid #000;
  position:relative;
  text-decoration:none;
  font-weight:bold;
  font-size:20px;

  background-image: linear-gradient(to top, red 50%, #000 50%);
  
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
a:before {
  content:"";
  z-index:-1;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: linear-gradient(to top, yellow 50%, transparent 50%);
}

a,
a:before {   
  background-size: 100% 200%;
  background-position: top;
  transition: background-position 0.5s ease-in-out;
}

a:hover,
a:hover:before{
  background-position: bottom;
}

您也可以将其作为多个背景来使用，而无需额外的元素（不适用于Fiferox）

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

a {
  padding:20px;
  display:inline-block;
  border:1px solid #000;
  position:relative;
  text-decoration:none;
  font-weight:bold;
  font-size:20px;

  background-image: 
    linear-gradient(to top, red 50%, #000 50%),
    linear-gradient(to top, yellow 50%, transparent 50%);
  
  -webkit-background-clip: text,padding-box;
  background-clip: text,padding-box;
  -webkit-text-fill-color: transparent;
  color: transparent;  
  background-size: 100% 200%;
  background-position: top;
  transition: background-position 0.5s ease-in-out;
}

a:hover{
  background-position: bottom;
}

悬停时，填充按钮的背景从下到上，文本颜色从下到上

1 个答案: