利用css3 transform和transition樣式制作點(diǎn)擊圖片時(shí) 圖片爆炸開并切換到下一張圖片依次循環(huán)

首先先看一下效果圖

Paste_Image.png

先描述一下大概思路：

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

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;

//動(dòng)態(tài)創(chuàng)建span 并且平鋪

for(var i=0; i

for(var j=0; j

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

//設(shè)置每個(gè)span的寬高

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

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

//給每個(gè)span定位

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

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

oBox.appendChild(oSpan);

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

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

}

}

var aSpan=oBox.children;

//定義一個(gè)圖片的初始值

var iNow=0;

//定義開關(guān)

var bReady=true;

//點(diǎn)擊圖片時(shí)每個(gè)span爆炸

oBox.οnclick=function(){

//防止點(diǎn)擊過快時(shí)圖片會(huì)跳

if(bReady==false){return;}

bReady=false;

//每點(diǎn)擊一次加1

iNow++;

for(var i=0; i

//獲取每個(gè)span移動(dòng)的距離

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

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

//每個(gè)span移動(dòng)并且隨機(jī)旋轉(zhuǎn)角度 并且放大

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;

}

};

//過渡完成后要執(zhí)行的

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;

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

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

//換圖

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

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

//過渡完成后允許點(diǎn)擊

bReady=true;

}

},false);

//隨機(jī)數(shù)函數(shù)

function rnd(n,m){

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

}

},false);

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。