CSS 之动态变换背景颜色

<div class="header">  
    <h1>GCCHRN'S BLOG</h1>  
	<ul class="nav nav-tabs">  
		<li role="presentation" class="active"><a href="#">首页</a></li>  
		<li role="presentation"><a href="#">分类</a></li>  
		<li role="presentation"><a href="#">归档</a></li>  
		<li role="presentation"><a href="#">关于</a></li>  
	</ul>  
</div>

<style type="text/css">  
    .header{          
		padding: 40px 30px 60px 30px;  
		text-align: center;  
		animation:mymove 5s infinite; /*animation 时间 播放次数*/  
		animation-direction:alternate; /*是否循环交替反向播放动画*/ 
		/*Safari 和 Chrome:*/
		-webkit-animation:mymove 5s infinite;
	}

	@keyframes mymove  
	{
	  
	    0% {background:#87CEFF;}  
		25% {background:#54FF9F;}  
		50% {background:#7CCD7C;}  
		75% {background:#63B8FF;}  
		100% {background:#00FFFF;}  
	}  

	/*Safari 和 Chrome:*/
	@-webkit-keyframes mymove
	{

		0% {background:#87CEFF;}
		25% {background:#54FF9F;}
		50% {background:#7CCD7C;}
		75% {background:#63B8FF;}
		100% {background:#00FFFF;}
	}
  
</style>