<!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>
时间： 2024-08-30 13:30:22