CSS 之动态变换背景颜色

先上效果图

HTML代码：

<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>

CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21大专栏  CSS 之动态变换背景颜色pan>
22
23
24
25
26
27
28
29
30
31
32

<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>

才发现我如此喜欢前端，
特别是对这种动态效果，
特别喜欢，
无法抗拒，
这仅仅是开始而已，
主要还是记录下来给自己看的，
然后一点一点进步，
让进步看得见！