jQuery+CSS3实现404背景动画特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3实现404背景动画特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+CSS3实现404背景动画特效</title>
<link href="css/404.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	$(function() {
		var h = $(window).height();
		$('body').height(h);
		$('.mianBox').height(h);
		centerWindow(".tipInfo");
	});

	//2.将盒子方法放入这个方，方便法统一调用
	function centerWindow(a) {
		center(a);
		//自适应窗口
		$(window).bind('scroll resize',
				function() {
					center(a);
				});
	}

	//1.居中方法，传入需要剧中的标签
	function center(a) {
		var wWidth = $(window).width();
		var wHeight = $(window).height();
		var boxWidth = $(a).width();
		var boxHeight = $(a).height();
		var scrollTop = $(window).scrollTop();
		var scrollLeft = $(window).scrollLeft();
		var top = scrollTop + (wHeight - boxHeight) / 2;
		var left = scrollLeft + (wWidth - boxWidth) / 2;
		$(a).css({
			"top": top,
			"left": left
		});
	}
</script>
</head>
<body>
<div class="mianBox">
	<img src="images/yun0.png" alt="" class="yun yun0" />
	<img src="images/yun1.png" alt="" class="yun yun1" />
	<img src="images/yun2.png" alt="" class="yun yun2" />
	<img src="images/bird.png" alt="" class="bird" />
	<img src="images/san.png" alt="" class="san" />
	<div class="tipInfo">
		<div class="in">
			<div class="textThis">
				<h2>验证码错误</h2>
				<p><span>页面自动<a id="href" href="">跳转</a></span><span>等待<b id="wait">6</b>秒</span></p>
				<script type="text/javascript">                            (function() {
						var wait = document.getElementById('wait'), href = document.getElementById('href').href;
						var interval = setInterval(function() {
							var time = --wait.innerHTML;
							if (time <= 0) {
								location.href = href;
								clearInterval(interval);
							}
							;
						}, 1000);
					})();
				</script>
			</div>
		</div>
	</div>
</div>
</body>
</html>

