如何使用 jquery/js/css 渐进地突出显示一大块文本

Question

效果可以在 Webdesignerdepot.com 现场看到。当您将鼠标悬停在 post 的标题上时，当您在动画完成之前将光标从标题上移开时，标题也会逐渐突出显示，突出显示会回滚到其原始状态。

我尝试设置背景颜色的动画，但我遇到的问题是背景颜色扩展了整个 div，即使文本没有完全填满 div。

我一直在考虑添加一个额外的 div，其 z-index 小于文本的宽度，然后为其宽度设置动画，但它会失败，因为文本可以延伸多于一行。如果要使用相同的过程来实现结果效果，则会导致多个 div 使程序非常复杂。我想不出任何其他方法来实现这一目标。还有其他 workarounds/techniques 我可以使用吗？

Answer 1

使用 javascript 控制台或 firebug 或类似的东西，很容易获得网站样式。

CSS

a {
  background-size: 200.22% auto;
  -webkit-background-size: 200.22% auto;
  -moz-background-size: 200.22% auto;
  background-position: -0% 0;
  background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, #ddd 50%);
  transition: background-position 0.5s ease-out;
  -webkit-transition: background-position 0.5s ease-out;
}

a:hover {
  background-position: -99.99% 0;
}

HTML

<a>something</a>

如何使用 jquery/js/css 渐进地突出显示一大块文本

How to Progressively highlight a chunk of text using jquery/js/css

html

javascript

css

jquery

animation