突出显示元素，然后转换回原始颜色

Posted 2021-03-27

我有不同的background-colors元素。单击链接时，我想突出显示不同颜色的元素（黄色），然后淡出元素的原始颜色。我知道有一个元素的currentColor有color，但background-color没有类似的东西。

如何从高光颜色平滑过渡到元素的原始background-color？现在它从高亮颜色渐变到透明，然后在动画结束时突然跳回到原始颜色。

:target td {
  animation: highlight 1s;
}

@keyframes highlight {
  from {
    background-color: yellow;
  }
  to {
  /* How do I set this back to the element's original background-color? */
    background-color: transparent;
  }
}

<ul>
  <li>
    <a href="#link1">Link #1</a>
  </li>
  <li>
    <a href="#link2">Link #2</a>
  </li>
    <li>
    <a href="#link3">Link #3</a>
  </li>
</ul>

<table>
  <tr id="link1">
    <td>This is Link #1</td><td>// Fine.</td>
  </tr>
  <tr id="link2">
    <td bgcolor="orange">This is Link #2</td><td>// Ugly.</td>
  </tr>
    <tr id="link3">
    <td bgcolor="red">This is Link #3</td><td>// Ugly.</td>
  </tr>
</table>

答案

只是不要为动画添加to。这是有效的，因为如果未定义结束（或开始）状态，浏览器将使用元素的现有样式（RE：Valid Keyframe Lists on MDN）

div {
  margin: 200px 0;
}

:target td {
  animation: highlight 1s;
}

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

<ul>
  <li>
    <a href="#link1">Link #1</a>
  </li>
  <li>
    <a href="#link2">Link #2</a>
  </li>
    <li>
    <a href="#link3">Link #3</a>
  </li>
</ul>

<table>
  <tr id="link1">
    <td>This is Link #1</td><td>// Fine.</td>
  </tr>
  <tr id="link2">
    <td bgcolor="orange">This is Link #2</td><td>// Ugly.</td>
  </tr>
    <tr id="link3">
    <td bgcolor="red">This is Link #3</td><td>// Ugly.</td>
  </tr>
</table>

另一答案

另一个选择是在50％的动画上使用background-color: initial - 请参阅下面的演示：

div {
  margin: 200px 0;
}

:target td {
  animation: highlight 2s;
}

@keyframes highlight {
  0% {
    background-color: yellow;
  }
  50% {
    background-color: initial;
  }
}

<ul>
  <li>
    <a href="#link1">Link #1</a>
  </li>
  <li>
    <a href="#link2">Link #2</a>
  </li>
    <li>
    <a href="#link3">Link #3</a>
  </li>
</ul>

<table>
  <tr id="link1">
    <td>This is Link #1</td><td>// Fine.</td>
  </tr>
  <tr id="link2">
    <td bgcolor="orange">This is Link #2</td><td>// Ugly.</td>
  </tr>
    <tr id="link3">
    <td bgcolor="red">This is Link #3</td><td>// Ugly.</td>
  </tr>
</table>

另一答案

如果您只是从关键帧中删除to，它将采用指定的背景颜色。

要理解它，请阅读mdn doc https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes#Valid_keyframe_lists的这一部分

div {
  margin: 200px 0;
}

:target td {
  animation: highlight 2s;
}

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

<ul>
  <li>
    <a href="#link1">Link #1</a>
  </li>
  <li>
    <a href="#link2">Link #2</a>
  </li>
    <li>
    <a href="#link3">Link #3</a>
  </li>
</ul>

<table>
  <tr id="link1">
    <td>This is Link #1</td><td>// Fine.</td>
  </tr>
  <tr id="link2">
    <td bgcolor="orange">This is Link #2</td><td>// Ugly.</td>
  </tr>
    <tr id="link3">
    <td bgcolor="red">This is Link #3</td><td>// Ugly.</td>
  </tr>
</table>

以上是关于突出显示元素，然后转换回原始颜色的主要内容，如果未能解决你的问题，请参考以下文章

禁用或更改 Firefox 的元素/图像突出显示颜色

这几种 VSCode 扩展是我最喜欢的

寻找Word VBA代码以使用当前默认高亮颜色突出显示文本

JQuery 帮助 - 动画背景颜色

在 WebView 加载时显示另一个故事板，然后切换回原始故事板

滑出保持突出显示的导航项