CSS代码(404.css):

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#d2f5f1}
.mianBox{width:100%;margin:0 auto;position:relative;overflow:hidden;}
.mianBox >img{position:absolute}
.yun0{right:-140px;top:30px;webkit-animation:cloudLarge 105s infinite;-moz-animation:cloudLarge 105s infinite;-o-animation:cloudLarge 105s infinite;animation:cloudLarge 105s infinite;}
.yun1{left:5%;top:48%;-webkit-animation:cloudSmall 105s infinite;-moz-animation:cloudSmall 105s infinite;-o-animation:cloudSmall 105s infinite;animation:cloudSmall 105s infinite;}
.yun2{left:16%;top:35%;-webkit-animation:cloudMedium 105s infinite;-moz-animation:cloudMedium 105s infinite;-o-animation:cloudMedium 105s infinite;animation:cloudMedium 105s infinite;}
.san{left:10%;top:20%;-webkit-animation:dn400 3s 0s ease both;-moz-animation:dn400 3s 0s ease both;animation:dn400 3s 0s ease both;}
.bird{left:27%;top:15%;-webkit-animation:flying 3s infinite;-moz-animation:flying 3s infinite;-o-animation:flying 3s infinite;animation:flying 3s infinite;}
.disk{left:234px;top:98px;z-index:9;-webkit-animation:flying 2s infinite;-moz-animation:flying 2s infinite;-o-animation:flying 2s infinite;animation:flying 2s infinite;}
.light{left:330px;top:188px;z-index:8;-webkit-animation:light 1s infinite;-moz-animation:light 1s infinite;-o-animation:light 1s infinite;animation:light 1s infinite;}
.man{left:400px;top:310px;z-index:7;-webkit-animation:hide 2s 0.5s infinite;-moz-animation:hide 2s 0.5s infinite;-o-animation:hide 2s 0.5s infinite;animation:hide 2s 0.5s infinite;}
.picv{left:15%;top:390px;}
.tipInfo{position:absolute;z-index:99;margin-left:150px;border:4px solid #c0ece7;border-color:rgba(192,237,232,07);border-radius:5px;derbackground:#c0ece7;background:rgba(192,237,232,07);width:360px}
.tipInfo .in{background:#fff;padding:0 10%}
.tipInfo .in h2{line-height:50px;font-size:30px;color:#e94c3c;border-bottom:1px dashed #aacdd5;padding:18px 0}
.tipInfo .in p{padding:30px 0 50px 0;text-align:center;color:#289575}
.tipInfo .in p span{margin:0 20px}
.tipInfo .in p span a{color:#e94c3c;margin:0 10px}
.tipInfo .in .desc{overflow:hidden;font-size:14px;color:#2b2b2b;padding:0 10%}
.tipInfo .in .desc h3{font-weight:normal;padding:20px 0 5px 0}
.tipInfo .in .desc li{background:url("../images/404/dot.png") no-repeat left center;margin-left:5px;padding:5px 0;padding-left:8px;*padding-left:20px;}
@-webkit-keyframes cloudLarge{0%{right:-140px;}
100%{right:118%;}
}
@-moz-keyframes cloudLarge{0%{right:-140px;}
100%{right:118%;}
}
@-o-keyframes cloudLarge{0%{right:-140px;}
100%{right:118%;}
}
@keyframes cloudLarge{0%{right:-140px;}
100%{right:118%;}
}
@-webkit-keyframes cloudSmall{0%{left:5%;}
100%{left:108%;}
}
@-moz-keyframes cloudSmall{0%{left:5%;}
100%{left:105%;}
}
@-o-keyframes cloudSmall{0%{left:5%;}
100%{left:105%;}
}
@keyframes cloudSmall{0%{left:5%;}
100%{left:105%;}
}
@-webkit-keyframes cloudMedium{0%{left:16%;}
100%{left:-18%;}
}
@-moz-keyframes cloudMedium{0%{left:16%;}
100%{left:-18%;}
}
@-o-keyframes cloudMedium{0%{left:16%;}
100%{left:-18%;}
}
@keyframes cloudMedium{0%{left:16%;}
100%{left:-18%;}
}
@-webkit-keyframes light{0%{opacity:0;}
100%{opacity:100;}
}
@-moz-keyframes light{0%{opacity:0;}
100%{opacity:100;}
}
@-o-keyframes light{0%{opacity:0;}
100%{opacity:100;}
}
@keyframes light{0%{opacity:0;}
100%{opacity:100;}
}
@-webkit-keyframes hide{0%{opacity:100;}
100%{opacity:0;}
}
@-moz-keyframes hide{0%{opacity:100;}
100%{opacity:0;}
}
@-o-keyframes hide{0%{opacity:100;}
100%{opacity:0;}
}
@keyframes hide{0%{opacity:100;}
100%{opacity:0;}
}
@keyframes flying{0%{margin-top:0px;}
50%{margin-top:6px;}
100%{margin-top:0px;}
}
@-webkit-keyframes flying{0%{margin-top:0px;}
50%{margin-top:6px;}
100%{margin-top:0px;}
}
@-moz-keyframes flying{0%{margin-top:0px;}
50%{margin-top:6px;}
100%{margin-top:0px;}
}
@-o-keyframes flying{0%{margin-top:0px;}
50%{margin-top:6px;}
100%{margin-top:0px;}
}
@keyframes flying{0%{margin-top:0px;}
50%{margin-top:6px;}
100%{margin-top:0px;}
}
@-webkit-keyframes flying{0%{margin-top:0px;}
50%{margin-top:6px;}
100%{margin-top:0px;}
}
@-moz-keyframes flying{0%{margin-top:0px;}
50%{margin-top:6px;}
100%{margin-top:0px;}
}
@-o-keyframes flying{0%{margin-top:0px;}
50%{margin-top:6px;}
100%{margin-top:0px;}
}
@-webkit-keyframes down900{0%{opacity:0;-webkit-transform:translate(0,0);}
100%{opacity:1;-webkit-transform:translate(900,900);}
}
@-moz-keyframes down900{0%{opacity:0;-moz-transform:translate(0,0);}
100%{opacity:1;-moz-transform:translate(900,900);}
}
@-o-keyframes down900{0%{opacity:0;-o-transform:translate(0,0);}
100%{opacity:1;-o-transform:translate(900,900);}
}
@keyframes down900{0%{opacity:0;transform:translate(0,0);}
100%{opacity:1;transform:translate(900,900);}
}
@-webkit-keyframes dn400{0%{opacity:0;-webkit-transform:translateY(-400px);}
100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes dn400{0%{opacity:0;-moz-transform:translateY(-400px);}
100%{opacity:1;-moz-transform:translateY(0);}
}
@-o-keyframes dn400{0%{opacity:0;-o-transform:translateY(-400px);}
100%{opacity:1;-o-transform:translateY(0);}
}
@keyframes dn400{0%{opacity:0;transform:translateY(-400px);}
100%{opacity:1;transform:translateY(0);}
}

附件:下载该文件资源,减少时间成本(增值服务)