css - 使按钮文本透明以显示其背后的动画渐变

Question

我有一个按钮位于带有动画渐变的元素之上。我想要的是按钮的背景为白色，文本为透明，以便显示按钮后面的动画渐变。我假设这是可能的，但我被困住了。

这是我目前所拥有的...

    .gradient {
      width: 100%;
      height: 500px;
      text-align: center;
      background: linear-gradient(135deg, #53abdf 0%, #019c92 16%, #a1b524 37%, #a1b524 53%, #ea9c2e 70%, #db4025 85%, #db4025 85%);
      background-size: 200% 100%;
      padding-top: 100px;
      -webkit-animation: moveGradient 40s ease infinite;
    }
    .button {
      color: #fff;
      text-decoration: none;
      font-family: arial, sans-serif;
      font-weight: bold;
      font-size: 30px;
      border: 4px solid #fff;
      padding: 20px;
    }
    .button:hover {
      background-color: #fff;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-animation: moveGradient 40s ease infinite;
    }
    @-webkit-keyframes moveGradient {
      0% {
        background-position: 0% 47%
      }
      50% {
        background-position: 100% 54%
      }
      100% {
        background-position: 0% 47%
      }
    }

<div class="gradient">
  <a class="button" href="#">Button</a>
</div>

http://jsfiddle.net/dmcgrew/q69915k3/

Answer 1

您必须在额外的 span 内向文本背景添加相同的线性渐变，然后相应地调整 CSS。

.gradient {
  width: 100%;
  height: 500px;
  text-align: center;
  background: white linear-gradient(135deg, #53abdf 0%, #019c92 16%, #a1b524 37%, #a1b524 53%, #ea9c2e 70%, #db4025 85%, #db4025 85%);
  background-size: 200% 100%;
  padding-top: 100px;
  -webkit-animation: moveGradient 40s ease infinite;
}
.button {
  color: #fff;
  text-decoration: none;
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 30px;
  border: 4px solid #fff;
  padding: 20px;
}
.button:hover {
  background: #fff;
}
.button:hover span {
  background: linear-gradient(135deg, #53abdf 0%, #019c92 16%, #a1b524 37%, #a1b524 53%, #ea9c2e 70%, #db4025 85%, #db4025 85%);
  background-size: 200% 100%;
  background-color: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: moveGradient 40s ease infinite;
}
@-webkit-keyframes moveGradient {
  0% {
    background-position: 0% 47%
  }
  50% {
    background-position: 100% 54%
  }
  100% {
    background-position: 0% 47%
  }
}

<div class="gradient">
  <a class="button" href="#"><span>Button</span></a>
</div>

但请注意，这并不完美，因为元素具有不同的大小，因此渐变“大小”实际上不同，因此两者并不完全匹配。