如何使用 Javascript 在页面登陆时快速突出显示一段文本答案

【问题标题】：How to flash-highlight a piece of text on page landing using Javascript如何使用 Javascript 在页面登陆时快速突出显示一段文本
【发布时间】：2018-01-20 15:28:41
【问题描述】：

我所追求的效果是在页面登陆选定文本时触发的突出显示。让我们定位元素id="highlight me"。高光可以在目标容器周围发光两次，然后消失。最好用视觉表达：视频演示here。 JavaScript 解决方案是可以接受的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
       // Some javascript to make the animation.
    </script>
  </head>
  <body>
    <div id="highlight-me">A bit of text needing attention on page landing.</div>
  </body>
</html>

最大的跨浏览器支持很重要。

【问题讨论】：

CSS3 transitions want to add a colour and fade it away的可能重复
这会是一个很好的解决方案但是旧版浏览器不完全支持 CSS3。我已编辑问题以强调跨浏览器兼容性。
@ptrcao 甚至 IE10 也支持 CSS 动画。见：caniuse.com/#search=animation
How to highlight text using javascript的可能重复
Google 为“突出显示文本 javascript 站点：stackoverflow.com”提供了 182 多个结果。没有评论...

标签： javascript html animation

【解决方案1】：

试试这个最简单的方法。

#highlight-me {
  animation: glow 700ms 2;
  border-radius: 3px;
  display: inline-block;
  padding: 2px 5px;
}

@keyframes glow {
  50% {
    background: rgba(255,0,0,0.5);
    box-shadow: 0 0 10px red;
  }
}

&lt;div id="highlight-me"&gt;A bit of text needing attention on page landing.&lt;/div&gt;

【讨论】：

感谢山姆的帮助回复。如果一天后除了依赖关键帧的解决方案之外没有人提出解决方案，我将接受您的解决方案。我之所以不接受我在 Google 搜索中遇到的众多类似解决方案，是因为此答案（stackoverflow.com/questions/20217313/…）中隐含的跨浏览器标准缺乏。每当发生这种情况时，编码员都有责任涵盖所有情况，您可能会错过浏览器。否则一个很好的答案。