码迷,mamicode.com
首页 > 其他好文 > 详细

动画自用

时间:2019-09-04 11:36:17      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:sla   mat   css   tom   ati   move   head   html   nim   

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

  

动画自用

标签:sla   mat   css   tom   ati   move   head   html   nim   

原文地址:https://www.cnblogs.com/beimingbingpo/p/11457975.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!