CSS+JS：通过修改filter实现图片颜色随时间渐变

最新推荐文章于 2025-10-01 22:32:48 发布

原创最新推荐文章于 2025-10-01 22:32:48 发布 · 584 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

原理：修改filter的hue-rotate属性

效果：

代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>filter</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .page {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #000000;
      }
      img {
      }
    </style>
  </head>
  <body>
    <div class="page">
      <img id="image" src="http://cdn.ljynet.com/img/bit.svg" alt="" />
    </div>

    <script>
      const img = document.getElementById("image");
      const filter = (color) => {
        img.style.filter = `invert(100%) hue-rotate(${color}deg)`;
      };
      let color = 0;
      setInterval(() => {
        filter(color);
        color += 10;
      }, 100);
    </script>
  </body>
</html>