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

无聊写个TweenLite玩玩

时间:2014-11-13 14:36:18      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   ar   os   sp   java   

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Fun</title>
	<script type="text/javascript" src=‘http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js‘></script>
	<script type="text/javascript" src=‘http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js‘></script>
	<script type="text/javascript" src=‘http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js‘></script>

	<style type="text/css">
	body{background-color: #D6D6D6;}
	.rect{width: 200px; height: 200px; background-color: wheat; position: absolute; left: 50%; top:50%; margin-left: -100px; margin-top: -100px;}
	</style>

	<script type="text/javascript">
	window.onload = function(){
		var targets = document.getElementsByClassName(‘rect‘);
		var len     = targets.length;
		var ox 		= 0;
		var oy 		= 0;
		var ww 		= window.innerWidth;
		var wh 		= window.innerHeight;
		var scale   = 1;
		var rotation= 0;
		var rotationX= 0;
		var rotationY= 0;
		var color   = ‘wheat‘;
		var radius  = ‘0‘;
		window.setInterval(function(){
			for(var i=0; i<len; i++){
				ox 		= 100 + Math.random()*(ww-300);
				oy 		= 100 + Math.random()*(wh-300);
				scale 	= 0.3+Math.random();
				rotation= Math.floor(Math.random()*360);
				rotationX= 180*Math.floor(Math.random()*10);
				rotationY= 180*Math.floor(Math.random()*10);
				color   = "rgba("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+","+Math.random()+")";
				radius  = Math.random()*50 + ‘%‘;
				tt 		= TweenLite.to(targets[i],1,{‘left‘:ox, ‘top‘:oy, ‘scale‘:scale, ‘rotation‘:rotation, ‘rotationX‘:rotationX, ‘rotationY‘:rotationY, ‘backgroundColor‘:color, ‘borderRadius‘:radius});
			}
		},3000);
	};
	</script>
</head>
<body>
	<div class=‘rect‘></div>
	<div class=‘rect‘></div>
	<div class=‘rect‘></div>
	<div class=‘rect‘></div>
	<div class=‘rect‘></div>
	<div class=‘rect‘></div>
	<div class=‘rect‘></div>
	<div class=‘rect‘></div>
	<div class=‘rect‘></div>
	<div class=‘rect‘></div>
	<div class=‘rect‘></div>
	<div class=‘rect‘></div>
	<div class=‘rect‘></div>
	<div class=‘rect‘></div>
	<div class=‘rect‘></div>
	<div class=‘rect‘></div>
	<div class=‘rect‘></div>
</body>
</html>

  

无聊写个TweenLite玩玩

标签:style   blog   http   io   color   ar   os   sp   java   

原文地址:http://www.cnblogs.com/tujia/p/4094753.html

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