欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-06-13 11:23:21
...
之前逛园子的时候看到 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