滚动上的动画标记般的文字高光

Question

我要重新创建可以在此页面上看到的效果：

http://people.com/chica/gabriel-zamora-male-beauty-influencer/

如果您等待它完全加载，然后滚动滚动"他对化妆的热情始于一个简单的欲望"部分，您会注意到文字在滚动到视图的情况下以黄色的背景高高。

试图找出实现这一目标的最优雅和最轻巧的方法(我在想CSS3 jQuery(？

Answer 1

尚不完全清楚您在这里确切想要什么。但是，通过检查网站上的代码，您似乎正在使用渐变作为背景，然后对背景位置进行动画。这可以通过CSS动画或使用JavaScript或jQuery更改元素背景位置来实现。这是我的示例：

html：

<p>
Some text before
<span id="hightlight">Your text here</span>
Some text after
</p>

css具有CSS-Animation：

#hightlight{    
    background-size: 200% auto; 
    background-image: linear-gradient(to right,#fff 50%,#ff0 50%);
    background-position: 0% 0;
    animation-name: highlight;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes highlight {
    from {background-position: 0% 0;}
    to {background-position: -100% 0;}
}

这将为您提供使用CSS KeyFrames的动画。另外，您可以使用JavaScript和CSS：

CSS：

#hightlight{
    transition: 1s; 
    background-size: 200% auto; 
    background-image: linear-gradient(to right,#fff 50%,#ff0 50%);
    background-position: 0% 0;
}

和javascript：

document.getElementById("hightlight").style.backgroundPosition = "-100% 0";