自动更改背景颜色循环（jQuery / css？）

Question

我已经在几个Wordpress主题中看到了此功能，例如页脚的背景会慢慢改变其颜色，而我一直想知道是否有一个简单的技巧可以做到这一点。（这可能是用jquery完成的？还是可以用纯CSS完成？）

基本上，背景颜色从一种颜色逐渐过渡到另一种颜色（例如，粉红色到蓝色，蓝色到红色，红色到粉红色）并保持无限循环。它不需要任何操作（例如，悬停或单击），它就可以完成它的工作。:)

是否有捷径可寻？如果是这样，希望通过示例代码查看执行此操作的最佳方法。

提前非常感谢您。

Answer 1

您无需在jQuery中就可以实现此技巧。您可以使用简单的CSS动画来代替，这将使性能更简单。

这是我的例子

我们的布局

<div class="block"></div>

CSS样式

 html, body {
     width: 100%;
     height: 100%;
  } 

 @keyframes color-animation {
    0% {
       background: #ad1457;
    }
    50% {
       background: #6a1b9a;
    } 
    100% {
       background: #bbdefb
    } 
 }

.block {
   width: 100%;
   height: 100%;
   animation: color-animation 3s infinite linear alternate;
}

在此代码中，我们创建了简单的css动画，该动画更改了块的颜色。

不客气:)可以问我一件事。