Question

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

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

如果你等待它完全加载，那么滚过＆＃34;他对化妆的热情始于一个简单的愿望＆＃34;另外，当你滚动到视图中时，你会注意到黄色背景的文本被高亮显示。

试图找出实现这一目标的最优雅，最轻量化的方法（我认为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动画：

#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关键帧为您提供动画。或者你可以像这样使用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";

滚动上的动画标记文本突出显示

1 个答案: