前言
專注于為中小企業(yè)提供網(wǎng)站設計制作、做網(wǎng)站服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)巫溪免費做網(wǎng)站提供優(yōu)質的服務。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動了成百上千企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉變。
所謂文字聚合效果,原理就是將容器分為若干的小塊,然后每個小塊設置 background-poisition
,最后添加css3動畫就可以了,去掉注釋,也就僅僅20行的代碼。
先來看看效果圖:
js代碼如下:
//c為列數(shù),r為行數(shù),把box劃分成多少個小塊 var box = document.querySelector('.boxWrap1'),c=4,r=8; //每個小塊的寬高 var w = box.offsetWidth/c,h = box.offsetHeight/r; //循環(huán)添加小塊 for(var i = 0;i < r;i++){ for(var j = 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); //隨機數(shù) function Random(start,end){ return Math.random()*(end-start)+start; };
完整的示例如下:
利用JS實現(xiàn)文字的聚合動畫效果
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。