跳转到网页上的部分时暂时突出显示html元素[重复]

Posted 2023-02-21

【中文标题】跳转到网页上的部分时暂时突出显示html元素[重复]

【英文标题】：Temporarily highlight html element when jumping to section on webpage [duplicate]

【发布时间】：2014-09-15 01:45:30

【问题描述】：

我正在尝试让一个 html 元素，例如 <div>，暂时突出显示，然后在跳转到网页上的该元素后淡出。

我正在寻找类似于这种高亮效果的效果： What is your best programmer joke?

我将如何实现这样的效果？

我尝试查看该链接的页面源代码，但看不到它是如何完成的。

【参考方案1】：

这个效果可以单独用CSS来实现。

您需要使用与 URL 中的片段标识符匹配的 ID（即 # 之后的所有内容）为元素的背景颜色设置动画。您可以在 CSS 中使用 :target 伪元素来匹配它。

:target 
    -webkit-animation: target-fade 1s;
    -moz-animation: target-fade 1s;
    -o-animation: target-fade 1s;
    animation: target-fade 1s;

Here's a demo with the code you'll need.