思路：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 body{ 12 background-color:#000; 13 } 14 .box{ 15 width:500px; 16 height:630px; 17 margin: 0 auto 300px; 18 } 19 .container{ 20 width:230px; 21 height:599px; 22 position: relative; 23 margin:50px auto; 24 } 25 .container div{ 26 background:url(2_1.png) no-repeat; 27 position:absolute; 28 background-size: 230px auto; 29 } 30 button{ 31 padding: 10px 5px; 32 float:left; 33 } 34 .set div{ 35 opacity: 1!important; 36 -webkit-transform:perspective(800px) translate3d(0px,0px,0px) rotate(0deg) scale(1)!important; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="box"> 42 <button>重新加载</button> 43 <div class="container"></div> 44 </div> 45 <script type="text/javascript"> 46 window.addEventListener(‘load‘,function(){ 47 ;(function(){ 48 function init(){ 49 var box = document.getElementsByClassName(‘container‘),c=5,r=10; 50 var w = box[0].clientWidth/c,h=box[0].clientHeight/r; 51 for (var i = 0; i < r; i++) { 52 for (var j = 0; j < c; j++) { 53 var _div = document.createElement(‘div‘); 54 var _left = j*w, _top = i*h; 55 _div.style.cssText = ‘width:‘+w+‘px;height:‘+h+‘px;opacity:0;background-position:‘+(-_left)+‘px ‘+(-_top)+‘px;top:‘+_top+‘px;left:‘+_left+‘px;‘ 56 _div.style.transition = ‘all ‘+Random(1,1.8)+‘s ease‘; 57 _div.style.transform = ‘perspective(800px) translate3d(‘+Random(-200,200) 58 +‘px,‘+Random(-200,200)+‘px,300px) rotate(‘+Random(-90,90)+‘deg) scale(‘ 59 +Random(0,2)+‘)‘; 60 box[0].appendChild(_div); 61 }; 62 }; 63 setTimeout(function(){ 64 box[0].classList.add(‘set‘) 65 },200); 66 function Random(start,end){ 67 return Math.random()*(end-start)+start; 68 } 69 } 70 init(); 71 //设置自定义标记判断变量 72 var flag = true; 73 //点击button运行的函数 74 document.querySelector(‘button‘).onclick = function(){ 75 //此时flag为true 76 if(flag){ 77 //移除set类，目的：取消important属性 78 document.querySelector(‘.container‘).classList.remove(‘set‘); 79 //1200ms后执行下面的函数 80 setTimeout(function(){ 81 //把初始化的div清除，防止多次叠加 82 document.querySelector(‘.container‘).innerHTML = ‘‘; 83 //添加初始化函数，即给他创建div和添加各种属性 84 init(); 85 //把flag设置为true，则在执行完之后设置为flag=true. 86 flag = true; 87 },1200); 88 //防止在1200ms这段时间内点击进入函数。此时先执行这句，1200ms后执行setTimeout里面的函数 89 flag = false; 90 }; 91 }; 92 })(); 93 }) 94 </script> 95 </body> 96 </html>
原文：http://www.cnblogs.com/qianduanjingying/p/5077077.html