TweenMax的小用法

用 TweenMax制作炫酷魔性动画

html代码

<div class="name" id="name">
   <dir class="contain" id="contain"></dir>
   <div class="box" id="box"></div>
   </div>

JavaScript代码

 <script type="text/javascript">
window.οnlοad=function(){
var d=document.getElementById("box");
var name=document.getElementById("name");
  TweenMax.set(name, {
    	  position: 'absolute',
    	  top: '50%',
    	  left: '50%',
    	  xPercent: -50,
    	  yPercent: -50
    	})
alert("a");
 var tl = new TimelineMax({repeat:-1});
    tl.to('#box', 0.5,
     {rotation:-90,transformOrigin:"left bottom"
     }
     )
     .set('#box',{
    left:'-=100',
    rotation:0
     }
     )
     .to('#box',0.5,
          {rotation:-90,transformOrigin:"left bottom"
     }
     )
  .to('#name',0.3,{
  rotation:180,transformOrigin:"center bottom"
  })
  .set('#box',{
    left:'-=100',
    rotation:0
     }
     )
  .to('#box',0.5,{
  rotation:-270,transformOrigin:"left bottom"
  })
   .set('#box',{
   top:'100px',
   
    rotation:0
     }
     )
      .to('#box',0.5,{
  rotation:-90,transformOrigin:"right top"
  })
  .set('#box',{
    left:'+=100',
    rotation:0
     }
     )
  .to('#box',0.5,{
  rotation:-90,transformOrigin:"right top"
  })
 .to('#name',0.3,{
rotation:360,transformOrigin:"center bottom"
})
.set('#box',{
    left:'+=100',
    rotation:0
     }
     )
.to('#box',0.5,{
rotation:-270,transformOrigin:"right top"
})
  
   }
 </script>

还要引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>