<!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-11-08 05:33:40