<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="http://www.doinggroup.com/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
 <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?4be39166040e87e16a9e44db234cfd75";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>



	<style type="text/css">
		body{background: #f4f3f8; height: 1080px; overflow: hidden;}
		.cloud { background-image:url(../images/cloud.png); background-size: 100% 100%; position: absolute;}
		@-webkit-keyframes runRand{0% {left:-690px;-webkit-left:-690px;}
100%{left:100%;-webkit-left:100%;}}
 .moveR{animation:runRand 70s; animation-timing-function:linear;}
 .no {position: absolute; top: 50%; left: 50%;margin-left: -280px; margin-top: -183px;}
 .no p:nth-of-type(1) {margin-top: 57px; font-size: 24px; font-weight: bold;color: #000000;}
 .no p { text-align: center; display: block;color:#7a7b80;}
 .no span {display: block; width: 150px; height: 56px; margin: 0 auto; font-size: 22px; line-height: 56px; color:  #FFFFFF; border-radius: 28px; background: #005bac; text-align: center; }
 .no span a {text-decoration: none; color: #FFFFFF;}	
	</style>
	<body>
		<div class="cloud-row">
		</div>	
		<div class="no"><img src="http://www.doinggroup.com/img/404.png" alt="" />
			<p>页面没有找到</p>
			<p>非常抱歉，你要看的页面好像不存在了。请联系网站管理人员处理。</p>
			<span><a href="/">首页</a></span>
		</div>
	</body>
</html>
<script type="text/javascript">
	function randomNu(){ //随机生成云朵数量
		var row = $(".cloud-row");
		
		for (var i = 0; i<(Math.random()*10)+1; i++) {
			var cloud = "<div class='cloud move"+i+"'></div>";
			row.append(cloud);
		}
	}
	function randomSize(){ //随机生成云朵大小
		var cloud_dom = $(".cloud");
		for (var i=0; i<cloud_dom.length; i++) {
			var Mul = (Math.random())+0.2;
			var Cwidth = 690*Mul+"px";
			var Cheight = 357*Mul+"px";
			cloud_dom.eq(i).css({"width":Cwidth,"height":Cheight})
		}
	}
	function randomZ(){//随机生成z轴顺序
		var cloud_dom = $(".cloud");
		for (var i=0; i<cloud_dom.length; i++) {
			var Mul = Math.random()*10;
			cloud_dom.eq(i).css("z-index",Mul);
		}
	}
	
	function randomPo(){ //随机生成位置+动画执行
		var cloud_dom = $(".cloud");
		for (var i=0; i<cloud_dom.length; i++) {
			var Mul = Math.random()*90;
			var MulTime = (Math.random()*50)+45;
			var left = Mul+"%";
			console.log(MulTime);
			cloud_dom.eq(i).css("left","-690px");
			var dynamicValue = "33.3";
			var Ckeyframes = "@-webkit-keyframes run"+i+"{0% {left:"+left+";-webkit-left:"+left+";}\n"+
			      "100%{left:100%;-webkit-left:100%;}} .move"+i+"{animation:run"+i+" "+MulTime+"s; animation-timing-function:linear;}";
			
			var style = document.createElement('style');
			style.type = 'text/css';
			style.innerHTML = Ckeyframes;
			document.getElementsByTagName('head')[0].appendChild(style);
			
//			this.stylesheet = document.styleSheets[document.styleSheets.length-1];
			
		}
		for (var i=0; i<cloud_dom.length; i++) {
			var Mul = Math.random()*100;
			var top = Mul+"%";
			cloud_dom.eq(i).css("top",top);
		}
	}
	
	function createCloud(){ //随机左侧生成云朵
		var row = $(".cloud-row");
		var MulW = (Math.random())+0.2;
		var Cwidth = 690*MulW+"px";
		var Cheight = 357*MulW+"px";
		var Mul = Math.random()*100;
		var cloudR = "<div class='cloud moveR' style='top:"+Mul+"%;height:"+Cheight+"; width:"+Cwidth+"; left:-790px'></div>";
		var row = $(".cloud-row");
		row.append(cloudR);
	}
    
    setInterval(function(){//清楚无用dom
    	var cloud_dom = $(".cloud");
		 cloud_dom.eq(0).remove();
    },10000)
    
    


	randomNu();
	randomSize();
	randomZ();
	randomPo();
	setInterval("createCloud()",5000);
	
</script>