js实现继承|利用JS实现文字的聚合动画效果

更新时间:2021-06-09    来源:css3教程    手机版     字体:

【www.bbyears.com--css3教程】

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

先来看看效果图:

js代码如下:

 

 代码如下

//c为列数,r为行数,把box划分成多少个小块

varbox = document.querySelector('.boxWrap1'),c=4,r=8;

//每个小块的宽高

varw = box.offsetWidth/c,h = box.offsetHeight/r;

//循环添加小块

for(vari = 0;i < r;i++){

 for(varj = 0;j < c;j++) {

  var_div=document.createElement('div');

  var_left = j * w,_top = i * h;

  //添加css样式,并设置每个小块的背景

  _div.style.cssText ='width:'+w+'px;height:'+h+'px;left:'+_left+'px;top:'+_top+'px; opacity:0;background-position:'+(-_left) +'px '+ (-_top) +'px';

  //添加css动画时间

  _div.style.transition ='all '+ Random(1,1.8) +'s ease';

  //添加css的transform动画

  _div.style.transform ='perspective(800px) translate3d('+Random(-200,200)+'px, '+Random(-200,200)+'px,300px) rotate('+Random(-90,90)+'deg) scale('+ Random(0,2) +')'

  //添加

  box.appendChild(_div);

 };

};

//延时添加动画

setTimeout(function(){

 box.classList.add('set');

},100);

//随机数

functionRandom(start,end){

 returnMath.random()*(end-start)+start;

};

完整的示例如下:

 代码如下

利用JS实现文字的聚合动画效果

 

 

 

 

<script>

window.addEventListener('load',function(){

;(function(){

    function init(){

        var box = document.querySelector('.boxWrap1'),c=4,r=8;

        var w = box.offsetWidth/c,h = box.offsetHeight/r;

        for(var i=0;i

            for(varj=0;j

                var_div=document.createElement('div');

                var_left=j* w,_top=i* h;

                _div.style.cssText='width:'+w+'px;height:'+h+'px;left:'+_left+'px;top:'+_top+'px; opacity:0;background-position:'+(-_left) + 'px ' + (-_top) + 'px';

                _div.style.transition= _div.style.MozTransition=_div.style.WebkitTransition='all '+ Random(1,1.8) +'s ease';

                _div.style.transform= _div.style.MozTransform=_div.style.WebkitTransform='perspective(800px) translate3d('+Random(-200,200)+'px, '+Random(-200,200)+'px,300px) rotate('+Random(-90,90)+'deg) scale('+ Random(0,2) +')'

                box.appendChild(_div);

            };

        };

        setTimeout(function(){

            box.classList.add('set')

        },100);

        function Random(start,end){

         return Math.random()*(end-start)+start;

        };

    };

    init();

    varflag=true;

    document.querySelector('button').onclick=function(){

        if(flag){

            document.querySelector('.boxWrap1').classList.remove('set')

            setTimeout(function(){

                document.querySelector('.boxWrap1').innerHTML='';

                init();

                flag=true;

            },1200);

            flag=false;

        };

    };

})();

});

</script>

本文来源:http://www.bbyears.com/css/122629.html