使用CSS实现文本颜色从左到右填充

Question

使用CSS实现文本颜色从左到右填充

6

我正在尝试为类".popUpWord"的文字添加动画效果。在鼠标悬停时，我想要进行颜色动画，使文本颜色从左到右渐变。

<span class="popUpWord">hello</span>

我希望做的与这个类似 - 从左到右填充动画，但我想要它从左到右填充停止，而不是重复填充。

请问这是否可以通过CSS实现？

- Techs

我想要实现的效果类似于卡拉OK歌词的显示方式。我不知道是否可以使用渐变来实现。 - Techs

@DaniP，类似那个。然而，我想先用白色显示例如“文本”的单词，然后从左到右填充颜色。 - Techs

那么，是什么阻止了你去尝试呢？尝试改变初始颜色或其他东西... - DaniP

@DaniP已经尝试过了，但我没有成功，所以我才问的。 - Techs

http://codepen.io/anon/pen/YpEXPz ;) - DaniP

显示剩余2条评论

3个回答

2

我在回答发布多年后才发现这个问题。据我所知，被接受的答案不能与不同的背景颜色一起使用。例如，我尝试将其用于深灰色背景，并创建了一个我不想要的黑色框。

我寻找其他解决方案并找到了这个。基本上，您有两个完全重叠的相同文本实例。使用css-grid的justify-content: start定位文本，并且overflow:hidden带有0的宽度。

当悬停时，填充文本div的宽度增加，这有效地实现了相同的效果：从左到右显示覆盖文本。覆盖文本周围有一个额外的div，宽度足以适应整个文本的宽度。这可以防止div增大时文本跳到下一行。

.wrapper {
  position: relative;
  width: 400px;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  background: beige
}

.fill-wrapper {
  width: 300px;
}

.fill-text {
  display: grid;
  justify-content: start;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  word-break: keep-all;
  width: 0;
  color: red;
  transition: 0.5s width ease-in-out;
}

.text {
  width: 150px;
  color: black;
}

.wrapper:hover .fill-text {
  width: 150px;
  transition: 0.5s width ease-in-out;
}

<div class="wrapper">
  <div class="fill-text">
    <div class="fill-wrapper">
      My Text
    </div>
  </div>
  <div class="text">
    My Text
  </div>
</div>

- Hendeca

1

我们可以使用新功能background-clip:text。首先，我们将color设置为透明（这将使我们的背景颜色可见），然后将背景设置为渐变，其中两种颜色各占50％（第一种颜色是我们要过渡到的颜色，第二种颜色是基础颜色）。接下来，我们将background-size设置为200％，将background-position设置为100％（这将仅显示我们的第二种颜色）。最后，我们使用background-position:0;添加悬停效果。

h1{
  color: transparent;
  background-image: linear-gradient(90deg, yellow 50%, green 50%);
  background-position:100%;
  background-size:200% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  
  transition: background-position 1s ease;
}
h1:hover{
  background-position:0;
}

<h1>Some text</h1>

背景位置。

- Matiiv Vasyl

谢谢！这帮助我创建了这个 https://codepen.io/danbrellis/pen/dyQmbex - danbrellis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jafarbtech · Accepted Answer

当鼠标悬停时，添加一个外部div并添加mix-blend-mode: multiply;

.popUpWord {
  text-transform: uppercase;
  font: bold 26vmax/.8 Open Sans, Impact;
  background: black;
  display: table;
  color: white;
}

.outPop:hover {
  margin: auto;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 2s linear 1 forwards;
}
.outPop:hover .popUpWord{
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}

body {
  float:left;
  height: 100%;
  background: black;
}

<div class="outPop">
<div class="popUpWord">
  Text
</div>
</div>