Javascript 如何设置html:：selection背景色的动画？

我想用类似于色调旋转动画的东西来设置

：：选择

背景色的动画。由于

：：selection

background属性只能包含颜色或变量，因此我假设包含颜色的

：：root

变量应该以某种方式设置动画，而我不知道如何设置不能具有类的对象的动画

也许JS有一个简单的解决方案，我现在可能忽略了

---

香草JS解决方案首选

相当肯定这是不可能的。

：：选择

pseudo不接受

动画-*

属性（）

只有某些CSS属性可以与：：selection一起使用：

• color

• 背景色

• 光标

• 插入符号颜色

• 大纲

  及其长柄

• 文本装饰

  及其相关属性

• 文本强调颜色

• 文本阴影

这让我觉得这是不可能的。我们可以使用其他伪文本，如

：：after

，但每当我选择文本时，它的背景色不会改变

什么{ 背景颜色：蓝色； } 选择{ 颜色：白色； 动画持续时间：3s； 动画名称：着色； 动画迭代次数：无限； 动画方向：交替； } 在……之后{ 内容：“之后”； 显示：内联块； 宽度：50px； 高度：50px； 动画持续时间：3s； 动画名称：着色； 动画迭代次数：无限； 动画方向：交替； } @关键帧着色{ 从{ 背景颜色：绿色； } 到{ 背景色：红色； } }

---

Hello

这一功能现在在chrome和firefox中运行，但在safari中不起作用：

let r = 0;
const loop = () => {
var html = document.getElementsByTagName("html")[0];
  html.style.setProperty("--changing", `hsla(${r}, 50%, 50%, 0.999)`);
  r++;
 
  requestAnimationFrame(loop);
};

requestAnimationFrame(loop); 

---

由于选择的背景色也是hsl颜色代码，因此可能会使用javascript改变“h”色调。。。我知道如何用js设置根变量，只是不知道如何设置它的动画，比如：html.style.setProperty（“--changingcolor”，动画）；其中“动画”将是一个变量，它改变hsl颜色的色调值，然后很容易将选择颜色设置为该变量-它最有可能工作？我只是猜测，但应该是这样work@bambadamm这仍然需要

：：选择
来支持
转换-*
属性，而它也不支持这些属性。您可以尝试以动画的方式多次设置变量，但我认为这可能不起作用。@bambadamm实际上，即使这样似乎也不起作用，请参见我的编辑。啊，我明白您的意思，嗯，值得一试：）谢谢！我必须补充一点，它适用于普通文本和图像，但它不会更新“a”链接选择的颜色，这是一个时髦的功能