黄色闪光

我们将谈到黄色闪光，但这一切都与页面上的滚动位置以及理解你的位置有关。如今，仅靠 CSS 就可以在页面上对滚动位置进行动画处理。只需一行代码！

html {
  scroll-behavior: smooth;
}

在某种程度上，这是一种美学选择。当页面从一个位置滚动到另一个位置（例如，由于页面上的另一个 ID 的“跳转链接”）时，页面会平滑地滚动到那里，而不是立即跳到那里。除了美学之外，使用它的目的是帮助用户理解上下文。哦，我明白了，页面从这里滚动到那里，它停下来的位置表示我链接到的位置。

但平滑滚动不是唯一强调在同一页面上链接到其他位置的上下文的方法。我们也可以对目标区域进行视觉更改，我认为这样最清晰。

幸运的是，有一个 CSS 伪选择器非常适合在页面上链接到的元素进行样式设置。:target 选择器，它可以用于任何元素

section:target {
  background: yellow;
}

这意味着：当 URL 中的 #hash 与此元素的 #id 匹配时，此选择器匹配并像这样对其进行样式设置。

因此，如果存在一个像这样的元素…

<section id="footnotes">

</section>

而 URL 恰好是

https://website.com/#footnotes

该选择器匹配，我们将看到它具有黄色背景。

当单击类似这样的链接时，将出现该 URL

<a href="/#footnotes">Jump to Footnotes</a>

当然，这里有一个技巧。仅仅一个黄色背景（或任何其他静态样式）并不能准确地传达你刚刚链接到这里的信息！少许动画在这里可以起到很大作用。如果你不只是将链接到的元素的背景设置为黄色，而是暂时闪烁一个黄色的背景，就足以吸引眼球，并使操作非常清晰。

这是一个示例和演示。假设你有一个指向文章底部的脚注的链接。这尤其有趣，因为指向页面底部的链接尤其难以引起注意（可能没有足够的滚动空间将脚注滚动到页面顶部）。

<p>
  Lorem ipsum<sup class="footnote" id="footnote-top-1">
    <a href="#footnote-bottom-1">1</a></sup>
  dolor sit amet consectetur adipisicing elit.
</p>

然后，在页面的底部，是你要链接到的实际脚注

<div id="footnotes" class="footnotes">
  <ol>
    <li id="footnote-bottom-1">Lorem ipsum is Greek. 
      <a href="#footnote-top-1">
        <span class="screen-reader-text">Back to reference</span>
        ↥
      </a></li>
  </ol>
</div>

请注意，这两个锚链接都使用跳转链接，footnote-bottom-1 和 footnote-top-1 分别指向这些 ID。

我们可以使用 @keyframes 动画使脚注本身在你到达它时闪烁

.footnotes :target {
  animation: yellowflash-bg 2s;
}
@keyframes yellowflash-bg {
  from { background: yellow; }
  to   { background: transparent; }
}

在这种情况下，它会立即闪烁为黄色，然后在 2 秒内逐渐淡化为透明背景。

这是一个交互式示例

这就是黄色闪光！当然，它不必是黄色的，甚至不必闪烁。关键是要做一些事情来视觉地表明为了清晰起见所链接的内容。

上面的演示与平滑滚动配对，但你可能不想这样做，因为你无法控制平滑滚动的时机，因此存在黄光在你到达之前就消失的风险。

嘿，做个抖动 也许很有趣。