用 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>