所谓文字聚合效果,原理就是将容器分为若干的小块,然后每个小块设置<代码> background-poisition>
//c为列数,r为行数,把盒子划分成多少个小块
var盒=document.querySelector (“.boxWrap1”), c=4, r=8;//每个小块的宽高
var w=盒子。offsetWidth/c、h=box.offsetHeight/r;//循环添加小块
我(var=0; & lt;r;我+ +){
(var j=0; j & lt;c; j + +) {
var _div=document.createElement (div);
var _left=j * w, _top=我* h;//添加css样式,并设置每个小块的背景
_div.style。cssText='宽度:' + w +“px;高度:”+ h +的px;左:+ _left +“px;最高:”+ _top +“px;透明度:0;背景位置:' + (-_left) + ' px”+ (-_top) +“px”;//添加css动画时间
_div.style。过渡='所有' +随机(1.8)+年代缓解;//添加css的变换动画
_div.style。变换='角度(800 px) translate3d(+随机(-200200)+ px, +随机(-200200)+ px, 300 px)旋转(' +随机(-90、90)+ '度)规模(' +随机(0,2)+ ')'//添加
box.appendChild (_div);
}；
}；//延时添加动画
setTimeout(函数(){
box.classList.add('设置');
}, 100);//随机数
函数随机(开始、结束){
返回math . random () * (end-start) +开始;
};之前
& lt; !DOCTYPE html公共”——//W3C XHTML 1.0//DTD过渡//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”的在
& lt; html xmlns=" http://www.w3.org/1999/xhtml "比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>利用JS实现文字的聚合动画效果& lt;/title>
& lt; style>
.boxWrap1{宽度:160 px;高度:417 px;位置:相对;保证金:0 px汽车;}
.boxWrap1 img{宽度:100%;}
.boxWrap1 div{背景:url (http://itakeo.com/wpimg/2_1.png)不再重演;background-size: 160 px汽车;位置:绝对的;左:0 px;: 0 px;
}
.boxWrap1。设置div{不透明度:1 !重要;
变换:角度(800 px) translate3d (0 px, 0 px, 0 px)旋转(0度)规模(1)!重要;
-moz-transform:角度(800 px) translate3d (0 px, 0 px, 0 px)旋转(0度)规模(1)!重要;
-webkit-transform:角度(800 px) translate3d (0 px, 0 px, 0 px)旋转(0度)规模(1)!重要;
}
.boxSiteWrap{宽度:100%;溢出:隐藏;高度:汽车;背景:# 000;填充:140 px 0}
.boxSiteWrap按钮{光标:指针;显示:块;字体大小:16 px;宽度:140 px;高度:40像素;背景:# fff;颜色:# 000;边界:没有,保证金:30 px汽车;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=癰oxSiteWrap”比;
& lt; div类=" boxWrap1 "祝辞& lt;/div>
& lt; button>重新加载& lt;/button>
& lt;/div>
& lt; script>
window.addEventListener(“负载”,函数(){
;(函数(){
init()函数{
var盒=document.querySelector (“.boxWrap1”), c=4, r=8;
var w=盒子。offsetWidth/c、h=box.offsetHeight/r;
我(var=0; i利用JS实现文字的聚合动画效果
