比起上一个弹跳的小球动画,我觉得这个变色龙动画更炫酷一些,当时看到百度这个效果的时候也是感到非常棒,于是自己仿做了一个万博manbext3.0首页登录,素材来自于百度浏览器产品发布页。
下载地址↓
链接:http://pan.baidu.com/s/1c2apQdq 密码:vycp
一、万博manbext3.0首页登录知识点
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就此沉没。
发表评论:
◎请发表你卖萌撒娇或一针见血的评论,严禁小广告。