html - 色调旋转更改图像而不是阴影

Question

所以我遇到了这个问题，我只想设置投影动画来更改投影而不是整个 img。

img {
    filter: drop-shadow(0 0 10px rgb(255, 0, 0));
    animation: animate 3s linear infinite;
}

@keyframes animate
{
    0%
    {
        filter: hue-rotate(0deg);
    }
    100%
    {
        filter: hue-rotate(360deg);
    }
}

<img src="https://o.remove.bg/downloads/9d28d100-7cfa-4b00-b958-c6be005e62c4/87de3a763609657f3950e8e0829291f4-removebg-preview.png">

Answer 1

您可以尝试对阴影本身的颜色变化进行动画处理。

img {
    filter: drop-shadow(0 0 10px rgb(255, 0, 0));
    animation: animate 3s linear infinite;
}

@keyframes animate
{
    0%
    {
        filter: drop-shadow(0 0 10px rgb(255, 0, 0));
    }
    25%
    {
        filter: drop-shadow(0 0 10px rgb(0, 255, 0));
    }
    50% {
      filter: drop-shadow(0 0 10px rgb(0, 0, 255));
    }
    100%
    {
        filter: drop-shadow(0 0 10px rgb(255, 0, 0));
    }
}

<img src="https://o.remove.bg/downloads/9d28d100-7cfa-4b00-b958-c6be005e62c4/87de3a763609657f3950e8e0829291f4-removebg-preview.png">

但是，这确实意味着明确给出您希望它过渡到的颜色，而不是仅仅能够将颜色旋转 360 度。 (使用 HSL 而不是 RGB 并不能解决这个问题。)