css 图片颜色渐变动画

CSS 图片颜色渐变动画是一种非常酷炫的效果，它可以让图片颜色随着时间的推移逐渐发生变化，让页面更加生动活泼。

/* CSS 代码 */
.Box {
  background-image: linear-gradient(to right,#f00,#0f0,#00f);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: gradient 5s ease-in-out infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

上面的 CSS 代码是实现图片颜色渐变动画的关键之处，其中，我们通过 linear-gradient() 函数来定义图片的颜色渐变效果，然后通过 background-clip 属性来将背景渲染到文本上，使得图片的颜色渐变效果能够呈现在文本上。同时，我们将文本颜色设置为透明，即 color: transparent，这样可以隐藏文本颜色，只显示背景颜色。最后，通过 animation 属性来实现动画效果，其中，我们定义了一个 gradient 关键帧，来规定不同动画执行时间所对应的背景位置，这样就能够让图片颜色随时间变化而发生渐变效果了。

这种效果可以在很多地方应用，例如网站的顶部导航栏、页面标题等等。只需要在对应的元素上添加上述 CSS 代码即可。另外，我们还可以通过调整代码中的参数，例如修改 linear-gradient() 函数中的颜色值、更改 background-clip 属性、设置不同的动画持续时间等，来实现不同的图片颜色渐变效果。