CSS3-制作五光十色的变色龙动画

CSS3-制作五光十色的变色龙动画

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>

特别注意：4个div盒子的关系（是并列关系，不是嵌套关系）

css:

*{
margin: 0;
padding: 0;
}
body{
font-size: 1em;
font-family: 'microsoft Yahei';
/* 这个五光十色的变色龙 动画，他的背景，只能是白色！！！不能是其他颜色！ */
background-color:#fff;
}
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
#wrap{
width: 440px;
height: 440px;
/* 相对定位---作用：自己位置的微调 */
position: relative;
left: 50%;
top: 0;
margin-left: -220px;
}
.bianselong{
width: 170px;
height: 170px;
background-image: url('./img/chameleon.png');
background-repeat: no-repeat;
background-position: center center;
/* 绝对定位 */
position: absolute;
top: 50%;
left:50%;
/* 向左移动，他自身宽度的一半 */
margin-left: -85px;
/* 向上移动，他自身宽度的一半 */
margin-top: -85px;
/* 层的叠放顺序 */
z-index: 3;
}
/* 绘制出一个 和“变色龙”等大小的一个框，（他们的位置显示“在一个地方”。只是它 叠放在“变色龙”这个图的下面）！ */
.bg-box{
width: 170px;
height: 170px;
/* 绝对定位 */
position: absolute;
top: 50%;
left: 50%;
margin-left:-85px;
margin-top: -85px;
/* 层的叠放顺序 */
z-index: 2;
/* 溢出隐藏（只要超出 宽170，高170这个区域的内容，都给它隐藏起来！！） */
overflow: hidden;
}
/* 放 渐变色 的一个容器 */
.bg{
width: 984px;
height: 984px;
/* 这个容器里，放置一个 背景图 */
background-image: url('./img/palette.jpg');
background-repeat: no-repeat;
/* 绝对定位 */
position: absolute;
/* 背景图上移*/
top: -200px;
/* 背景图左移 */
left: -200px;
/* css3动画 */
animation: animate-rotate 10s linear infinite;
}


/* 周围的小图（绘制“变色龙”周围的小图，并且让这个小图，旋转---60s转一圈，再过60s再转一圈！！） */
.dong{
width: 440px;
height: 440px;
background-image: url('./img/dong.png');
background-repeat: no-repeat;
/* 绝对定位 */
position: absolute;
top: 0;
left: 0;
/* 层的叠放顺序 */
z-index: 1;
/* css3动画 */
animation: animate-rotate 60s linear infinite;
}

/* 绘制一个大框 */
.dong-box{
width: 400px;
height: 400px;
/* 圆角半径 */
border-radius: 50%;
/* 绝对定位 */
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
/* 层的叠放顺序 */
z-index: 0;
/* 溢出隐藏 */
overflow: hidden;
}
/* 放 渐变色 的另一个容器 */
.bg1{
width: 984px;
height: 984px;
background-image: url('./img/palette.jpg');
background-repeat: no-repeat;
background-position: center center;
/* 绝对定位 */
position: absolute;
/* 背景图上移300像素 */
top: -300px;
/* 背景图左移300像素 */
left: -300px;
/* css3动画 */
animation: animate-rotate 10s linear infinite;
}
/* 设置关键帧动画 */
@keyframes animate-rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}