동적 텍스트 채우기 CSS

Question

다음과 같이 왼쪽에서 오른쪽으로 색상으로 텍스트를 채우려고합니다. codepen.

이

다음과 같은 CSS로 문제를 일으키는 : 32px보다 긴

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

단어 완전히 채워 및 32px에 의해 중단되지됩니다. 이 너비를 늘리면 짧은 단어 (예 : 개)가 빠른 속도로 채워집니다.

나는 채워진 이초 (관계없이 워드 길이의)

사람이이하시기 바랍니다 할 수있는 방법을 생각을 가지고에 모든 말을하고 싶습니다?

감사합니다.

당신이이 방법을 사용할 수 있습니다 여러 줄을 사용하지 않는 경우

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>

,

추가 "디스플레이 : 인라인 블록;" 툴팁 텍스트로

공백 추가 : nowrap; .popUpWord에

.outPop의 변경 스타일을 여백 : 자동; 배경 : 없음; 오버플로 : 숨김; display : 블록; 직위 : 절대; animation-play-state : 설정 해제; 왼쪽 : 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>