版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhuoganliwanjin/article/details/83858666
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/TweenMax.js" ></script>
<style>
.box{width: 100px;height: 45px; background: #e96235; border-radius: 10px; margin: 100px auto; text-align: center; color: #fff; line-height: 44px;}
</style>
</head>
<body>
<div class="box">戳我</div>
</body>
<script>
var box = document.getElementsByClassName('box')[0];
function ButtonAnimation(dom){
this.dom = dom;
this.t = new TimelineMax();
}
ButtonAnimation.prototype.init = function(){
var _this = this;
this.t.to(_this.dom,0.15,{
scaleX:1.1,
scaleY:0.8,
skewX:2,
x:2,
skewY:2,
force3D:true,
ease:Quad.easeInOut,
onComplete:function(){
_this.t.to(_this.dom,0.15,{
scaleX:0.9,
scaleY:1.1,
skewX:-2,
x:-2,
skewY:-2,
force3D:true,
ease:Quad.easeInOut,
onComplete:function(){
_this.t.to(_this.dom,0.2,{
scaleX:1,
skewX:0,
x:0,
skewY:0,
scaleY:1,
force3D:true,
ease:Back.easeOut
})
}
})
}
})
}
box.onclick = function(){
var btn = new ButtonAnimation(box);
btn.init();
}
</script>
</html>