Question

我正尝试使用以下codepen从左到右填充文本颜色。

这导致以下css出现问题：

@keyframes stripes {
    to {
        width: 32px;
    }
}

超过32像素的单词，不会被32px完全填入和停止。如果我增加这个宽度，短句（例如狗）将以快节奏填充。

我希望在 2秒中填写所有字词（不论字长）

任何人都知道如何才能做到这一点？

谢谢！

Answer 1

＆＃13;

.tooltiptext {
    position: relative;
    display: inline-block;
}
.tooltiptext:after {
    content: "";
}
.popUpWord {
    color: pink;
    white-space: nowrap;
}
.popUpWordBlack {
    color: black;
}
.outPop {
    margin: auto;
    background: none;
    overflow: hidden;
    display: block;
    position: absolute;
    animation-play-state: unset;
    left: 0;
    top: 0;
    width:0;
}
.outPopBlack:hover + .outPop,
.outPop:hover {
    animation: stripes 2s linear 1 forwards;
}
.outPopBlack {
    display: block;
    position: relative;
    z-index: 0;
}
@keyframes stripes {
    to {
        width: 100%;
    }
}

＆＃13;

<span class="tooltiptext"> 
  <span class="outPopBlack">
    <span class="popUpWordBlack">hello World</span>
  </span>  
  <span class="outPop">
    <span class="popUpWord">hello World</span>
  </span>
</span>

＆＃13;

如果您不必使用多行，则可以使用此方法，

添加＆＃34;显示：内联块;＆＃34; to tooltiptext

添加白色空间：nowrap;到.popUpWord，

将.outPop的样式更改为保证金：自动; 背景：无; 溢出：隐藏; 显示：块; 位置：绝对; 动画播放状态：未设置; 左：0; 顶部：0; 宽度：0;

你也可以在更少的代码中使用这些方法

＆＃13;

.text {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.text:after {
  content: "HEllo World";
  position: absolute;
  z-index: 1;
  color: red;
  left: 0;
  top: 0;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: 500ms linear all;
}

.text:hover:after {
  width: 100%;
}

.text1 {
  position: relative;
  display: inline-block;
  z-index: 0;
}

.text1>.dup {
  content: "HEllo World";
  position: absolute;
  z-index: 1;
  color: red;
  left: 0;
  top: 0;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: 500ms linear all;
}

.text1:hover>.dup {
  width: 100%;
}

＆＃13;

<div class="text">
  HEllo World
</div>
<br>
<br>
<div class="text1">
  HEllo World
  <span class="dup">HEllo World</span>
</div>

＆＃13;

动态文本颜色填充css

1 个答案: