原理：修改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>
