利用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);