按钮蒙版过渡

Question

我想要在背景中使用（我认为）遮罩的按钮悬停过渡。

在正常状态下具有白色背景和黑色字母的按钮在悬停时会从侧面滑入黑色背景，使字母在移动时变为白色。像这样：

我使用前后伪造来让它工作：

.button--slide {
  background-color: #fff;
  color: #000;
  border-radius: 10px;
  border: none;
  padding: 10px 20px;
  position: relative;
  transition: all 0.5s ease;
  cursor: pointer;
  overflow: hidden;
}

.button--slide span {
  position: relative;
  z-index: 999;
}

.button--slide:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: calc(-100% - 35px);
  top: 0;
  background-color: #000;
  transition: left 0.5s ease;
}

.button--slide:after {
  content: "";
  position: absolute;
  top: 0;
  left: -70px;
  width: 0px;
  height: 0px;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-top: 35px solid #000;
  transition: left 0.5s ease;
}

.button--slide:hover {
  color: #fff;
}

.button--slide:hover:before {
  left: 0;
}

.button--slide:hover:after {
  left: calc(100% - 35px);
}

参见 fiddle https://jsfiddle.net/5arj1emx/

这不是我想要的：我希望背景像示例中那样遮盖字母，以便当黑色背景滑过它时字母变成白色。

这可能吗？

Answer 1

为伪元素和 span 做一个背景动画，并使 span 之一为文本着色。我使用了较长的过渡时间来更好地查看结果；

body {
  background-color: #efefef
}

.button--slide {
  background-color: #fff;
  color: #000;
  border-radius: 10px;
  padding:0;
  border: none;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.button--slide span {
  display:block;
  padding: 10px 20px;
  position: relative;
  transition: all 5s ease;
  color:transparent;
  font-weight:bold;
  background:linear-gradient(-45deg,#000 50%,#fff 0) right/220% 100% no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
}

.button--slide:before {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom:0;
  background:linear-gradient(-45deg,transparent 50%,#000 0) right/220% 100% no-repeat;
  transition:  5s ease;
}

.button--slide:hover span,
.button--slide:hover:before {
  background-position:left;
}

<button class="button--slide">
<span>SEE OUR GLOBES</span>
</button>

按钮蒙版过渡

Button masked transition

css

animation

hover

transition