<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.joinShopCarAnimation {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
border-radius: 50%;
z-index: 999999;
/*transition: all 2s;*/
}
.t1{
transition: transform 2s;
transform: scale(2);
}
.t2{
transition:all 2s ;
width:1px;
height:1px;
transform: translate(300px,50px);
}
</style>
<body>
<script>
var t0 = $('<div> <img src="http://baoyitech.oss-cn-hangzhou.aliyuncs.com/155610165000057acc0525856bc8888d9abb870d4b302" class="joinShopCarAnimation"></div>');
var t = $("body").append(t0)
setTimeout(function(){
t0.find("img").addClass("t1");
},0)
var x = $(window).width()/2-10;
var me = 400;
var y = $(window).height()/2-10;
// var y = $(".t").height()+20
setTimeout(function(){
t0.find("img").addClass("t2").css("transform","translate("+x+"px,"+(y-me)+"px)");
},2000)
setTimeout(function(){
t0.remove();
},4000)
</script>
</body>
</html>
