Question

我试图完成链接到另一个页面上的目标元素时的效果，目标会突出显示，然后淡化为默认页面颜色，即白色。

我正在寻找的一个简单示例与在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>

我想做与此相反的事情（让它从红色 - >白色开始）。

任何帮助都会非常感激，就像我说的那样，我一直在寻找解决方案，但他们并没有完全帮助。

谢谢！

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>

Answer 2

你可以像这样使用CSS动画：

:target {
  border-radius: 3px;
  animation: highlight 500ms ease-out 2 alternate;
}
@keyframes highlight {
  100% {
    background-color: red;
  }
}

<div class="col-lg-12 section-header" id="additional">
  <h3>Required</h3>
</div>

<a href="#additional"> Click me </a>

评论突出显示css过渡效果

2 个答案: