CSS实现背景颜色循环播放效果

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

颜色的循环播放效果？女朋友说想要一个页面，页面上可以进行一个颜色轮换效果，还特地嘱咐说要弄一个比较柔和的效果，不能太艳丽，叭叭叭叭叭，比起五彩斑斓的黑也差不到哪里去了。

既然有人提出了需求，那么为了不分手，我这就只能去乖乖的研究一下了，莫生气。

面对如此的需求，就只能做一件事，那就是把所有的细节点全部忘掉，先弄一个页面给她看看，让她自己改，不然就算写出个花来，那也是白给呀。

那我们应该是如何去实现呢，细想下来，其实不需要用什么高端的技术，只需要使用css基本的animation动画效果就可以办得到，网上也有很多例子，接下来我们来看看这其中是如何实现吧。

animation的属性大概分为这几个，

animation: colorswitch 20s infinite;

我们来看这段css代码，如下代码：

colorswitch(animation-name): 选择器的 keyframe 名称，看一下就行

@keyframes colorswitch {
	0% {
		background: #0087C9
	}

	16% {
		background: #EF4A53
	}
 
	32% {
		background: #FFB463
	}
 
	49% {
		background: #33D5D4
	}
 
	65% {
		background: #254356
	}
 
	81% {
		background: #5B4097
	}
 
	100% {
		background: #0087C9
	}
}

(animation-duration): 颜色变换的周期时间;

(animation-timing-function): 动画的速度曲线;

(animation-delay): 动画开始之前的延迟;

infinite(animation-iteration-count): 播放动画的次数，可以是数值，也可以是infinite（无限次）;

(animation-direction): 是否应该轮流反向播放动画;（normal (默认值) | alternate (反向)）

大家也可以在我的GitHub上面直接下载，链接在这。