动画自用

最新推荐文章于 2024-09-16 08:47:17 发布

weixin_30781433

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量64

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/beimingbingpo/p/11457975.html

版权

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

转载于:https://www.cnblogs.com/beimingbingpo/p/11457975.html