您的位置：首页 > Web前端 > CSS

css3动画效果

2015-12-07 11:08 579 查看
 <!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"><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.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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航