利用css3 transform和transition樣式制作點擊圖片時 圖片爆炸開并切換到下一張圖片依次循環

首先先看一下效果圖

Paste_Image.png

先描述一下大概思路：

布局時外面有一個大的父盒子(box)里面包含多個span(span都是js動態創建的)創建出來的span平鋪到box上(定位)， 多個span拼成一張圖片，box是另一張圖片 點擊box時每個span爆炸開(移動 ，旋轉并且 變大消失)這時會看到box的圖片，當每個span過渡完成之后再瞬間恢復到原來的位置且圖片換成與box相同的圖片，這樣就可以循環點擊了，下面看一下具體的實現代碼，代碼里面每一步都有詳細的解釋：

Title

*{

margin:0;

padding:0

}

html,body{

overflow: hidden;

}

#box{

width:700px;

height:400px;

background:url("img/1.jpg");

position: absolute;

left:50%;

top:50%;

margin-top:-200px;

margin-left:-350px;

}

#box span{

position: absolute;

left:0;

top:0;

background:url("img/0.jpg");

transform:perspective(800px) translate(0px,0px) rotateX(0deg) rotateY(0deg) scale(1);

}

document.addEventListener('DOMContentLoaded',function(){

var oBox=document.getElementById('box');

//定義列

var C=7;

//定義列

var R=4;

//動態創建span 并且平鋪

for(var i=0; i

for(var j=0; j

var oSpan=document.createElement('span');

//設置每個span的寬高

oSpan.style.width=oBox.offsetWidth/C+'px';

oSpan.style.height=oBox.offsetHeight/R+'px';

//給每個span定位

oSpan.style.left=j*oBox.offsetWidth/C+'px';

oSpan.style.top=i*oBox.offsetHeight/R+'px';

oBox.appendChild(oSpan);

//給每個span的背景圖片定位 平鋪后才能拼成一張完整的圖片

oSpan.style.backgroundPosition=-oSpan.offsetLeft+'px -'+oSpan.offsetTop+'px';

}

}

var aSpan=oBox.children;

//定義一個圖片的初始值

var iNow=0;

//定義開關

var bReady=true;

//點擊圖片時每個span爆炸

oBox.οnclick=function(){

//防止點擊過快時圖片會跳

if(bReady==false){return;}

bReady=false;

//每點擊一次加1

iNow++;

for(var i=0; i

//獲取每個span移動的距離

var x=aSpan[i].offsetLeft-oBox.offsetWidth/2;

var y=aSpan[i].offsetTop-oBox.offsetHeight/2;

//每個span移動并且隨機旋轉角度 并且放大

aSpan[i].style.WebkitTransform='perspective(800px) translate('+x+'px,'+y+'px) rotateX('+rnd(-180,180)+'deg) rotateY('+rnd(-180,180)+'deg) scale(1.4)';

aSpan[i].style.WebkitTransition='1s all ease';

aSpan[i].style.opacity=0;

}

};

//過渡完成后要執行的

aSpan[1].addEventListener('transitionend',function(){

for(var i=0; i

//瞬間把爆炸出去的圖片還原

aSpan[i].style.WebkitTransform='perspective(800px) translate(0px,0px) rotateX(0deg) rotateY(0deg) scale(1)';

aSpan[i].style.opacity=1;

//瞬間回來的過程不需要過渡時間 所以把它干掉

aSpan[i].style.WebkitTransition='none';

//換圖

aSpan[i].style.backgroundImage='url("img/'+iNow%3+'.jpg")';

oBox.style.backgroundImage='url("img/'+(iNow+1)%3+'.jpg")';

//過渡完成后允許點擊

bReady=true;

}

},false);

//隨機數函數

function rnd(n,m){

return parseInt(Math.random()*(m-n)+n);

}

},false);

總結

以上是生活随笔為你收集整理的html图片爆炸效果,利用CSS3制作3D图片爆炸效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。