css3动画效果

来源：互联网发布：linux 下启动smb服务编辑：程序博客网时间：2024/05/14 09:09

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> /*transform是变形: rotate旋转/scale缩放/skew倾斜/translate移动/matrix矩阵变形 .demo{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out} .demo:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0)} */ /*translate是移动:translateX(10px)/translateY(10px)*/ /*transition是平滑过渡动画用于鼠标单击，获得焦点，对元素触发的时候平滑的过渡动画 transition:width 2s linear 2s; transition-property 属性 transition-duration 动画的持续时间 transition-timing-function 动画效果 ease:逐渐变慢 linear:匀速 ease-in:加速 ease-out:减速 ease-in-out:先加速后减速 cubic-bezier:cubic-bezier曲线 */ /* animation-name 属性为@keyframes 动画规定名称 animation-duration属性定义动画完成一个周期所需要的时间(以秒或毫秒计) animation-timing-function规定动画的速度曲线。(linear动画从头到尾的速度是相同的。ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开) animation-delay规定在动画开始之前的延迟。(值以秒或毫秒计) animation-iteration-count规定动画应该播放的次数。(n定义动画播放次数的数值,infinite规定动画应该无限次播放) animation-direction: normal | reverse | alternate | alternate-reverse [, normal | reverse | alternate | alternate-reverse ]*; 指定对象动画运动的方向。alternate动画应该轮流反向播放) animation-fill-mode: none | forwards | backwards | both; 检索或设置对象动画时间之外的状态 none 不改变默认行为。 forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 both 向前和向后填充模式都被应用。 */ *{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%;} /*swim*/ .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;}} /*grow*/ .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);} } /*slide-out*/ .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;}} /*slide-out-2*/ .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;}} /*growUp*/ /*transform-origin设置旋转元素的基点位置*/ .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*/ .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*/ .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*/ .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"><imgsrc="http://hr.mokylin.com/images/animation/ElementCloud.png"alt="cloud"/></div> <div class="cloud"><imgsrc="http://hr.mokylin.com/images/animation/ElementCloud.png"alt="cloud"/></div> <div class="cloud"><imgsrc="http://hr.mokylin.com/images/animation/ElementCloud.png"alt="cloud"/></div> <div class="cloud"><imgsrc="http://hr.mokylin.com/images/animation/ElementCloud.png"alt="cloud"/></div> <div class="cloud"><imgsrc="http://hr.mokylin.com/images/animation/ElementCloud.png"alt="cloud"/></div> <div class="cloud"><imgsrc="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.onload=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.onmouseenter=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.onmouseleave=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.onmouseenter=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.onmouseleave=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.onmouseenter=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.onmouseleave=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.onmouseenter=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.onmouseleave=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.onmouseenter=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.onmouseleave=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.onmouseenter=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.onmouseleave=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>

0 0