淘先锋技术网

首页 1 2 3 4 5 6 7

css3动画效果

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <style>
 
 
 
 
 *{padding:0;margin:0;}
 img{border:0;width:100%;height:100%;}
 #animation{height:566px;width:100%;position:relative;overflow:hidden;background:url(http://hr.mokylin.com/images/animation/animation-bg.gif) repeat-x 0 0;}
 .background{position:absolute;width:1000px;left:50%;margin-left:-500px;height:100%;}
 
 .cloud:nth-child(1), .cloud:nth-child(4), .cloud:nth-child(5){opacity:0.3;filter:alpha(opacity:30);animation-duration:2.5s;-moz-animation-duration:2.5s;-webkit-animation-duration:2.5s;}
 .cloud{position:absolute;width:124px;height:75px;opacity:0.7;filter:alpha(opacity:70);animation:swim 5s linear 0s infinite alternate;-moz-animation:swim 5s linear 0s infinite alternate;-webkit-animation:swim 5s linear 0s infinite alternate;}
 .cloud:nth-child(1){left:-105px;top:58px;width:71px;height:42px;}
 .cloud:nth-child(2){left:-96px;top:168px;width:124px;height:76px;}
 .cloud:nth-child(3){left:661px;top:44px;width:77px;height:44px;}
 .cloud:nth-child(4){left:672px;top:244px;width:87px;height:50px;}
 .cloud:nth-child(5){left:917px;top:131px;width:103px;height:60px;}
 .cloud:nth-child(6){left:1048px;top:27px;width:79px;height:46px;opacity:0.5;animation-duration:2.3s;-moz-animation-duration:2.3s;-webkit-animation-duration:2.3s;}
 @keyframes swim {0%{margin-left:-100px;}100%{margin-left:100px;}}
 @-moz-keyframes swim {0%{margin-left:-100px;}100%{margin-left:100px;}}
 @-webkit-keyframes swim {0%{margin-left:-100px;}100%{margin-left:100px;}}
 
 .car{position:absolute;width:181px;height:57px;left:989px;top:457px;z-index:4;background:url(http://hr.mokylin.com/images/animation/ElementCar.png) no-repeat 0 0;transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);animation:grow 0.4s ease-out 1s 1 forwards;-moz-animation:grow 0.4s ease-out 1s 1 forwards;-webkit-animation:grow 0.4s ease-out 1s 1 forwards;}
  
 .tower{position:absolute;width:194px;height:126px;left:1171px;top:363px;z-index:4;background:url(http://hr.mokylin.com/images/animation/ElementTower2.png) no-repeat 0 0;transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);animation:grow 0.6s ease-out 0.6s 1 both;-moz-animation:grow 0.6s ease-out 0.6s 1 both;-webkit-animation:grow 0.6s ease-out 0.6s 1 both;}
  
 .hole{position:absolute;width:61px;height:18px;left:-6px;top:495px;background:url(http://hr.mokylin.com/images/animation/ElementHole.gif) no-repeat 0 0;transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);animation:grow 0.3s ease-out 1.8s 1 forwards;-moz-animation:grow 0.3s ease-out 1.8s 1 forwards;-webkit-animation:grow 0.3s ease-out 1.8s 1 forwards;}
 @keyframes grow{
 0%{transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);}
 80%{transform:scale(1.2);-moz-transform:scale(1.2);-webkit-transform:scale(1.2);}
 100%{transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);}
 }
 @-moz-keyframes grow{
 0%{transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);}
 80%{transform:scale(1.2);-moz-transform:scale(1.2);-webkit-transform:scale(1.2);}
 100%{transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);}
 }
 @-webkit-keyframes grow{
 0%{transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0);}
 80%{transform:scale(1.2);-moz-transform:scale(1.2);-webkit-transform:scale(1.2);}
 100%{transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);}
 }
 
 .tree{position:absolute;width:220px;height:158px;left:1093px;top:372px;z-index:6;background:url(http://hr.mokylin.com/images/animation/ElementTree.png) no-repeat 0 0;animation:slide-out 1s ease-out 0s 1 forwards;-moz-animation:slide-out 1s ease-out 0s 1 forwards;-webkit-animation:slide-out 1s ease-out 0s 1 forwards;}
  
 .grass3{position:absolute;width:139px;height:56px;left:1103px;top:441px;z-index:5;background:url(http://hr.mokylin.com/images/animation/ElementGrass3.png) no-repeat 0 0;animation:slide-out 1.3s ease-out 0s 1 forwards;-moz-animation:slide-out 1.3s ease-out 0s 1 forwards;-webkit-animation:slide-out 1.3s ease-out 0s 1 forwards;}
 @keyframes slide-out{0%{margin-left:900px;}80%{margin-left:-100px;}100%{margin-left:0;}}
 @-moz-keyframes slide-out{0%{margin-left:900px;}80%{margin-left:-100px;}100%{margin-left:0;}}
 @-webkit-keyframes slide-out{0%{margin-left:900px;}80%{margin-left:-100px;}100%{margin-left:0;}}
 
 .grass1{position:absolute;width:98px;height:40px;left:-254px;top:477px;z-index:5;background:url(http://hr.mokylin.com/images/animation/ElementGrass1.png) no-repeat 0 0;animation:slide-out-2 1s ease-out 0s 1 forwards;-moz-animation:slide-out-2 1s ease-out 0s 1 forwards;-webkit-animation:slide-out-2 1s ease-out 0s 1 forwards;}
  
 .grass2{position:absolute;width:99px;height:31px;left:-150px;top:503px;z-index:5;background:url(http://hr.mokylin.com/images/animation/ElementGrass2.png) no-repeat 0 0;animation:slide-out-2 1.2s ease-out 0s 1 forwards;-moz-animation:slide-out-2 1.2s ease-out 0s 1 forwards;-webkit-animation:slide-out-2 1.2s ease-out 0s 1 forwards;}
 @keyframes slide-out-2{0%{margin-left:-900px;}80%{margin-left:80px;}100%{margin-left:0;}}
 @-moz-keyframes slide-out-2{0%{margin-left:-900px;}80%{margin-left:80px;}100%{margin-left:0;}}
 @-webkit-keyframes slide-out-2{0%{margin-left:-900px;}80%{margin-left:80px;}100%{margin-left:0;}}
  
 
 
 .peak3{position:absolute;width:579px;height:53px;left:-287px;top:428px;z-index:1;background:url(http://hr.mokylin.com/images/animation/ElementPeak3.gif) no-repeat 0 0;transform:rotateX(90deg);-moz-transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform-origin:center bottom;transform-origin:center bottom;-webkit-transform-origin:center bottom;animation:growUp 2.5s ease-out 0s 1 forwards;-moz-animation:growUp 2.5s ease-out 0s 1 forwards;-webkit-animation:growUp 2.5s ease-out 0s 1 forwards;}
  
 .peak2{position:absolute;width:237px;height:130px;left:-230px;top:354px;z-index:2;background:url(http://hr.mokylin.com/images/animation/ElementPeak2.png) no-repeat 0 0;transform:rotateX(90deg);-moz-transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform-origin:center bottom;transform-origin:center bottom;-webkit-transform-origin:center bottom;animation:growUp 2.5s ease-out 0.3s 1 forwards;-moz-animation:growUp 2.5s ease-out 0.3s 1 forwards;-webkit-animation:growUp 2.5s ease-out 0.3s 1 forwards;}
  
 .peak1{position:absolute;width:195px;height:106px;left:-307px;top:378px;z-index:3;background:url(http://hr.mokylin.com/images/animation/ElementPeak1.png) no-repeat 0 0;transform:rotateX(90deg);-moz-transform:rotateX(90deg);-webkit-transform:rotateX(90deg);-moz-transform-origin:center bottom;transform-origin:center bottom;-webkit-transform-origin:center bottom;animation:growUp 2.5s ease-out 0.5s 1 forwards;-moz-animation:growUp 2.5s ease-out 0.5s 1 forwards;-webkit-animation:growUp 2.5s ease-out 0.5s 1 forwards;}
 @keyframes growUp{
 0%{transform:rotateX(90deg);-moz-transform:rotateX(90deg);-webkit-transform:rotateX(90deg);}
 100%{transform:rotateX(0deg);-moz-transform:rotateX(0deg);-webkit-transform:rotateX(0deg);}
 }
 @-moz-keyframes growUp{
 0%{transform:rotateX(90deg);-moz-transform:rotateX(90deg);-webkit-transform:rotateX(90deg);}
 100%{transform:rotateX(0deg);-moz-transform:rotateX(0deg);-webkit-transform:rotateX(0deg);}
 }
 @-webkit-keyframes growUp{
 0%{transform:rotateX(90deg);-moz-transform:rotateX(90deg);-webkit-transform:rotateX(90deg);}
 100%{transform:rotateX(0deg);-moz-transform:rotateX(0deg);-webkit-transform:rotateX(0deg);}
 }
  
  
 .main{width:1000px;height:566px;position:absolute;top:0;left:50%;margin-left:-500px;z-index:10;}
 .video{width:154px;height:84px;position:absolute;top:-12px;left:801px;background:url(http://hr.mokylin.com/images/animation/ElementVideo.gif) no-repeat 0 0;z-index:20;padding:74px 10px 5px;animation:slideDown 1.7s ease-out 0s 1 forwards;-moz-animation:slideDown 1.7s ease-out 0s 1 forwards;-webkit-animation:slideDown 1.7s ease-out 0s 1 forwards;}
 @keyframes slideDown{0%{margin-top:-900px;}90%{margin-top:10px;}100%{margin-top:0;}}
 @-moz-keyframes slideDown{0%{margin-top:-900px;}90%{margin-top:10px;}100%{margin-top:0;}}
 @-webkit-keyframes slideDown{0%{margin-top:-900px;}90%{margin-top:10px;}100%{margin-top:0;}}
  
 
 .flag{position:absolute;width:93px;height:87px;left:22px;top:426px;margin-top:9999px;background:url(http://hr.mokylin.com/images/animation/ElementFlag.png) no-repeat 0 0;animation:flag .5s ease 2s 1 forwards;-moz-animation:flag .5s ease 2s 1 forwards;-webkit-animation:flag .5s ease 2s 1 forwards;}
 @keyframes flag{0%{opacity:0;filter:alpha(opacity:0);margin-top:50px;}100%{opacity:1;filter:alpha(opacity:100);margin-top:0;}}
 @-moz-keyframes flag{0%{opacity:0;filter:alpha(opacity:0);margin-top:50px;}100%{opacity:1;filter:alpha(opacity:100);margin-top:0;}}
 @-webkit-keyframes flag{0%{opacity:0;filter:alpha(opacity:0);margin-top:50px;}100%{opacity:1;filter:alpha(opacity:100);margin-top:0;}}
 
 .mark{background:url(http://hr.mokylin.com/images/animation/cartoon-btn51x58.png) no-repeat 0 0;width:51px;height:58px;display:none;position:absolute;top:254px;left:120px;animation:swim-2 0.7s ease-in-out 0s infinite alternate;-moz-animation:swim-2 0.7s ease-in-out 0s infinite alternate;-webkit-animation:swim-2 0.7s ease-in-out 0s infinite alternate;}
 @keyframes swim-2{0%{margin-top:-10px;}100%{margin-top:10px;}}
 @-moz-keyframes swim-2{0%{margin-top:-10px;}100%{margin-top:10px;}}
 @-webkit-keyframes swim-2{0%{margin-top:-10px;}100%{margin-top:10px;}}
 
 .role{position:absolute;cursor:pointer;z-index:10;}
 .role1{width:168px;height:184px;left:48px;top:318px;background:url(http://hr.mokylin.com/images/animation/cartoon1.png) no-repeat 0 0;}
 .role1 div{width:61px;height:28px;left:16px;top:162px;background:url(http://hr.mokylin.com/images/animation/cartoon1-element.png) no-repeat left top;position:absolute;text-indent:-100px;overflow:hidden;}
 .role2{width:108px;height:169px;left:255px;top:333px;background:url(http://hr.mokylin.com/images/animation/cartoon2.png) no-repeat 0 0;}
 .role2 div{width:41px;height:41px;left:-15px;top:134px;background:url(http://hr.mokylin.com/images/animation/cartoon2-element.png) no-repeat left top;position:absolute;text-indent:-100px;overflow:hidden;}
 .role3{width:184px;height:221px;left:376px;top:281px;background:url(http://hr.mokylin.com/images/animation/cartoon3.png) no-repeat 0 0;}
 .role3 div{width:31px;height:31px;left:9px;top:197px;background:url(http://hr.mokylin.com/images/animation/cartoon3-element.png) no-repeat left top;position:absolute;text-indent:-100px;overflow:hidden;}
 .role4{width:109px;height:173px;left:558px;top:329px;background:url(http://hr.mokylin.com/images/animation/cartoon4.png) no-repeat 0 0;}
 .role5{width:161px;height:177px;left:676px;top:325px;background:url(http://hr.mokylin.com/images/animation/cartoon5.png) no-repeat 0 0;}
 .role6{width:111px;height:173px;left:852px;top:329px;background:url(http://hr.mokylin.com/images/animation/cartoon6.png) no-repeat 0 0;}
 .role6 div{width:86px;height:78px;left:-47px;top:108px;background:url(http://hr.mokylin.com/images/animation/cartoon6-element.png) no-repeat left top;position:absolute;text-indent:-100px;overflow:hidden;}
 </style>
 </head>
 <body>
 <div id="animation">
 <div class="background">
 <div class="cloud"><img src="http://hr.mokylin.com/images/animation/ElementCloud.png" alt="cloud"/></div>
 <div class="cloud"><img src="http://hr.mokylin.com/images/animation/ElementCloud.png" alt="cloud"/></div>
 <div class="cloud"><img src="http://hr.mokylin.com/images/animation/ElementCloud.png" alt="cloud"/></div>
 <div class="cloud"><img src="http://hr.mokylin.com/images/animation/ElementCloud.png" alt="cloud"/></div>
 <div class="cloud"><img src="http://hr.mokylin.com/images/animation/ElementCloud.png" alt="cloud"/></div>
 <div class="cloud"><img src="http://hr.mokylin.com/images/animation/ElementCloud.png" alt="cloud"/></div>
 <div class="car"></div>
 <div class="tree"></div>
 <div class="grass3"></div>
 <div class="grass2"></div>
 <div class="grass1"></div>
 <div class="tower"></div>
 <div class="peak3"></div>
 <div class="peak2"></div>
 <div class="peak1"></div>
 </div>
 <div class="main">
 <div class="video">
 <embed src="http://player.youku.com/player.php/sid/XMTMzNjYxMjYxNg==/v.swf" allowFullScreen="true" quality="high" width="154" height="84" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
 </div>
 <div class="hole"></div>
 <div class="flag"></div>
 <div class="mark"></div>
 <div class="role role1">
 <div>手柄</div>
 </div>
 <div class="role role2">
 <div>主机</div>
 </div>
 <div class="role role3">
 <div>足球</div>
 </div>
 <div class="role role4"></div>
 <div class="role role5"></div>
 <div class="role role6">
 <div>仙人掌</div>
 </div>
 </div>
 <script>
 window.οnlοad=function(){
 var role1=document.getElementsByClassName("role1")[0];
 var role2=document.getElementsByClassName("role2")[0];
 var role3=document.getElementsByClassName("role3")[0];
 var role4=document.getElementsByClassName("role4")[0];
 var role5=document.getElementsByClassName("role5")[0];
 var role6=document.getElementsByClassName("role6")[0];
 var mark=document.getElementsByClassName("mark")[0];
 var timer=null;
 var delay=null;
 role1.οnmοuseenter=function(){
 var _this=this;
 var time=0;
 clearTimeout(delay);
 delay=setTimeout(function(){
 clearInterval(timer);
 timer=setInterval(function(){
 _this.style.backgroundPosition=-168*time+"px";
 time++;
 if(time==13){
 clearInterval(timer);
 }
 },37);
 mark.style.left=120+"px";
 mark.style.display="block";
 },500);
 };
 role1.οnmοuseleave=function(){
 clearInterval(timer);
 var _this=this;
 var time=12;
 timer=setInterval(function(){
 _this.style.backgroundPosition=-168*time+"px";
 time--;
 if(time==-1){
 clearInterval(timer);
 }
 },37);
 mark.style.display="none";
 };
  
 role2.οnmοuseenter=function(){
 var _this=this;
 var time=0;
 clearTimeout(delay);
 delay=setTimeout(function(){
 clearInterval(timer);
 timer=setInterval(function(){
 _this.style.backgroundPosition=-108*time+"px";
 time++;
 if(time==12){
 clearInterval(timer);
 }
 },37);
 mark.style.left=267+"px";
 mark.style.display="block";
 },560);
 };
 role2.οnmοuseleave=function(){
 clearInterval(timer);
 var _this=this;
 var time=11;
 timer=setInterval(function(){
 _this.style.backgroundPosition=-108*time+"px";
 time--;
 if(time==-1){
 clearInterval(timer);
 }
 },37);
 mark.style.display="none";
 };
  
 role3.οnmοuseenter=function(){
 var _this=this;
 var time=0;
 clearTimeout(delay);
 delay=setTimeout(function(){
 clearInterval(timer);
 timer=setInterval(function(){
 _this.style.backgroundPosition=-184*time+"px";
 time++;
 if(time==14){
 clearInterval(timer);
 }
 },37);
 mark.style.left=416+"px";
 mark.style.display="block";
 },500);
 };
 role3.οnmοuseleave=function(){
 clearInterval(timer);
 var _this=this;
 var time=13;
 timer=setInterval(function(){
 _this.style.backgroundPosition=-184*time+"px";
 time--;
 if(time==-1){
 clearInterval(timer);
 }
 },37);
 mark.style.display="none";
 };
  
 role4.οnmοuseenter=function(){
 var _this=this;
 var time=0;
 clearTimeout(delay);
 delay=setTimeout(function(){
 clearInterval(timer);
 timer=setInterval(function(){
 _this.style.backgroundPosition=-109*time+"px";
 time++;
 if(time==13){
 clearInterval(timer);
 }
 },37);
 mark.style.left=570+"px";
 mark.style.display="block";
 },630);
 };
 role4.οnmοuseleave=function(){
 clearInterval(timer);
 var _this=this;
 var time=12;
 timer=setInterval(function(){
 _this.style.backgroundPosition=-109*time+"px";
 time--;
 if(time==-1){
 clearInterval(timer);
 }
 },37);
 mark.style.display="none";
 };
  
 role5.οnmοuseenter=function(){
 var _this=this;
 var time=0;
 clearTimeout(delay);
 delay=setTimeout(function(){
 clearInterval(timer);
 timer=setInterval(function(){
 _this.style.backgroundPosition=-161*time+"px";
 time++;
 if(time==16){
 clearInterval(timer);
 }
 },37);
 mark.style.left=718+"px";
 mark.style.display="block";
 },500);
 };
 role5.οnmοuseleave=function(){
 clearInterval(timer);
 var _this=this;
 var time=15;
 timer=setInterval(function(){
 _this.style.backgroundPosition=-161*time+"px";
 time--;
 if(time==-1){
 clearInterval(timer);
 }
 },37);
 mark.style.display="none";
 };
  
 role6.οnmοuseenter=function(){
 var _this=this;
 var time=0;
 clearTimeout(delay);
 delay=setTimeout(function(){
 clearInterval(timer);
 timer=setInterval(function(){
 _this.style.backgroundPosition=-111*time+"px";
 time++;
 if(time==13){
 clearInterval(timer);
 }
 },37);
 mark.style.left=860+"px";
 mark.style.display="block";
 },630);
 };
 role6.οnmοuseleave=function(){
 clearInterval(timer);
 var _this=this;
 var time=12;
 timer=setInterval(function(){
 _this.style.backgroundPosition=-111*time+"px";
 time--;
 if(time==-1){
 clearInterval(timer);
 }
 },37);
 mark.style.display="none";
 };
 };
 </script>
 </div>
 </body>
 </html>