评论高亮css过渡效果答案

【问题标题】：Comment highlight css transition effect评论高亮css过渡效果
【发布时间】：2021-01-12 15:53:14
【问题描述】：

我正在尝试实现在链接到另一个页面上的目标元素时的效果，目标被突出显示，然后淡入默认页面颜色，也就是白色。

我正在寻找的一个简单示例与查看 Stack Overflow 上的链接评论时相同：CSS: highlighted text effect

当您第一次查看评论时，它会以一种颜色突出显示，然后变为白色。

我可以让它从白色变成另一种颜色，但似乎不能反过来，也找不到任何直接帮助的资源。

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

: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>

我想做与此相反的事情（让它从红色变为白色）。

任何帮助都将不胜感激，就像我说的那样，我一直在寻找解决方案，但他们并没有提供多少帮助。

谢谢！

【问题讨论】：

向我们展示 HTML 代码。
编辑显示html
您能提供一个工作示例吗？
如果你使用jquery，它的“高亮”效果也很有帮助....

标签： javascript html css

【解决方案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>

【讨论】：

【解决方案2】：

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

:target CSS 伪类表示一个唯一元素（目标 element) 的 id 与 URL 的片段匹配。

单击该链接将更改 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>

【讨论】：