本文主要是介绍CSS+JS：通过修改filter实现图片颜色随时间渐变，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
原理：修改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>
这篇关于CSS+JS：通过修改filter实现图片颜色随时间渐变的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
