jQuery+CSS3游戏404动画特效

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

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

以下是 jQuery+CSS3游戏404动画特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery+CSS3游戏404动画特效</title>
<link type="text/css" rel="stylesheet" href="css/base.css" media="all">
<link type="text/css" rel="stylesheet" href="css/index_c211cbd.css">
<style type="text/css">
.adbase-ctn { background: url(images/loading.png) center center no-repeat; }
</style>
<style type="text/css">
#NIE-copyRight a { text-decoration: none; }
#NIE-copyRight a:hover { text-decoration: underline; }
</style>
<style type="text/css">
#NIE-topBar .hide, #NIE-topBar-include .hide { display: none!important }
.NIE-topBar-logo, .NIE-topBar-arrIcon i, #NIE-topBar-menu span, .NIE-topBar-hot, .NIE-topBar-1st, .NIE-topBar-new, .NIE-topBar-btn { background: url(images/sprite-w_7fc7459.png) no-repeat }
.NIE-topBar-arrIcon { position: relative; top: 4px; width: 16px; height: 16px; display: inline-block; background-color: #fff; overflow: hidden }
.NIE-topBar-arrIcon i { width: 9px; height: 4px; float: left; margin: 6px 0 0 4px; background-position: -103px -101px; display: inline-block; -webkit-transition: all .2s ease 0s; transition: all .2s ease 0s }
#NIE-topBar, #NIE-topBar-include { position: relative; z-index: 9999; min-width: 1000px; height: 40px; background: #333; line-height: 24px; font-family: "Microsoft YaHei", simSun, "Lucida Grande", "Lucida Sans Unicode", Arial }
#NIE-topBar *, #NIE-topBar-include * { font-size: 12px; font-style: normal }
#NIE-topBar a, #NIE-topBar-include a { color: #999; text-decoration: none }
#NIE-topBar a:hover, #NIE-topBar-include a:hover { color: #fff }
#NIE-topBar ul, #NIE-topBar li, #NIE-topBar-include ul, #NIE-topBar-include li { margin: 0; padding: 0; float: left }
.NIE-topBar-main { position: relative; z-index: 9999; width: 1000px; margin: auto }
.NIE-topBar-logo { width: 133px; height: 44px; display: block; float: left; margin-top: 6px; background: url(images/logo_b5525b7.png) no-repeat }
#NIE-topBar-news { position: absolute; z-index: 13; width: 420px; height: 54px; left: 125px; padding-left: 18px; padding-top: 0; overflow: hidden; display: block }
#NIE-topBar-news.NIE-topBar-news-hover { height: 250px; overflow: visible; border-color: #1f1f1f }
#NIE-topBar-news a { width: 960px; display: block; height: 0; overflow: hidden; z-index: 1; -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2); -o-box-shadow: 0 2px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 4px rgba(0,0,0,.2); box-shadow: 0 2px 4px rgba(0,0,0,.2) }
#NIE-topBar-news-close { position: absolute; top: 63px; right: -380px; display: block; width: 32px; height: 32px; overflow: hidden; background: url(images/sprite-w_7fc7459.png) no-repeat -9999px -9999px; text-indent: -9999px; z-index: 2 }
#NIE-topBar-news.NIE-topBar-news-hover .NIE-topBar-abc-s { visibility: hidden }
#NIE-topBar-news.NIE-topBar-news-hover a { position: absolute; z-index: 2; left: -132px; top: 55px; height: auto }
#NIE-topBar-news.NIE-topBar-news-hover a img { display: block }
.NIE-topBar-mid { position: absolute; z-index: 2; right: 230px; width: 385px; text-align: right }
#NIE-topBar .NIE-topBar-mid a, #NIE-topBar-include .NIE-topBar-mid a { line-height: 40px; padding: 0 12px; color: #fff; display: inline-block }
#NIE-topBar .NIE-topBar-mid a:hover, #NIE-topBar-include .NIE-topBar-mid a:hover { color: #ca0b0b }
#NIE-topBar-menu { position: absolute; z-index: 1; top: 0; right: 0; color: #999; width: 1000px; height: 40px; overflow: hidden; -webkit-transition: height .3s ease 0s; -o-transition: height .3s ease 0s; -moz-transition: height .3s ease 0s; transition: height .3s ease 0s }
#NIE-topBar-menu span { position: absolute; width: 108px; padding: 8px 0 12px; height: 20px; line-height: 14px; right: 106px; background-position: 0 -28px; background-repeat: repeat-x; padding-left: 15px; color: #fff; display: inline-block; overflow: hidden }
#NIE-topBar-menu .NIE-table { position: absolute; top: 40px; left: 0; background: #262626; border-collapse: collapse; overflow: hidden; width: 100% }
#NIE-topBar-menu .NIE-table a { width: 105px; margin-left: 6px; line-height: 24px; display: inline-block }
#NIE-topBar-menu .NIE-table a.long { width: 125px }
#NIE-topBar-menu .NIE-table ul { list-style: none }
#NIE-topBar-menu .NIE-table .NIE-nav { width: 100%; position: relative }
#NIE-topBar-menu .NIE-table .NIE-nav li { width: 110px; float: left; border-right: 1px solid #eee; vertical-align: top }
#NIE-topBar-menu .NIE-table .NIE-nav .mobi { position: absolute; left: 248px; -webkit-transition: all .3s ease-out }
#NIE-topBar-menu .NIE-table b { line-height: 39px; color: #bc2e2e; display: block; width: 100%; height: 39px; font-size: 14px; text-indent: 20px; background: #f7f7f8; overflow: hidden; clear: both }
#NIE-topBar-menu b i { margin-left: 5px; padding: 2px 4px; color: #9b9b9b; font-style: normal; background: #111; display: inline }
#NIE-topBar-menu .NIE-list { float: left; overflow: hidden; width: 100%; height: 410px }
.w1680 #NIE-topBar-menu .NIE-list { height: 450px }
#NIE-topBar-menu .NIE-list li { border-right: 1px solid #eee; height: 392px; float: left; padding: 10px 0 0 14px; overflow: hidden }
#NIE-topBar-menu .NIE-list .news { position: absolute; background: #fdfefe; left: 421px; -webkit-transition: all .3s ease-out; top: 39px }
#NIE-topBar-menu .NIE-list .hot { position: absolute; background: #fdfefe; left: 263px; -webkit-transition: all .3s ease-out; top: 39px }
#NIE-topBar-menu .NIE-list .hot a { width: 125px }
.w1680 #NIE-topBar-menu .NIE-list .news div div { margin-right: 8px }
#NIE-topBar-menu .NIE-list .news .long-news { width: 133px; float: left }
#NIE-topBar-menu .NIE-list .news .long-news a { width: 125px }
#NIE-topBar-menu .NIE-list .news .short-news { float: left; width: 106px }
#NIE-topBar-menu .NIE-list .news .mini-news { width: 90px; margin-right: 0; float: left }
#NIE-topBar-menu .NIE-list .news .mini-news a { width: 82px }
#NIE-topBar-menu .moreAni .NIE-list .news { left: 189px; width: 651px!important; -webkit-transition: all .3s ease-out }
#NIE-topBar-menu .moreAni .NIE-list .hot { left: 30px; border-left: 1px solid #eee; box-shadow: -1px 0 1px #eee; -webkit-transition: all .3s ease-out }
#NIE-topBar-menu .moreAni .NIE-nav .mobi { left: 30px; width: 823px!important; border-left: 1px solid #eee; box-shadow: -1px 0 1px #eee; -webkit-transition: all .3s ease-out }
#NIE-topBar-menu .NIE-list .NIE-topBar-more { width: 20px; height: 95px; height: 92px\9; display: block; position: absolute; right: 0; top: 124px; font-size: 12px; color: #fff; background: #bc2e2e; padding-left: 10px; line-height: 14px; padding-top: 7px; border-top-left-radius: 2px; border-bottom-left-radius: 2px }
#NIE-topBar-menu .NIE-list .NIE-topBar-more:hover { opacity: .8 }
#NIE-topBar-menu .moreAni .NIE-topBar-more { width: 21px; height: 23px; border-radius: 2px; right: 9px; top: 163px; padding-left: 4px; padding-top: 2px; height: 20px; height: 18px\9 }
.w1680 #NIE-topBar-menu .NIE-list .NIE-topBar-more { display: none }
#NIE-topBar-menu .NIE-table a em { font-weight: 400; display: block; line-height: 24px }
.NIE-topBar-1st { background-position: right -267px }
.NIE-topBar-hot { background-position: right -144px }
.NIE-topBar-new { background-position: right -206px }
#NIE-topBar-menu.NIE-topBar-menu-hover .NIE-table { display: block }
#NIE-topBar-menu.NIE-topBar-menu-hover { height: 505px; opacity: .9; -webkit-transition: height .4s ease 0s; -o-transition: height .4s ease 0s; -moz-transition: height .4s ease 0s; transition: height .4s ease 0s }
a.NIE-topBar-btn { width: 105px!important; height: 18px; line-height: 18px!important; margin: 5px 0; display: inline-block; padding-left: 0!important; background-position: 0 -338px; text-indent: 25px; color: #bc3030!important }
a.NIE-topBar-btn:hover { }
.NIE-topBar-ad { height: 40px; left: 50% }
.NIE-topBar-main.w1680 { width: 1260px }
.NIE-topBar-main.w1680 #NIE-topBar-menu { width: 1260px }
#NIE-topBar-news { height: 54px }
#NIE-topBar .NIE-topBar-menu-hover, #NIE-topBar-include .NIE-topBar-menu-hover { z-index: 8 }
.NIE-topBar-ad-big { position: absolute; top: 0; left: 0; z-index: 10; height: 0; overflow: hidden; text-align: center }
#NIE-topBar-menu { z-index: 7; height: 55px }
.NIE-topBar-mid { z-index: 12; width: 250px; right: 230px; width: 536px }
.NIE-topBar-logo { position: relative; z-index: 13!important }
#NIE-topBar, #NIE-topBar-include { height: 55px; background: #fbfbfb }
.NIE-topBar-logo { margin-top: 5px }
#NIE-topBar-menu .NIE-table { top: 55px; background: #fdfefe; border-top: 1px solid #ececec; margin: 0 }
#NIE-topBar-menu span { background: 0 0; color: #bc2e2e }
#NIE-topBar-menu .NIE-table { display: none }
#NIE-topBar-menu .NIE-table .last_td, #NIE-topBar-menu .NIE-table .last_th { border-right: 0 }
#NIE-topBar a, #NIE-topBar-include a { color: #626262 }
#NIE-topBar-menu b i { background-color: #fbfbfb; color: #bc2e2e }
#NIE-topBar-menu p { padding: 0; margin: 0; margin-left: 6px; line-height: 24px; margin-bottom: 4px; font-weight: 700; color: #626262 }
#NIE-topBar a:hover, #NIE-topBar-include a:hover { color: #bc2e2e }
#NIE-topBar-menu.NIE-topBar-menu-hover { opacity: .95 }
#NIE-topBar-menu .NIE-table * { font-size: 12px }
#NIE-topBar-menu.NIE-topBar-menu-hover span { border-bottom: 3px solid #bc2e2e; background-color: #F3F3F3; background-image: -webkit-linear-gradient(top, #F3F3F3 0, #FEFEFE 52px); background-image: linear-gradient(top, #F3F3F3 0, #FEFEFE 52px) }
#NIE-topBar-menu span { height: 25px; height: 26px\0; width: 108px; padding-top: 15px; padding-top: 14px\0; transition: background ease-in-out .33s; z-index: 20 }
#NIE-topBar .NIE-topBar-mid a, #NIE-topBar-include .NIE-topBar-mid a { color: #333; line-height: 52px; transition: background ease-in-out .33s; *line-height:55px
}
#NIE-topBar .NIE-topBar-mid a:hover, #NIE-topBar-include .NIE-topBar-mid a:hover { color: #bc2e2e!important; border-bottom: 3px solid #bc2e2e; background-color: #F3F3F3; background-image: -webkit-linear-gradient(top, #F3F3F3 0, #FEFEFE 52px); background-image: linear-gradient(top, #F3F3F3 0, #FEFEFE 52px); *border-bottom:0
}
.NIE-topBar-right { position: absolute; right: 0; top: 0; display: block; width: 100px; height: 55px; overflow: hidden; z-index: 9 }
.NIE-topBar-right a { color: #333!important; width: 100%; text-align: center; display: inline-block; float: left; line-height: 52px; transition: background ease-in-out .33s; -webkit-transition: background ease-in-out .33s }
.NIE-topBar-right a:hover { color: #bc2e2e!important; border-bottom: 3px solid #bc2e2e; background-color: #F3F3F3; background-image: -webkit-linear-gradient(top, #F3F3F3 0, #FEFEFE 52px); background-image: linear-gradient(top, #F3F3F3 0, #FEFEFE 52px); *border-bottom:0
}
.NIE-topBar-right a.fadeUp { opacity: 0; -webkit-transform: translate3d(0, -70%, 0); -webkit-transition: all ease-in-out .5s; transform: translate3d(0, -70%, 0); transition: all ease-in-out .5s }
.NIE-topBar-right a.none { opacity: 0; -webkit-transform: translate3d(0, 70%, 0); transform: translate3d(0, 70%, 0) }
.NIE-topBar-right a.fadeUp2 { opacity: 1; -webkit-transform: translate3d(0, 0, 0); -webkit-transition: all ease-in-out .5s; transform: translate3d(0, 0, 0); transition: all ease-in-out .5s }
</style>
</head>

<body>

<!--SEO start-->

<h1 class="hidden"></h1>
<h2 class="hidden"></h2>

<!--SEO end--> 
<div id="wrap">
  <div class="content">
    <div class="top">
      <div class="sign">未找到您访问的页面，<br>
        但我们找到了 <span class="fontRed">您儿时热爱的画面。</span> </div>
      <a class="index-btn" href="#"></a> </div>
    <div class="top_phone"></div>
    <div class="game">
      <div class="ready twinkling" style="display: none;"></div>
      <div class="yellow-wrap yellowMoving">
        <div class="yellow yellowRotate">
          <div class="openClose"></div>
        </div>
      </div>
      <div class="red-wrap redMoving">
        <div class="red bigSmall">
          <div class="eye1 eyeMove"></div>
          <div class="eye2 eyeMove"></div>
        </div>
      </div>
      <div class="oranger">
        <div class="eye3 eyeMove"></div>
        <div class="eye4 eyeMove"></div>
      </div>
      <div class="purple">
        <div class="eye5 eyeMove"></div>
        <div class="eye6 eyeMove"></div>
      </div>
      <div class="blue">
        <div class="eye7 eyeMove"></div>
        <div class="eye8 eyeMove"></div>
      </div>
      <span class="span1"></span> <span class="span2"></span> <span class="span3"></span> <span class="span4"></span> <span class="span5"></span> <span class="span6"></span> <span class="span7"></span> <span class="span8"></span> <span class="span9"></span> <span class="span10"></span> <span class="span11"></span> <span class="span12"></span> <span class="span13"></span> </div>
  </div>
  <a href="#" class="btn-phone"></a> 
</div>
<script charset="gb2312" src="js/jquery(mixNIE).last.js"></script> 
<script type="text/javascript" charset="gb2312" src="js/script_5b27ce6.js"></script> 
</body>
</html>

JS代码(script_5b27ce6.js):

function moving(){
	var e=$(".yellow-wrap"),o=$(".red-wrap"),s=$(".yellow"),a=$(".openClose"),i=($(".red"),$(".game span"));
	setTimeout(function(){
	$(".ready").hide(),e.addClass("yellowMoving"),s.addClass("yellowRotate"),o.addClass("redMoving"),i.each(function(e){
	$(this).addClass("span"+(e+1))}
),setTimeout(function(){
	a.addClass("toBig"),setTimeout(function(){
	a.removeClass("toBig"),o.hide()}
,200),setTimeout(function(){
	e.removeClass("yellowMoving"),s.removeClass("yellowRotate"),o.removeClass("redMoving"),o.show(),i.each(function(e){
	$(this).removeClass("span"+(e+1))}
),$(".ready").show(),moving()}
,1e3)}
,28800)}
,3e3)}
nie.config.copyRight.setGray(),moving();

CSS代码(base.css):

@charset "utf-8";/*描述:*/
/* =s Reset (by YUI 3) */
*{font-family:"Microsoft YaHei"}
html{color:#000;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
/* =e Reset */
/* =s base */
html,body{height:100%;background:#fff;}
body{font-family:"Microsoft YaHei",simSun,"Lucida Grande","Lucida Sans Unicode",Arial;line-height:170%;font-size:12px;color:#000;}
i{font-style:normal;}
a{color:#000;}
a:hover{color:#F60;}
a.under:link,a.under:active,a.under:visited,a.under:hover{text-decoration:underline;}
/* 浮动 [flt加方向首个字母] */
.fltL{float:left;}
.fltR{float:right;}
.fltN{float:none;}
.setCenter{margin:0 auto;}
/* 显示 */
.show{display:block;}
.hide{display:none;}
/* 间隔距离 [space加高度px] */
.space5,.space10,.space15,.space20,.space25,.space30{display:block;clear:both;overflow:hidden;}
.space5{height:5px;}
.space10{height:10px;}
.space15{height:15px;}
.space20{height:20px;}
.space25{height:25px;}
.space30{height:30px;}
/* clear [clr加值首个字母] */
.clrB{clear:both;}
.clrL{clear:left;}
.clrR{clear:right;}
.clrN{clear:none;}
/* =e base */
/* =s Font */
/* 字体重量 [首字母]*/
.b{font-weight:bold;}
.n{font-weight:normal;}
/* 字大小 [f加字像素值] */
.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
/* 字体位置 [txt加方位首个字母] */
.txtC{text-align:center;}
.txtL{text-align:left;}
.txtR{text-align:right;}
/* 垂直位置 [vera加方位首个字母] */
.veraM{vertical-align:middle;}
.veraT{vertical-align:top;}
.veraB{vertical-align:bottom;}
/* 行距 [l加行距像素值] */
.l16{line-height:16px;}
.l18{line-height:18px;}
.l20{line-height:20px;}
.l22{line-height:22px;}
.l24{line-height:24px;}
.l25{line-height:25px;}
/* 字缩进 [ti加缩进字数] */
.ti0{text-indent:0;}
.ti2{text-indent:2em;}
/* 字颜色 [color加颜色英文] */
.colorWhite{color:#fff;}
.colorBlack{color:#000;}
.colorRed{color:red;}
.colorBlue{color:blue;}
.colorOrange{color:#F30;}
.colorBrown{color:brown;}
.colorGreen{color:green;}
.colorGray{color:gray;}
.colorYellow{color:#FC0;}
/* 链接 [link加颜色英文] */
a.linkWhite:link,a.linkWhite:active,a.linkWhite:visited{color:#fff;}
a.linkWhite:hover{}
a.linkBlack:link,a.linkBlack:active,a.linkBlack:visited{color:#000;}
a.linkBlack:hover{}
a.linkRed:link,a.linkRed:active,a.linkRed:visited{color:red;}
a.linkRed:hover{}
a.linkBlue:link,a.linkBlue:active,a.linkBlue:visited{color:blue;}
a.linkBlue:hover{}
a.linkOrange:link,a.linkOrange:active,a.linkOrange:visited{color:#F30;}
a.linkOrange:hover{}
/* =e Font */
/* =s layout */
/* 顶部导航 */
#NIE-topBar{height:55px;background-color:#fff;}
/* 外套 */
#wrap{position:relative;width:100%;max-width:1920px;min-width:1000px;_width:expression((document.documentElement.clientWidth>1920||document.body.clientWidth>1920)?"1920px":((document.documentElement.clientWidth<1000||document.body.clientWidth<1000)?"1000px":"100%"));height:auto;overflow:hidden;margin:0 auto;}
/* 外套背景图 */
#wrap-bg1,#wrap-bg2,#wrap-bg3{width:100%;float:left;}
#wrap-bg1{}
#wrap-bg2{}
#wrap-bg3{}
/* 主体 */
#main{position:relative;width:960px;margin:0 auto;}
/* 页眉 */
#header{}
/* 中心 */
#center{}
/* 页脚 */
#footer{text-align:center;clear:both;}
#footer,#footer a{color:#000;text-decoration:none;}
#footer a:hover{text-decoration:underline;}
/* nie 底部版权(共3行）*/
#NIE-copyRight{text-align:center;}
#NIE-copyRight a{text-decoration:none;}
#NIE-copyRight .l1{padding-bottom:10px;}
#NIE-copyRight .l2{}
#NIE-copyRight .l3{}
/* 底部代码（隐藏） */
#botCode{display:none;}
/* =e layout */
.fooot{background:#000000;text-align:center;padding-top:50px;height:100px;}
.fooot a{text-decoration:none;color:#fff}

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