前言

所谓文字聚合效果，原理就是将容器分为若干的小块，然后每个小块设置背景中毒，最后添加css3动画就可以了，去掉注释，也就仅仅20行的代码。

先来看看效果图：

射流研究…代码如下：

//c为列数，r为行数，把包厢划分成多少个小块var box=文档。queryselector('。盒子包装1’)，c=4，r=8；//每个小块的宽高var w=box.offsetWidth/c,h=box.offsetHeight/r;/循环添加小块for(var I=0；I r；I){ for(var j=0；j c；j){ var _ div=文档。创建元素(' div ')；var _left=j * w，_ top=I * h；//添加钢性铸铁样式，并设置每个小块的背景_ div。风格。CSS文本=' width : ' w ' px高度： ' h ' pxleft : ' _ left ' pxtop : ' _ top ' pxo pacity :0 background-position : '(-_ left)' px '(-_ top)' px '；//添加钢性铸铁动画时间_ div。风格。过渡=“全部”随机(1，1.8)的‘安逸’；//添加钢性铸铁的改变动画_div.style.transform='透视(800像素)平移3d(' Random(-200，200) 'px，' Random(-200，200) 'px，300px)旋转(“随机(-90，90)'度)缩放(“随机(0，2)”)”//添加盒子。append child(_ div)；};};//延时添加动画setTimeout(函数(){ box。班级名单。添加(' set ')；},100);//随机数函数随机(开始，结束){返回Math.random()*(结束-开始)开始；};完整的示例如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title利用射流研究…实现文字的聚合动画效果/title样式。Boxwrap 1 {宽度： 160 px高度： 417像素；相对位置：余量：0px汽车；} .Boxwrap 1 img {宽度： 100%；} .Boxwrap 1 div {背景： URL(http://itakeo。com/wpi mg/2 _ 1。png)不重复；背景尺寸： 160像素自动；绝对位置：left: 0pxtop: 0px}。纸盒包装1。set div { opa city 3360 1！重要；变压器：透视(800像素)平移3d(0px，0px，0px)旋转(0度)刻度(1)!重要；-moz-transform :透视(800像素)平移3d(0px，0px，0px)旋转(0度)刻度(1)!重要；-WebKit-transform :透视(800像素)平移3d(0px，0px，0px)旋转(0度)刻度(1)!重要；}.BoxSitewrap { width : 100%；飞越：隐藏；height: auto背景技术： # 000;padding: 140px 0 } .boxSiteWrap按钮{ cursor : pointer display :块；font-size : 16px宽度： 140像素；高度： 40px背景# fffcolor : # 000 border : none margin :30 px汽车；}/style/head dydiv class=' BoxSitewrap ' div class=' Boxwrap 1 '/div按钮重新加载/button/divscriptwindow。addeventlistener(' load '，function(){；(function(){ function init(){ var box=document。queryselector('。盒子包装1’)，c=4，r=8；var w=box.offsetWidth/c,h=box.offsetHeight/r;for(var I=0；IR；I){ for(var j=0；JC；j){ var _ div=文档。创建元素(' div ')；var _left=j * w，_ top=I * h；_ div。风格。CSS文本=' width : ' w ' px高度： ' h ' pxleft : ' _ left ' pxtop : ' _ top ' pxo pacity :0 background-position : '(-_ left)' px '(-_ top)' px '；_ div。风格。过渡=_ div。风格。moztransition=_ div。风格。webkittransition=' all ' Random(1，1.8)的ease_ div。风格。transform=_ div。风格。moztransform=_ div。风格。webkittransform='透视(800像素)平移3d(' Random(-200，200) 'px，' Random(-200，200) 'px，300px)旋转(“随机(-90，90)'度)缩放(“随机(0，2)”)框。append child(_ div)；};};setTimeout(函数(){ box。班级名单。add(' set ')}，100)；函数随机(开始，结束){返回Math.random()*(结束-开始)开始；};};init()；定义变量标志=真；document.querySelector('按钮')。onclick=function(){ if(flag){ document。queryselector('。纸盒包装1’)。班级名单。移除(' set ')setTimeout(函数(){ document。queryselector('。纸盒包装1’.innerHTML=init()；flag=true}，1200)；flag=false }；};})();});/脚本/正文/html总结

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。