评论高亮 CSS 过渡效果

Question

我正在尝试实现的效果是，链接到另一个页面上的目标元素时，该目标元素会被突出显示，然后逐渐变为默认页面颜色，即白色。

我需要的简单示例与在Stack Overflow上查看已链接评论时相同：CSS：高亮文本效果

当您首次查看评论时，它将突出显示一种颜色，然后过渡到白色。

我能够使它从白色变为其他颜色，但似乎无法做相反的操作，并且找不到任何直接帮助的资源。

要从白色变为红色，我有：

:target {
    border-radius: 3px;
    background-color: red;
    transition: background-color 1s linear;
}

HTML：

将您带到目标的链接：

<div class="col-lg-12 title">Additional<a target="_blank" href="/insight#additional">(?)</a></div>

被链接的目标：

<div class="col-lg-12 section-header" id="additional"><h3>Required</h3></div>

我想要做的是相反的（使它从红色变为白色）。

如我所说，任何帮助都将不胜感激，因为我一直在寻找解决方案，但它们并没有完全帮助我。

谢谢！

- follmer

---

展示给我们 HTML 代码。 - aavrug

已编辑以显示HTML - follmer

请您能否提供一个可运行的示例？ - aavrug

如果您使用jQuery，它的“highlight”效果也会很有帮助... - pgcan

Answer 1

这接近你所描述的效果

:target {
  border-radius: 3px;
  animation: highlight 1000ms ease-out;
}
@keyframes highlight {
  0% {
    background-color: red;
  }
  100% {
    background-color: white;
  }
}

<div class="col-lg-12 section-header" id="additional">
  <h3>Required</h3>
</div>

<a href="#additional"> Click me </a>

- Jones Joseph

Answer 2

使用:target伪类来运行高亮动画。

:targetCSS 伪类表示具有与 URL 片段匹配的 ID 的唯一元素（目标元素）。

单击链接将更改 URL 的片段标识符，因此现在:target选择器将指向具有匹配 ID 的元素。

:target {
  border-radius: 3px;
  animation: highlight 1000ms ease-out;
}

@keyframes highlight {
  from {
    background-color: red;
  }
}

<div class="col-lg-12 section-header" id="additional">
  <h3>Required</h3>
</div>

<a href="#additional"> Click me </a>

- Ricky