HTML图片溶解特效

最新推荐文章于 2022-08-05 13:36:25 发布

JackieDYH

最新推荐文章于 2022-08-05 13:36:25 发布

阅读量2k

点赞数 4

分类专栏：教程笔记文章标签： HTML图片溶解特效

本文链接：https://blog.csdn.net/JackieDYH/article/details/102581587

版权

教程笔记专栏收录该内容

59 篇文章 19 订阅

订阅专栏


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background: #000000;
			height: 100%;
		}
		#box{
			width: 640px;
			height: 320px;
			margin: 100px auto;
			border: 1px solid red;
			position: relative;
		}
		#box div{
			position: absolute;
			width: 80px;
			height: 40px;
			transition: all 2s ;
		}
	</style>
	
	<body>
		<div id="box">
			
		</div>
		<script type="text/javascript">
			var num=1;
			box.onclick=function(){
				if(num==1){
				for(var i=0;i<8;i++){
					for(var k=0;k<8;k++){
						var  oDiv=document.createElement("div");
						oDiv.style.cssText="left:"+k*80+"px;top:"+i*40+"px;background: url(img1.jpg)"+k*-80+"px "+i*-40+"px";
						box.append(oDiv)
					}
				}num=2;
				}else if(num==2){
				var oDiv=box.getElementsByTagName("div");
				for(var i=0;i<oDiv.length;i++){
					var a=Math.random();//返回一个0~1之间的随机数
					if(a<0.25){
						oDiv[i].style.cssText +="transform: scale(0);border-radius:50% ;top:"+((Math.random()*650)-350)+"px;left:"+((Math.random()*1230)-450)+"px;"
					}else if(a<0.5){
						oDiv[i].style.cssText +="transform: scale(0);border-radius:50% ;transition: all 2s 0.5s;top:"+((Math.random()*650)-300)+"px;left:"+((Math.random()*1230)-400)+"px;"
					}else if(a<0.75){
						oDiv[i].style.cssText +="transform: scale(0);border-radius:50% ;transition: all 2s 1s;top:"+((Math.random()*650)-250)+"px;left:"+((Math.random()*1230)-300)+"px;"
					}else{
						oDiv[i].style.cssText +="transform: scale(0);border-radius:50% ;transition: all 2s 1.5s;top:"+((Math.random()*650)-200)+"px;left:"+((Math.random()*1230)-250)+"px;"
					}
				}

				num=3;
				}else{
					var oDiv=box.getElementsByTagName("div");
					var num1=0;
					for(var i=0;i<8;i++){
						for(var k=0;k<8;k++){
						oDiv[num1].style.cssText="left:"+k*80+"px;top:"+i*40+"px;background: url(img1.jpg)"+k*-80+"px "+i*-40+"px";
					num1++;
						}
					}
					num=2;
				}
			}
			
//background-Position:X Y;
//			图片整合减少页面图片请求次数
//			window.onload=function(){
//				
//			}
//将图片拆分为多个小格子,每一个小格子内放置图片对应区域.通过使用两层for循环嵌套,第一层指定行数,第二层指定列数.为每一个小格子添加定位,放置到对应区域。添加背景图片.然后通过点击使图片有批次的随机消失.
	
	</script>
	</body>
</html>