比起上一个弹跳的小球动画，我觉得这个变色龙动画更炫酷一些，当时看到百度这个效果的时候也是感到非常棒，于是自己仿做了一个案例，素材来自于百度浏览器产品发布页。

查看效果

下载地址↓

链接：http://pan.baidu.com/s/1c2apQdq 密码：vycp

一、案例知识点

1、相对和绝对定位以及z-index的层级关系

2、animation动画

3、transform变形

二、主要代码

1、HTML代码

<div id="wrap">
    <div class="bianselong"></div><!--变色龙本身-->
    <div class="bg-box"><!--第一层渐变容器-->
        <div class="bg"></div><!--第一层渐变-->
    </div>
    <div class="dong"></div><!--周围旋转的碎片洞洞图片-->
    <div class="dong-box"><!--第二层渐变容器-->
    	<div class="bg1"></div><!--第二层渐变-->
    </div>
</div>

2、CSS主要代码

#wrap{
	position:relative;
	width:440px;
	height:440px;
	left:50%;
	margin-left:-220px;
}
.bianselong,.bg-box{
	position:absolute;
	width:170px;
	height:170px;
	left:50%;
	margin-left:-85px;
	top:50%;
	margin-top:-85px;
	}
.bianselong{
	z-index:3;
	background:url(images/chameleon.png) no-repeat;}
.bg-box{
	overflow:hidden;
	z-index:2;
	}

.bg,.bg1{
	position:absolute;
	width:984px;
	height:984px;
	background:url(images/palette.jpg) no-repeat;
	animation:rotate 10s linear infinite;
	}
.bg{
	left:-200px;
	top:-200px;}
.bg1{
	left:-300px;
	top:-300px;
	}
.dong{
	position:absolute;
	width:440px;
	height:440px;
	background:url(images/dong.png) no-repeat;
	z-index:1;
	animation:rotate 60s linear infinite;}
.dong-box{
	position:absolute;
	width:400px;
	height:400px;
	left:50%;
	margin-left:-200px;
	top:50%;
	margin-top:-200px;
	border-radius:50%;/*圆角的目的是为了遮住因为洞洞图片旋转漏出的下层渐变图片。*/
	z-index:0;
	overflow:hidden;
	}
@keyframes rotate{
	0%{
		transform:rotate(0);}
	100%{
		transform:rotate(360deg);}
	}

其实这种效果很像flash的遮罩效果，只不过比起纯粹的CSS3动画效果来说，flash需要插件才能播放，现在HTML5和CSS3，还有兴起的AE动效已经完全可以代替flash在网页上的应用。可叹光风无限十年的flash就此沉没。