真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

利用JS實現(xiàn)文字的聚合動畫效果

前言

專注于為中小企業(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實現(xiàn)文字的聚合動畫效果

利用JS實現(xiàn)文字的聚合動畫效果

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)文字的聚合動畫效果




總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。


網(wǎng)站題目:利用JS實現(xiàn)文字的聚合動畫效果
當前地址:http://weahome.cn/article/jogchp.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部