利用CSS3制作3D图片爆炸效果
2016-12-03 本文已影响0人
相思雨gg
利用css3 transform和transition样式制作点击图片时 图片爆炸开并切换到下一张图片依次循环
首先先看一下效果图
Paste_Image.png
先描述一下大概思路：
布局时外面有一个大的父盒子（box）里面包含多个span（span都是js动态创建的）创建出来的span平铺到box上（定位）， 多个span拼成一张图片，box是另一张图片 点击box时每个span爆炸开（移动 ，旋转并且 变大消失）这时会看到box的图片，当每个span过渡完成之后再瞬间恢复到原来的位置且图片换成与box相同的图片，这样就可以循环点击了，下面看一下具体的实现代码，代码里面每一步都有详细的解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
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);
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
var oBox=document.getElementById('box');
//定义列
var C=7;
//定义列
var R=4;
//动态创建span 并且平铺
for(var i=0; i<R; i++){
for(var j=0; j<C; 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.onclick=function(){
//防止点击过快时图片会跳
if(bReady==false){return;}
bReady=false;
//每点击一次加1
iNow++;
for(var i=0; i<aSpan.length; 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.length; 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);
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
