文字聚合动画效果。
预览效果：http://sandbox.runjs.cn/show/k6zvbrus
思路：
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>
改变3d的方式：
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 perspective:200px; //改变之后3d效果更加明显，由于在这个容器里面有很多的div. 25 } 26 .container div{ 27 background:url(images/2_1.png) no-repeat; 28 position:absolute; 29 background-size: 230px auto; 30 31 } 32 button{ 33 padding: 10px 5px; 34 float:left; 35 } 36 .set div{ 37 opacity: 1!important; 38 -webkit-transform:translate3d(0px,0px,0px) rotate(0deg) scale(1)!important; 39 } 40 </style> 41 </head> 42 <body> 43 <div class="box"> 44 <button>重新加载</button> 45 <div class="container"></div> 46 </div> 47 <script type="text/javascript"> 48 window.addEventListener('load',function(){ 49 ;(function(){ 50 function init(){ 51 var box = document.getElementsByClassName('container'),c=5,r=10; 52 var w = box[0].clientWidth/c,h=box[0].clientHeight/r; 53 for (var i = 0; i < r; i++) { 54 for (var j = 0; j < c; j++) { 55 var _div = document.createElement('div'); 56 var _left = j*w, _top = i*h; 57 _div.style.cssText = 'width:'+w+'px;height:'+h+'px;opacity:0;background-position:'+(-_left)+'px '+(-_top)+'px;top:'+_top+'px;left:'+_left+'px;' 58 _div.style.transition = 'all '+Random(1,1.8)+'s ease'; 59 _div.style.transform = 'translate3d('+Random(-200,200) 60 +'px,'+Random(-200,200)+'px,300px) rotate('+Random(-90,90)+'deg) scale(' 61 +Random(0,2)+')'; 62 box[0].appendChild(_div); 63 }; 64 }; 65 setTimeout(function(){ 66 box[0].classList.add('set') 67 },200); 68 function Random(start,end){ 69 return Math.random()*(end-start)+start; 70 } 71 } 72 init(); 73 //设置自定义标记判断变量 74 var flag = true; 75 //点击button运行的函数 76 document.querySelector('button').onclick = function(){ 77 //此时flag为true 78 if(flag){ 79 //移除set类，目的：取消important属性 80 document.querySelector('.container').classList.remove('set'); 81 //1200ms后执行下面的函数 82 setTimeout(function(){ 83 //把初始化的div清除，防止多次叠加 84 document.querySelector('.container').innerHTML = ''; 85 //添加初始化函数，即给他创建div和添加各种属性 86 init(); 87 //把flag设置为true，则在执行完之后设置为flag=true. 88 flag = true; 89 },1200); 90 //防止在1200ms这段时间内点击进入函数。此时先执行这句，1200ms后执行setTimeout里面的函数 91 flag = false; 92 }; 93 }; 94 })(); 95 }) 96 </script> 97 </body> 98 </html>
