利用CSS3制作3D图片爆炸效果

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 157,757评论 24 688
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,118评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,036评论 0 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 121,200评论 16 134
  • 最近热播了一部剧《我的前半生》里很清楚的告诉了我们一个道理,女人一定要自强自立,因为可能曾经说了会照顾你一辈子的...
    陌游常乐阅读 81评论 0 0