Question

我目前正试图从左到右同时更改背景和文字颜色。就像背景一样。
但是，由于变换原点在文本中不起作用，我想知道如何（如果可能的话）我能实现这个目标吗？

以下是我可以做的演示：

＆＃13;

.container {
  background-color: gray;
  height: 200px;
  width: 50vw;
  margin: 5vw;
  opacity: 0.5;
  border-left: 5px solid black;
  position: relative;
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  -webkit-transform-origin: left;
          transform-origin: left;
}
.container:hover {
  color: white;
}
.container:hover::after {
  width: 100%;
  content: '';
}
.container::after {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  opacity: 0.5;
  background-color: darkgreen;
}
.container .text {
  display: block;
  text-align: center;
  font-size: 2.3em;
  font-family: 'Roboto';
  line-height: 2.5em;
}

＆＃13;

<div class="container">
<div class="text">Change Text at the same time</div>
</div>

＆＃13;

Answer 1

我通过向.text添加以下属性来实现效果：

  background: linear-gradient(to left, black 0%, black 50%, white 50%, white 100%); // half black and half white background
  background-clip: text; // clip the background in the shape of the text
  color: transparent; // remove the color of the text
  background-size: 200%; // double the size of the background
  background-position: 100% 0; // move the background to show just the black color

现在要进行换色效果 - 将背景位置移动到0％以显示白色：

.container:hover .text {
  background-position: 0;
}

<强>演示

＆＃13;

.container {
  background-color: gray;
  height: 200px;
  width: 50vw;
  margin: 5vw;
  opacity: 0.5;
  border-left: 5px solid black;
  position: relative;
  -webkit-transition: 0.5s all ease;
  transition: 0.5s all ease;
  transform-origin: left;
}

.container:hover .text {
  background-position: 0;
}

.container:hover::after {
  width: 100%;
  content: '';
}

.container::after {
  transition: all 1s ease;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  opacity: 0.5;
  background-color: darkgreen;
}

.container .text {
  transition: all 1s ease;
  display: block;
  text-align: center;
  font-size: 2.3em;
  font-family: 'Roboto';
  line-height: 2.5em;
  background: linear-gradient(to left, black 0%, black 50%, white 50%, white 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200%;
  background-position: 100% 0;
}

＆＃13;

<div class="container">
  <div class="text">Change Text at the same time</div>
</div>

＆＃13;

浏览器支持：

受Firefox，Chrome和其他webkit浏览器支持。 IE和Edge不支持，因为他们不支持background-clip: text;

转换文本的原点？

1 个答案: