使按钮文本透明，以显示其后面的动画渐变

Question

我有一个带有动画渐变的元素顶部的按钮。我想要发生的是按钮的背景是白色的，文本是透明的，因此它显示按钮后面的动画渐变。我以某种方式假设这是可能的，但我被困住了。

这是我到目前为止所拥有的......

＆＃13;

＆＃13;

    .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%
      }
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

＆＃13;

＆＃13;

.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%
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请注意，这并不完美，因为元素具有不同的大小，因此渐变＆＃34;尺寸＆＃34;实际上是不同的，所以两者不能完全匹配。

Answer 2

您可以将文字放在元素中，并在按钮悬停时将其设为opacity: 0;

HTML：

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

CSS：

.button:hover .hide {
    opacity: 0;
}