评论突出显示css过渡效果 [英] Comment highlight css transition effect

问题描述

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

我正在寻找的一个简单示例与查看堆栈溢出的链接评论时相同： CSS：突出显示文字效果

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

我可以使它从白色变成另一种颜色，但似乎无法做到相反，并且找不到任何直接帮助的资源。

从白色到红色，我有：

 ：target {
 border-radius：3px; 
背景颜色：红色; 
转换：背景色1s线性; 
 
  

html：

将你带到目标的链接：

 < div class =col-lg-12 title>其他< ; target =_ blankhref =/ insight＃additional>（？）< / a>< / div> 
  

目标被链接到：

 < div class =col-lg-12 section-headerid =additional>< h3>必需< / h3>< / div> 
  

我想做相反的事情（让它从红色到白色）。

任何帮助都会非常感谢，正如我所说的，我一直在寻找解决方案，但他们只是没有帮助。

谢谢！

解决方案

这与您所描述的效果相近。
$ b

：target {border-radius：3px;动画：突出显示1000ms缓出;} @关键帧突出显示{0％{background-color：red; } 100 {background-color：white; }}

 < div class =col-lg- 12 section-headerid =additional> < h3>必需< / h3>< / div>< a href =＃additional>点击我< / a>  

I'm trying to accomplish the effect of when linking to a target element on another page, the target is highlighted and then fades to the default page color, aka white.

A simple example of what I'm looking for is the same as when viewing a linked comment on Stack Overflow: CSS: highlighted text effect

When you first view the comment, it is highlighted a color then transitions to white.

I'm able to make it go from white to another color, but can't seem to do the reverse, and can't find any resources helping directly.

To go from white to red, I have:

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

html:

The link that takes you to the target:

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

The target being linked to:

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

I'd like to do the opposite of this (make it go from red->white).

Any help would be much appreciated, as like I said, I've been looking for a solution but they're just not quite helping.

Thanks!

解决方案

This is close to the effect you described

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

这篇关于评论突出显示css过渡效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！