I'm trying to create a text highlight animation in css like the one in this gif. From left to right continuously.
我试过这个
<p>
The <span class="test">world</span>
</p>
.test {
background: linear-gradient(to top, red 50%, transparent 50%);
animation-name: highlight;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes highlight {
0% {
background-size: 0;
background-position: -100%, 0;
}
50% {
background-size: 100%;
background-position: 100%, 100%;
}
}
但它却带来了一些奇怪的故障效果。我做错了什么以及如何实现这一目标？
您将需要使用伪元素（最好是 :after）并调整该伪元素的宽度。
.test {
position: relative;
}
.test:after {
content: "";
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
z-index: -1; /* Place the pseudo element right under the content */
top: 0;
left: 0;
background: linear-gradient(to top, red 50%, transparent 50%);
animation-name: highlight;
animation-duration: 0.75s;
animation-iteration-count: infinite;
animation-direction: alternate; /* Make the animation run back and forth */
}
@keyframes highlight {
0% {
width: 0;
opacity: 0;
}
50% {
width: 100%;
opacity: 1;
}
}<p>
The <span class="test">world</span>
</p>参考：
伪元素：after