扑面而来的碎片图片3D炸裂效果初体验_html/css_WEB-ITnose

之前逛园子的时候看到 ChokCoco 的爆炸效果作品：【BOOM】一款有趣的Javascript动画效果 （大神英文有没有拼错呀←.←），觉得蛮有意思的，效果如下：

不过觉得这个爆炸效果还是偏软了一点，没有爆炸那种碎片飞溅的感觉，一直念念不忘想要自己做一个3D效果的爆炸动效。这两天在搞一些小动画，就顺便也把3D爆炸做了出来，动画效果：

实现

原理很简单，就是用很多小图片拼凑成大图片，然后让小图片按照一定规律运动形成爆炸效果。这里的爆炸效果用的是 CSS3 的 3D 变换来做的，通过 js 动态改变变换参数形成动画。实现步骤简单说说：

1、图片拼凑

这一步相对简单，用的是很多 div 标签的背景图拼凑的，设置好每个 div 标签的 position 和 background-position 就可以了。这里要注意的一点就是添加 div 标签是记得要用 innerHTML 一次性全部添加进去。虽然这里没有直接显示图片，但是这里还是 new 了一个 image，并将图片拼凑放在 load 事件中执行。效果和代码分别如下(实际效果没格子线的)：

var img = new Image();img.src = 'img/zoro.jpg';    //160*160，or you need to change wrapper's sizeimg.onload = function () {    var x = y = 0,    div = styleCtn = '',    imgWidth = this.width,    imgHeight = this.height,    pwidth = pheight = 10,    nx = Math.floor(imgWidth / pwidth),    //x方向粒子个数    ny = Math.floor(imgHeight / pheight),    //y方向粒子个数    wrap = document.getElementById('zd-wrap');                        for (var i = 0, num = nx * ny; i