Question

我所追求的效果是在选定的文本页面上着陆时触发的高亮显示。让我们的目标元素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>

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

Answer 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;
  }
}

<div id="highlight-me">A bit of text needing attention on page landing.</div>

如何使用Javascript在页面着陆时突出显示一段文本

1 个答案: