图片爆炸特效

悠悠 2021-07-24 14:12 322阅读 0赞

思路:将图片设置成背景,然后分割成若干片,根据背景图的位移,来设置每一片  
的背景,使得最终能拼接成该图片,分割后设置动态随机位移、旋转和透明度,并转换成3d视图。  
定时器中重复调用别的函数会不断的开启子线程，不影响函数后代码的执行

代码示例:  
html

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			body{ 
    				background-color: #000;
    				overflow:hidden;
    			}
    			*{ 
    				margin:0;
    				padding: 0;
    			}
    			.box{ 
    				width: 640px;
    				height: 400px;
    				position: absolute;
    				left: 50%;
    				top: 50%;
    				margin-left: -320px;
    				margin-top:-200px;
    				border: solid 1px #000;
    
    			}
    			.box>div{ 
    				position: absolute;
    				left: 0;
    				top:0;
    				width:100%;
    				height: 100%;
    				transform-style: preserve-3d;
    			}
    			.box>div>div{ 
    				position: absolute;
    			}
    
    		</style>
    	</head>
    	<body>
    		
    		<div class='box'>
    
    		</div>
    
    		<script src='./tx.js'></script>
    
    	</body>
    </html>

js:

var imgs=['./img/lb1.jpg','./img/lb2.jpg','./img/lb4.jpg','./img/lb5.jpg'];
    
    //层级
    var z=999;
    //显示第几张图片
    var index=0;
    var box=document.querySelector(".box");
    
    boom(10,10);
    
    function boom(m,n){ 
    	//创建一个新的div
    	var parentNode=document.createElement('div');
    	//设置其层级
    	parentNode.style.zIndex=z;
    	z--;
    	box.appendChild(parentNode);
    
    	var x=m,y=n;
    
    	for(var i=0;i<y;i++)
    	{ 
    		for(var j=0;j<x;j++)
    		{ 
    			//创建按图片
    			var childDiv=document.createElement('div');
    			childDiv.style.background="url("+imgs[index]+")";
    			//设置分割多少个div,根据父元素分割
    			childDiv.style.width=box.clientWidth/x+'px';
    			childDiv.style.height=box.clientHeight/y+'px';
    			//设置每个div的位移,填满父元素
    			childDiv.style.left=(box.clientWidth/x)*j+'px';
    			childDiv.style.top=(box.clientHeight/y)*i+'px';
    			//设置背景图片移位
    			childDiv.style.backgroundPositionX=(box.clientWidth/x)*-j+'px';
    			childDiv.style.backgroundPositionY=(box.clientHeight/y)*-i+'px';
    			//设置随机动画时间
    			childDiv.style.transition=(Math.random()*1+0.5)+'s';
    			//添加进父元素
    			parentNode.appendChild(childDiv);
    			
    		}
    	}
    
    
    var allDiv=parentNode.children;
    
    //图片切换
    setTimeout(()=>{ 
    	index++;
    	if(index==4)
    	{ 
    		index=0;
    	}
    	// index=imgs.length && (index=0);
    	//当前图片进入
    	boom(m,n);
    
    	for(var i=0;i<allDiv.length;i++)
    	{ 
    		//爆炸特效
    		allDiv[i].style.transform='perspective(800px) rotateX('+(Math.random()*500-200)+"deg) rotateY("+(Math.random()*500-200)+"deg) translateX("+(Math.random()*500-200)+"px) translateY("+(Math.random()*500-200)+"px) translateZ("+(Math.random()*500-200)+"px)"
    		//爆炸后消失
    		allDiv[i].style.opacity=0;
    	}
    
    
    },2000)
    	
    	setTimeout(function(){ 
    		//移出所有子元素
    		parentNode.remove();
    	},3500)
    
    
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，322人围观）

还没有评论，来说两句吧...

相关阅读

相关烟花爆炸特效

![在这里插入图片描述][20200720135605212.gif] css代码请直接下载 [url][] html <div class="camera -x

心已赠人/ 2023年02月28日 05:27/ 0 赞/ 49 阅读

相关 css3实现瀑布流图片特效

htmL: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti

忘是亡心i/ 2022年11月03日 11:52/ 0 赞/ 183 阅读

相关 Jquery特效一:图片轮换显示

效果图及代码如下： ![0_12976521725fdX.gif][] <html xmlns="[http://www.w3.org/1999/xhtml][http

朴灿烈づ我的快乐病毒、/ 2022年10月01日 00:47/ 0 赞/ 128 阅读

相关 HTML5球体下落粒子爆炸js特效

[下载地址][Link 1] HTML5球体下落粒子爆炸特效是一款基于HTML5 Canvas实现的全屏白色球体自由落体爆炸粒子动画，彩色粒子爆炸动画特效。 ![03a9d

我就是我/ 2022年09月16日 06:13/ 0 赞/ 113 阅读

相关 203.CSS&JS爆炸粒子图像过渡特效

![98e20b9705a0caa610d2f3bd6b1c3e6b.gif][] 源码 index.html <!DOCTYPE html> <ht

痛定思痛。/ 2022年09月04日 14:54/ 0 赞/ 191 阅读

相关 197.3D图片拼接特效

效果 (源码网盘地址在最后) ![2c963b5c8ec5aa70eb02566f62b212f3.gif][] 源码 <!DOCTYPE html>

缺乏、安全感/ 2022年09月03日 12:20/ 0 赞/ 121 阅读

相关烟花爆炸

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><

深藏阁楼爱情的钟/ 2022年06月17日 06:24/ 0 赞/ 179 阅读

相关爆炸粒子

爆炸性的粒子见过没？来来让我来为你安利一组代码，带你领略你没有见过的BOOM: <!DOCTYPE html> <html > <head>

雨点打透心脏的1/2处/ 2022年05月24日 03:43/ 0 赞/ 150 阅读

相关图片特效处理之怀旧效果

图片特效处理系列将介绍图片的像素点的特效处理，这些物资注重的是原理。也就是说只要你知道这些算法不管是C++，VB，C\，JAVA都可以做出相同的特效。下面将介绍图片怀旧效果的算

秒速五厘米/ 2021年12月24日 08:41/ 0 赞/ 224 阅读

相关图片爆炸特效

思路:将图片设置成背景,然后分割成若干片,根据背景图的位移,来设置每一片的背景,使得最终能拼接成该图片,分割后设置动态随机位移、旋转和透明度,并转换成3d视图。定时

悠悠/ 2021年07月24日 14:12/ 0 赞/ 323 阅读