Динамическое заполнение цвета цвета css

Question

Я пытаюсь заполнить текст цветом слева направо, как со следующим codepen.

Это вызывает проблемы со следующими CSS:

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

Слова, которые длиннее, чем 32px, не будучи полностью заполнены и остановки на 32px. Если я увеличу эту ширину, короткие слова (например, собака) будут заполнены быстрыми темпами.

Я хотел бы иметь все слова заполненные в 2 секунды (независимо от длины слова)

кто имеет представление о том, как это можно сделать, пожалуйста?

Спасибо!

Answer 1

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

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

, если вы не должны использовать несколько строк, вы можете использовать этот метод,

добавить "Дисплей: встроенный блок;" to tooltiptext

add white-space: nowrap; to .popUpWord,

изменить стиль .outPop до margin: auto; фон: нет; переполнение: скрыто; дисплей: блок; позиция: абсолютная; анимация-play-state: unset; Слева: 0; верх: 0; ширина: 0;

также вы можете использовать этот метод меньше кода

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

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