QQ会员注册完整代码

其他 2018-07-29 20:15:47 阅读次数: 0
  <!doctype html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>QQ会员</title>
  <link href="css/animate.css" rel="stylesheet"/>
  <link href="css/style.css" rel="stylesheet"/>
  <script src="js/index.js"></script>
  </head>
  <body>
  <div class="wrap">
  <!--头部-->
  <header class="nav-header">
  <div class="head-contain">
  <a href="" class="top-logo"><img src="img/logo.png" width="145" height="90"/></a>
  <nav class="top-nav">
  <ul>
  <li><a href="">功能特权</a></li>
  <li><a href="">游戏特权</a></li>
  <li><a href="">生活特权</a></li>
  <li><a href="">会员活动</a></li>
  <li><a href="">成长体系</a></li>
  <li><a href="">年费专区</a></li>
  <li><a href="">超级会员</a></li>
  </ul>
  </nav>
  <div class="top-right">
  <a href="" class="login">登录</a>
  <a href="" class="open-vip">开通超级会员</a>
  </div>
  </div>
  </header>
  <section class="index-wrap" id="slide">
  <!--第一屏-->
  <section class="sec1 current">
  <h3 class="sec1-title">不做大多数</h3>
  <p class="sec1-info">QQ会员让我在二次元世界更加肆意挥洒个性</p>
  <p class="sec1-vip">
  <a href="">开通会员</a>
  <a href="" class="super-vip">开通超级会员</a>
  </p>
  <div class="figure-1"></div>
  </section>
  <!--第二屏-->
  <section class="sec2">
  <a href="" class="screen-area sec2-area">
  <span class="icon icon-feature"></span>
  </a>
  <div class="figure-2"></div>
  <div class="figure-list">
  <a href="" class="icon-1"></a>
  <a href="" class="icon-2"></a>
  <a href="" class="icon-3"></a>
  <a href="" class="icon-4"></a>
  <a href="" class="icon-5"></a>
  <a href="" class="icon-6"></a>
  <a href="" class="icon-7"></a>
  <a href="" class="icon-8"></a>
  <a href="" class="icon-9"></a>
  </div>
  </section>
  <!--第三屏-->
  <section class="sec3">
  <a href="" class="screen-area sec3-area">
  <span class="icon icon-game"></span>
  </a>
  <div class="figure-3"></div>
  <div class="figure-3-mask"></div>
  <div class="figure1-list">
  <span class="sec3-icon icon-monitor"></span>
  <span class="sec3-icon1 icon-character1"></span>
  <span class="sec3-icon1 icon-character2"></span>
  <span class="sec3-icon icon-character3"></span>
  <span class="sec3-icon icon-character4"></span>
  <span class="sec3-icon icon-character5"></span>
  <span class="sec3-icon1 icon-shine"></span>
  <span class="sec3-icon1 icon-car"></span>
  <span class="sec3-icon1 icon-flame"></span>
  </div>
  <div class="light"></div>
  </section>
  <!--第四屏-->
  <section class="sec4">
  <a href="" class="screen-area sec4-area">
  <span class="icon icon-life"></span>
  </a>
  <div class="figure-4"></div>
  <div class="figure-4-mask"></div>
  <div class="figure2-list">
  <span class="icon-watch"></span>
  <span class="icon-headset"></span>
  <span class="icon-shoe"></span>
  <span class="icon-glasses"></span>
  <span class="icon-bag"></span>
  <span class="icon-perfume"></span>
  <span class="icon-hat"></span>
  <span class="icon-dress"></span>
  </div>
  </section>
  <!--第五屏-->
  <section class="sec5">
  <a href="" class="screen-area sec5-area">
  <span class="icon icon-makeup"></span>
  </a>
  <div class="figure-5"></div>
  <div class="figure3-list">
  <span class="icon-bird"></span>
  <span class="icon-babyq"></span>
  <span class="icon-bear"></span>
  <span class="icon-qana"></span>
  <span class="icon-dialog1"></span>
  <span class="icon-dialog2"></span>
  </div>
  </section>
  <footer class="ui-footer">
  <nav>
  <ul>
  <li>
  <a href="">官方手Q账号</a>
  </li>
  <li>
  <a href="">官方微信账号</a>
  </li>
  <li>
  <a href="">兑换中心</a>
  </li>
  <li>
  <a href="">官方论坛</a>
  </li>
  <li>
  <a href="">官方空间</a>
  </li>
  <li>
  <a href="">官方微博</a>
  </li>
  <li>
  <a href="">
  <span class="foot-icon icon-service"></span>
  <span>客服中心</span>
  </a>
  </li>
  </ul>
  </nav>
  <p>Copyright © 1998 - 2015 Tencent . All Rights Reserved</p>
  <P>腾讯公司 版权所有</p>
  </footer>
  </section>
  </div>
  </body>
  </html>
 

/************animation********/

/**共用**/
/*fadeInUp*/
@-webkit-keyframes fadeInUp{
	0%{
		opacity:0;
		-webkit-transform:translateY(100px);
	}
	100%{
		opacity:1;
		-webkit-transform:translateY(0);
	}
}
@-moz-keyframes fadeInUp{
	0%{
		opacity:0;
		-moz-transform:translateY(100px);
	}
	100%{
		opacity:1;
		-moz-transform:translateY(0);
	}
}
@-ms-keyframes fadeInUp{
	0%{
		filter:alpha(opacity="0");
		-ms-transform:translateY(100px);
	}
	100%{
		filter:alpha(opacity="100");
		-ms-transform:translateY(0);
	}
}
@keyframes fadeInUp{
	0%{
		opacity:0;
		transform:translateY(100px);
	}
	100%{
		opacity:1;
		transform:translateY(0);
	}
}
/**左侧内容图标向右旋转**/
@-webkit-keyframes rollToRight{
	0%{
		opacity:0;
		-webkit-transform:translateX(-100px) rotate(-180deg);
	}
	100%{
		opacity:1;
		-webkit-transform:translateX(0) rotate(0);
	}
}
@-moz-keyframes rollToRight{
	0%{
		opacity:0;
		-moz-transform:translateX(-100px) rotate(-180deg);
	}
	100%{
		opacity:1;
		-moz-transform:translateX(0) rotate(0);
	}
}
@-ms-keyframes rollToRight{
	0%{
		filter:alpha(opacity="0");
		-ms-transform:translateX(-100px) rotate(-180deg);
	}
	100%{
		filter:alpha(opacity="100");
		-ms-transform:translateX(0) rotate(0);
	}
}
@keyframes rollToRight{
	0%{
		opacity:0;
		transform:translateX(-100px) rotate(-180deg);
	}
	100%{
		opacity:1;
		transform:translateX(0) rotate(0);
	}
}


/**第一屏**/
/**星星**/
@-webkit-keyframes flash{
	0%{
		opacity:1;
	}
	50%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
@-moz-keyframes flash{
	0%{
		opacity:1;
	}
	50%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
@-ms-keyframes flash{
	0%{
		filter:alpha(opacity="100");
	}
	50%{
		filter:alpha(opacity="0");
	}
	100%{
		filter:alpha(opacity="100");
	}
}
@keyframes flash{
	0%{
		opacity:1;
	}
	50%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
/**大多数**/
@-webkit-keyframes firstIn{
	0%{
		-webkit-transform:translateZ(1000px);
	}
	100%{
		-webkit-transform:translateZ(0);
	}
}
@-moz-keyframes firstIn{
	0%{
		-moz-transform:translateZ(1000px);
	}
	100%{
		-moz-transform:translateZ(0);
	}
}
@-ms-keyframes firstIn{
	0%{
		-ms-transform:translateZ(1000px);
	}
	100%{
		-ms-transform:translateZ(0);
	}
}
@keyframes firstIn{
	0%{
		transform:translateZ(1000px);
	}
	100%{
		transform:translateZ(0);
	}
}

/**第二屏**/

/*右侧旋转*/
/*icon1*/
@-webkit-keyframes icon1{
	0%{
		z-index:5;
		transform:translate(0,0);
	}
	25%{
		z-index:5;
		transform:translate(230px,0) scale(1.3);
	}
	50%{
		z-index:5;
		transform:translate(400px,-95px) scale(1);
	}
	75%{
		z-index:5;
		transform:translate(320px,-230px) scale(0.8);
	}
	100%{
		z-index:1;
		transform:translate(151px,-289px) scale(0.6);
	}
}
@-moz-keyframes icon1{
	0%{
		z-index:5;
		transform:translate(0,0);
	}
	25%{
		z-index:5;
		transform:translate(230px,0) scale(1.3);
	}
	50%{
		z-index:5;
		transform:translate(400px,-95px) scale(1);
	}
	75%{
		z-index:5;
		transform:translate(320px,-230px) scale(0.8);
	}
	100%{
		z-index:1;
		transform:translate(151px,-289px) scale(0.6);
	}
}
@-ms-keyframes icon1{
	0%{
		z-index:5;
		transform:translate(0,0);
	}
	25%{
		z-index:5;
		transform:translate(230px,0) scale(1.3);
	}
	50%{
		z-index:5;
		transform:translate(400px,-95px) scale(1);
	}
	75%{
		z-index:5;
		transform:translate(320px,-230px) scale(0.8);
	}
	100%{
		z-index:1;
		transform:translate(151px,-289px) scale(0.6);
	}
}
@keyframes icon1{
	0%{
		z-index:5;
		transform:translate(0,0);
	}
	25%{
		z-index:5;
		transform:translate(230px,0) scale(1.3);
	}
	50%{
		z-index:5;
		transform:translate(400px,-95px) scale(1);
	}
	75%{
		z-index:5;
		transform:translate(320px,-230px) scale(0.8);
	}
	100%{
		z-index:1;
		transform:translate(151px,-289px) scale(0.6);
	}
}
/*icon2*/
@-webkit-keyframes icon2{
	0%{
		transform:translate(0,0) scale(1.3);
	}
	25%{
		transform:translate(170px,-95px) scale(1);
	}
	50%{
		transform:translate(90px,-230px) scale(0.8);
	}
	75%{
		z-index:1;
		transform:translate(-79px,-290px) scale(0.6);
	}
	100%{
		z-index:1;
		transform:translate(-240px,-282px) scale(0.4);
	}
}
@-moz-keyframes icon2{
	0%{
		transform:translate(0,0) scale(1.3);
	}
	25%{
		transform:translate(170px,-95px) scale(1);
	}
	50%{
		transform:translate(90px,-230px) scale(0.8);
	}
	75%{
		z-index:1;
		transform:translate(-79px,-290px) scale(0.6);
	}
	100%{
		z-index:1;
		transform:translate(-240px,-282px) scale(0.4);
	}
}
@-ms-keyframes icon2{
	0%{
		transform:translate(0,0) scale(1.3);
	}
	25%{
		transform:translate(170px,-95px) scale(1);
	}
	50%{
		transform:translate(90px,-230px) scale(0.8);
	}
	75%{
		z-index:1;
		transform:translate(-79px,-290px) scale(0.6);
	}
	100%{
		z-index:1;
		transform:translate(-240px,-282px) scale(0.4);
	}
}
@keyframes icon2{
	0%{
		transform:translate(0,0) scale(1.3);
	}
	25%{
		transform:translate(170px,-95px) scale(1);
	}
	50%{
		transform:translate(90px,-230px) scale(0.8);
	}
	75%{
		z-index:1;
		transform:translate(-79px,-290px) scale(0.6);
	}
	100%{
		z-index:1;
		transform:translate(-240px,-282px) scale(0.4);
	}
}
/*icon3*/
@-webkit-keyframes icon3{
	0%{
		transform:translate(0,0) scale(1);
	}
	25%{
		transform:translate(-80px,-135px) scale(0.9);
	}
	50%{
		z-index:1;
		transform:translate(-250px,-194px) scale(0.8);
	}
	75%{
		z-index:1;
		transform:translate(-410px,-187px) scale(0.7);
	}
	100%{
		z-index:5;
		transform:translate(-570px,-150px) scale(0.6);
	}
}
@-moz-keyframes icon3{
	0%{
		transform:translate(0,0) scale(1);
	}
	25%{
		transform:translate(-80px,-135px) scale(0.8);
	}
	50%{
		z-index:1;
		transform:translate(-250px,-194px) scale(0.6);
	}
	75%{
		z-index:1;
		transform:translate(-410px,-187px) scale(0.4);
	}
	100%{
		z-index:5;
		transform:translate(-570px,-150px) scale(0.5);
	}
}
@-ms-keyframes icon3{
	0%{
		transform:translate(0,0) scale(1);
	}
	25%{
		transform:translate(-80px,-135px) scale(0.8);
	}
	50%{
		z-index:1;
		transform:translate(-250px,-194px) scale(0.6);
	}
	75%{
		z-index:1;
		transform:translate(-410px,-187px) scale(0.4);
	}
	100%{
		z-index:5;
		transform:translate(-570px,-150px) scale(0.5);
	}
}
@keyframes icon3{
	0%{
		transform:translate(0,0) scale(1);
	}
	25%{
		transform:translate(-80px,-135px) scale(0.8);
	}
	50%{
		z-index:1;
		transform:translate(-250px,-194px) scale(0.6);
	}
	75%{
		z-index:1;
		transform:translate(-410px,-187px) scale(0.4);
	}
	100%{
		z-index:5;
		transform:translate(-570px,-150px) scale(0.5);
	}
}
/*icon4*/
@-webkit-keyframes icon4{
	0%{
		transform:translate(0,0) scale(0.8);
	}
	25%{
		transform:translate(-168px,-59px) scale(0.6);
	}
	50%{
		z-index:1;
		transform:translate(-330px,-52px) scale(0.4);
	}
	75%{
		z-index:1;
		transform:translate(-490px,-15px) scale(0.5);
	}
	100%{
		z-index:5;
		transform:translate(-590px,85px) scale(0.6);
	}
}
@-moz-keyframes icon4{
	0%{
		transform:translate(0,0) scale(0.8);
	}
	25%{
		transform:translate(-168px,-59px) scale(0.6);
	}
	50%{
		z-index:1;
		transform:translate(-330px,-52px) scale(0.4);
	}
	75%{
		z-index:1;
		transform:translate(-490px,-15px) scale(0.5);
	}
	100%{
		z-index:5;
		transform:translate(-590px,85px) scale(0.6);
	}
}
@-ms-keyframes icon4{
	0%{
		transform:translate(0,0) scale(0.8);
	}
	25%{
		transform:translate(-168px,-59px) scale(0.6);
	}
	50%{
		z-index:1;
		transform:translate(-330px,-52px) scale(0.4);
	}
	75%{
		z-index:1;
		transform:translate(-490px,-15px) scale(0.5);
	}
	100%{
		z-index:5;
		transform:translate(-590px,85px) scale(0.6);
	}
}
@keyframes icon4{
	0%{
		transform:translate(0,0) scale(0.8);
	}
	25%{
		transform:translate(-168px,-59px) scale(0.6);
	}
	50%{
		z-index:1;
		transform:translate(-330px,-52px) scale(0.4);
	}
	75%{
		z-index:1;
		transform:translate(-490px,-15px) scale(0.5);
	}
	100%{
		z-index:5;
		transform:translate(-590px,85px) scale(0.6);
	}
}
/*icon5*/
@-webkit-keyframes icon5{
	0%{
		transform:translate(0,0) scale(0.6);
	}
	25%{
		z-index:1;
		transform:translate(-160px,7px) scale(0.4);
	}
	50%{
		z-index:5;
		transform:translate(-320px,44px) scale(0.5);
	}
	75%{
		z-index:5;
		transform:translate(-420px,144px) scale(0.6);
	}
	100%{
		z-index:5;
		transform:translate(-340px,239px) scale(0.7);
	}
}
@-moz-keyframes icon5{
	0%{
		transform:translate(0,0) scale(0.6);
	}
	25%{
		z-index:1;
		transform:translate(-160px,7px) scale(0.4);
	}
	50%{
		z-index:5;
		transform:translate(-320px,44px) scale(0.5);
	}
	75%{
		z-index:5;
		transform:translate(-420px,144px) scale(0.6);
	}
	100%{
		z-index:5;
		transform:translate(-340px,239px) scale(0.7);
	}
}
@-ms-keyframes icon5{
	0%{
		transform:translate(0,0) scale(0.6);
	}
	25%{
		z-index:1;
		transform:translate(-160px,7px) scale(0.4);
	}
	50%{
		z-index:5;
		transform:translate(-320px,44px) scale(0.5);
	}
	75%{
		z-index:5;
		transform:translate(-420px,144px) scale(0.6);
	}
	100%{
		z-index:5;
		transform:translate(-340px,239px) scale(0.7);
	}
}
@keyframes icon5{
	0%{
		transform:translate(0,0) scale(0.6);
	}
	25%{
		z-index:1;
		transform:translate(-160px,7px) scale(0.4);
	}
	50%{
		z-index:5;
		transform:translate(-320px,44px) scale(0.5);
	}
	75%{
		z-index:5;
		transform:translate(-420px,144px) scale(0.6);
	}
	100%{
		z-index:5;
		transform:translate(-340px,239px) scale(0.7);
	}
}
/*icon6*/
@-webkit-keyframes icon6{
	0%{
		transform:translate(0,0) scale(0.4);
	}
	25%{
		z-index:1;
		transform:translate(-160px,37px) scale(0.5);
	}
	50%{
		z-index:5;
		transform:translate(-260px,137px) scale(0.6);
	}
	75%{
		z-index:5;
		transform:translate(-180px,232px) scale(0.7);
	}
	100%{
		z-index:5;
		transform:translate(10px,282px) scale(1);
	}
}
@-moz-keyframes icon6{
	0%{
		transform:translate(0,0) scale(0.4);
	}
	25%{
		z-index:1;
		transform:translate(-160px,37px) scale(0.5);
	}
	50%{
		z-index:5;
		transform:translate(-260px,137px) scale(0.6);
	}
	75%{
		z-index:5;
		transform:translate(-180px,232px) scale(0.7);
	}
	100%{
		z-index:5;
		transform:translate(10px,282px) scale(1);
	}
}
@-ms-keyframes icon6{
	0%{
		transform:translate(0,0) scale(0.4);
	}
	25%{
		z-index:1;
		transform:translate(-160px,37px) scale(0.5);
	}
	50%{
		z-index:5;
		transform:translate(-260px,137px) scale(0.6);
	}
	75%{
		z-index:5;
		transform:translate(-180px,232px) scale(0.7);
	}
	100%{
		z-index:5;
		transform:translate(10px,282px) scale(1);
	}
}
@keyframes icon6{
	0%{
		transform:translate(0,0) scale(0.4);
	}
	25%{
		z-index:1;
		transform:translate(-160px,37px) scale(0.5);
	}
	50%{
		z-index:5;
		transform:translate(-260px,137px) scale(0.6);
	}
	75%{
		z-index:5;
		transform:translate(-180px,232px) scale(0.7);
	}
	100%{
		z-index:5;
		transform:translate(10px,282px) scale(1);
	}
}
/*icon7*/
@-webkit-keyframes icon7{
	0%{
		transform:translate(0,0) scale(0.7);
	}
	25%{
		transform:translate(190px,50px) scale(1);
	}
	50%{
		transform:translate(420px,50px) scale(1.3);
	}
	75%{
		transform:translate(590px,-45px) scale(1);
	}
	100%{
		transform:translate(510px,-180px) scale(0.8);
	}
}
@-moz-keyframes icon7{
	0%{
		transform:translate(0,0) scale(0.7);
	}
	25%{
		transform:translate(190px,50px) scale(1);
	}
	50%{
		transform:translate(420px,50px) scale(1.3);
	}
	75%{
		transform:translate(590px,-45px) scale(1);
	}
	100%{
		transform:translate(510px,-180px) scale(0.8);
	}
}
@-ms-keyframes icon7{
	0%{
		transform:translate(0,0) scale(0.7);
	}
	25%{
		transform:translate(190px,50px) scale(1);
	}
	50%{
		transform:translate(420px,50px) scale(1.3);
	}
	75%{
		transform:translate(590px,-45px) scale(1);
	}
	100%{
		transform:translate(510px,-180px) scale(0.8);
	}
}
@keyframes icon7{
	0%{
		transform:translate(0,0) scale(0.7);
	}
	25%{
		transform:translate(190px,50px) scale(1);
	}
	50%{
		transform:translate(420px,50px) scale(1.3);
	}
	75%{
		transform:translate(590px,-45px) scale(1);
	}
	100%{
		transform:translate(510px,-180px) scale(0.8);
	}
}
/*icon8*/
@-webkit-keyframes icon8{
	0%{
		transform:translate(0,0) scale(0.6);
	}
	25%{
		transform:translate(80px,96px) scale(0.7);
	}
	50%{
		transform:translate(270px,145px) scale(1);
	}
	75%{
		transform:translate(500px,145px) scale(1.3);
	}
	100%{
		transform:translate(670px,51px) scale(1);
	}
}
@-moz-keyframes icon8{
	0%{
		transform:translate(0,0) scale(0.6);
	}
	25%{
		transform:translate(80px,96px) scale(0.7);
	}
	50%{
		transform:translate(270px,145px) scale(1);
	}
	75%{
		transform:translate(500px,145px) scale(1.3);
	}
	100%{
		transform:translate(670px,51px) scale(1);
	}
}
@-ms-keyframes icon8{
	0%{
		transform:translate(0,0) scale(0.6);
	}
	25%{
		transform:translate(80px,96px) scale(0.7);
	}
	50%{
		transform:translate(270px,145px) scale(1);
	}
	75%{
		transform:translate(500px,145px) scale(1.3);
	}
	100%{
		transform:translate(670px,51px) scale(1);
	}
}
@keyframes icon8{
	0%{
		transform:translate(0,0) scale(0.6);
	}
	25%{
		transform:translate(80px,96px) scale(0.7);
	}
	50%{
		transform:translate(270px,145px) scale(1);
	}
	75%{
		transform:translate(500px,145px) scale(1.3);
	}
	100%{
		transform:translate(670px,51px) scale(1);
	}
}
/*icon9*/
@-webkit-keyframes icon9{
	0%{
		transform:translate(0,0) scale(0.5);
	}
	25%{
		transform:translate(-100px,100px) scale(0.6);
	}
	50%{
		transform:translate(-20px,195px) scale(0.7);
	}
	75%{
		transform:translate(170px,245px) scale(1);
	}
	100%{
		transform:translate(400px,245px) scale(1.3);
	}
}
@-moz-keyframes icon9{
	0%{
		transform:translate(0,0) scale(0.5);
	}
	25%{
		transform:translate(-100px,100px) scale(0.6);
	}
	50%{
		transform:translate(-20px,195px) scale(0.7);
	}
	75%{
		transform:translate(170px,245px) scale(1);
	}
	100%{
		transform:translate(400px,245px) scale(1.3);
	}
}
@-ms-keyframes icon9{
	0%{
		transform:translate(0,0) scale(0.5);
	}
	25%{
		transform:translate(-100px,100px) scale(0.6);
	}
	50%{
		transform:translate(-20px,195px) scale(0.7);
	}
	75%{
		transform:translate(170px,245px) scale(1);
	}
	100%{
		transform:translate(400px,245px) scale(1.3);
	}
}
@keyframes icon9{
	0%{
		transform:translate(0,0) scale(0.5);
	}
	25%{
		transform:translate(-100px,100px) scale(0.6);
	}
	50%{
		transform:translate(-20px,195px) scale(0.7);
	}
	75%{
		transform:translate(170px,245px) scale(1);
	}
	100%{
		transform:translate(400px,245px) scale(1.3);
	}
}

/**第三屏**/
/*fadeInLeft*/
@-webkit-keyframes fadeInLeft{
	0%{
		opacity:0;
		transform:translateX(-10px);
	}
	100%{
		opacity:1;
		transform:translateX(0);
	}
}
@-moz-keyframes fadeInLeft{
	0%{
		opacity:0;
		transform:translateX(-10px);
	}
	100%{
		opacity:1;
		transform:translateX(0);
	}
}
@-ms-keyframes fadeInLeft{
	0%{
		filter:alpha(opacity="0");
		transform:translateX(-10px);
	}
	100%{
		filter:alpha(opacity="100");
		transform:translateX(0);
	}
}
@keyframes fadeInLeft{
	0%{
		opacity:0;
		transform:translateX(-10px);
	}
	100%{
		opacity:1;
		transform:translateX(0);
	}
}
/*fadeInUp2*/
@-webkit-keyframes fadeInUp2{
	0%{
		opacity:0;
		transform:translateY(10px);
	}
	100%{
		opacity:1;
		transform:translateY(0);
	}
}
@-moz-keyframes fadeInUp2{
	0%{
		opacity:0;
		transform:translateY(10px);
	}
	100%{
		opacity:1;
		transform:translateY(0);
	}
}
@-ms-keyframes fadeInUp2{
	0%{
		filter:alpha(opacity="0");
		transform:translateY(10px);
	}
	100%{
		filter:alpha(opacity="100");
		transform:translateY(0);
	}
}
@keyframes fadeInUp2{
	0%{
		opacity:0;
		transform:translateY(10px);
	}
	100%{
		opacity:1;
		transform:translateY(0);
	}
}

/*fadeIn*/
@-webkit-keyframes fadeIn{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
@-moz-keyframes fadeIn{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
@-ms-keyframes fadeIn{
	0%{
		filter:alpha(opacity="0");
	}
	100%{
		filter:alpha(opacity="100");
	}
}
@keyframes fadeIn{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;;
	}
}

/**第四屏**/
/*rotateAndZoomOut*/
@-webkit-keyframes rotateAndZoomOut{
	0%{
		transform:rotate(-90deg) scale(0);
		opacity:0.5;
	}
	100%{
		transform:rotate(0) scale(1);
		opacity:1;
	}
}
@-moz-keyframes rotateAndZoomOut{
	0%{
		transform:rotate(-90deg) scale(0);
		opacity:0.5;
	}
	100%{
		transform:rotate(0) scale(1);
		opacity:1;
	}
}
@-ms-keyframes rotateAndZoomOut{
	0%{
		transform:rotate(-90deg) scale(0);
		filter:alpha(opacity="50");
	}
	100%{
		transform:rotate(0) scale(1);
		filter:alpha(opacity="100");
	}
}
@keyframes rotateAndZoomOut{
	0%{
		transform:rotate(-90deg) scale(0);
		opacity:0.5;
	}
	100%{
		transform:rotate(0) scale(1);
		opacity:1;
	}
}
/*randomMove1*/
@-webkit-keyframes randomMove1{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(5px,3px);
	}
	50%{
		transform:translate(8px,0);
	}
	75%{
		transform:translate(5px,-5px);
	}
	100%{
		opacity:1;
		transform:translate(0,0);
	}
}
@-moz-keyframes randomMove1{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(5px,3px);
	}
	50%{
		transform:translate(8px,0);
	}
	75%{
		transform:translate(5px,-5px);
	}
	100%{
		opacity:1;
		transform:translate(0,0);
	}
}
@-ms-keyframes randomMove1{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(5px,3px);
	}
	50%{
		transform:translate(8px,0);
	}
	75%{
		transform:translate(5px,-5px);
	}
	100%{
		opacity:1;
		transform:translate(0,0);
	}
}
@keyframes randomMove1{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(5px,3px);
	}
	50%{
		transform:translate(8px,0);
	}
	75%{
		transform:translate(5px,-5px);
	}
	100%{
		opacity:1;
		transform:translate(0,0);
	}
}
/*randomMove2*/
@-webkit-keyframes randomMove2{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(-5px,-3px);
	}
	50%{
		transform:translate(-8px,0);
	}
	75%{
		transform:translate(-5px,5px);
	}
	100%{
		opacity:1;
		transform:translate(0,0);
	}
}
@-moz-keyframes randomMove2{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(-5px,-3px);
	}
	50%{
		transform:translate(-8px,0);
	}
	75%{
		transform:translate(-5px,5px);
	}
	100%{
		opacity:1;
		transform:translate(0,0);
	}
}
@-ms-keyframes randomMove2{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(-5px,-3px);
	}
	50%{
		transform:translate(-8px,0);
	}
	75%{
		transform:translate(-5px,5px);
	}
	100%{
		filter:alpha(opacity="100");
		transform:translate(0,0);
	}
}
@keyframes randomMove2{
	0%{
		transform:translate(0,0);
	}
	25%{
		transform:translate(-5px,-3px);
	}
	50%{
		transform:translate(-8px,0);
	}
	75%{
		transform:translate(-5px,5px);
	}
	100%{
		opacity:1;
		transform:translate(0,0);
	}
}
/***第五屏***/
/*bounceIn*/
@-webkit-keyframes bounceIn{
	0%,20%,40%,60%,80%,100%{
		transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);
	}
	0%{
		opacity:0;
		transform:scale3D(0.3,0.3,0.3);
	}
	20%{
		transform:scale3D(1,1,1);
	}
	40%{
		transform:scale3D(0.9,0.9,0.9);
	}
	60%{
		opacity:1;
		transform:scale3D(1.03,1.03,1.03);
	}
	80%{
		transform:scale3D(0.97,0.97,0.97);
	}
	100%{
		opacity:1;
		transform:scale3D(1,1,1);
	}
}
@-moz-keyframes bounceIn{
	0%,20%,40%,60%,80%,100%{
		transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);
	}
	0%{
		opacity:0;
		transform:scale3D(0.3,0.3,0.3);
	}
	20%{
		transform:scale3D(1,1,1);
	}
	40%{
		transform:scale3D(0.9,0.9,0.9);
	}
	60%{
		opacity:1;
		transform:scale3D(1.03,1.03,1.03);
	}
	80%{
		transform:scale3D(0.97,0.97,0.97);
	}
	100%{
		opacity:1;
		transform:scale3D(1,1,1);
	}
}
@-ms-keyframes bounceIn{
	0%,20%,40%,60%,80%,100%{
		transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);
	}
	0%{
		filter:alpha(opacity="0");
		transform:scale3D(0.3,0.3,0.3);
	}
	20%{
		transform:scale3D(1,1,1);
	}
	40%{
		transform:scale3D(0.9,0.9,0.9);
	}
	60%{
		filter:alpha(opacity="100");
		transform:scale3D(1.03,1.03,1.03);
	}
	80%{
		transform:scale3D(0.97,0.97,0.97);
	}
	100%{
		filter:alpha(opacity="100");
		transform:scale3D(1,1,1);
	}
}
@keyframes bounceIn{
	0%,20%,40%,60%,80%,100%{
		transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);
	}
	0%{
		opacity:0;
		transform:scale3D(0.3,0.3,0.3);
	}
	20%{
		transform:scale3D(1,1,1);
	}
	40%{
		transform:scale3D(0.9,0.9,0.9);
	}
	60%{
		opacity:1;
		transform:scale3D(1.03,1.03,1.03);
	}
	80%{
		transform:scale3D(0.97,0.97,0.97);
	}
	100%{
		opacity:1;
		transform:scale3D(1,1,1);
	}
}
/*bounceInLeft*/
@-webkit-keyframes bounceInLeft{
	0%,60%,75%,90%,100%{
		animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);
	}
	0%{
		opacity:0;
		transform:translate3d(-100px,0,0);
	}
	60%{
		opacity:1;
		transform:translate3d(20px,0,0);
	}
	75%{
		opacity:1;
		transform:translate3d(-10px,0,0);
	}
	90%{
		opacity:1;
		transform:translate3d(5px,0,0);
	}
	100%{
		opacity:1;
		transform:translate3d(0,0,0);
	}
}
@-moz-keyframes bounceInLeft{
	0%,60%,75%,90%,100%{
		animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);
	}
	0%{
		opacity:0;
		transform:translate3d(-100px,0,0);
	}
	60%{
		opacity:1;
		transform:translate3d(20px,0,0);
	}
	75%{
		opacity:1;
		transform:translate3d(-10px,0,0);
	}
	90%{
		opacity:1;
		transform:translate3d(5px,0,0);
	}
	100%{
		opacity:1;
		transform:translate3d(0,0,0);
	}
}
@-ms-keyframes bounceInLeft{
	0%,60%,75%,90%,100%{
		animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);
	}
	0%{
		filter:alpha(opacity="0");
		transform:translate3d(-100px,0,0);
	}
	60%{
		filter:alpha(opacity="100");
		transform:translate3d(20px,0,0);
	}
	75%{
		filter:alpha(opacity="100");
		transform:translate3d(-10px,0,0);
	}
	90%{
		filter:alpha(opacity="100");
		transform:translate3d(5px,0,0);
	}
	100%{
		filter:alpha(opacity="100");
		transform:translate3d(0,0,0);
	}
}
@keyframes bounceInLeft{
	0%,60%,75%,90%,100%{
		animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);
	}
	0%{
		opacity:0;
		transform:translate3d(-100px,0,0);
	}
	60%{
		opacity:1;
		transform:translate3d(20px,0,0);
	}
	75%{
		opacity:1;
		transform:translate3d(-10px,0,0);
	}
	90%{
		opacity:1;
		transform:translate3d(5px,0,0);
	}
	100%{
		opacity:1;
		transform:translate3d(0,0,0);
	}
}
/*bounceInRight*/
@-webkit-keyframes bounceInRight{
	0%,60%,75%,90%,100%{
		animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);
	}
	0%{
		opacity:0;
		transform:translate3d(100px,0,0);
	}
	60%{
		opacity:1;
		transform:translate3d(-20px,0,0);
	}
	75%{
		opacity:1;
		transform:translate3d(10px,0,0);
	}
	90%{
		opacity:1;
		transform:translate3d(-5px,0,0);
	}
	100%{
		opacity:1;
		transform:translate3d(0,0,0);
	}
}
@-moz-keyframes bounceInRight{
	0%,60%,75%,90%,100%{
		animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);
	}
	0%{
		opacity:0;
		transform:translate3d(100px,0,0);
	}
	60%{
		opacity:1;
		transform:translate3d(-20px,0,0);
	}
	75%{
		opacity:1;
		transform:translate3d(10px,0,0);
	}
	90%{
		opacity:1;
		transform:translate3d(-5px,0,0);
	}
	100%{
		opacity:1;
		transform:translate3d(0,0,0);
	}
}
@-ms-keyframes bounceInRight{
	0%,60%,75%,90%,100%{
		animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);
	}
	0%{
		filter:alpha(opacity="0");
		transform:translate3d(100px,0,0);
	}
	60%{
		filter:alpha(opacity="100");
		transform:translate3d(-20px,0,0);
	}
	75%{
		filter:alpha(opacity="100");
		transform:translate3d(10px,0,0);
	}
	90%{
		filter:alpha(opacity="100");
		transform:translate3d(-5px,0,0);
	}
	100%{
		filter:alpha(opacity="100");
		transform:translate3d(0,0,0);
	}
}
@keyframes bounceInRight{
	0%,60%,75%,90%,100%{
		animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);
	}
	0%{
		opacity:0;
		transform:translate3d(100px,0,0);
	}
	60%{
		opacity:1;
		transform:translate3d(-20px,0,0);
	}
	75%{
		opacity:1;
		transform:translate3d(10px,0,0);
	}
	90%{
		opacity:1;
		transform:translate3d(-5px,0,0);
	}
	100%{
		opacity:1;
		transform:translate3d(0,0,0);
	}
}

/*******STYLE******/

* {
	padding:0;
	margin:0;
}
html, body {
	height:100%;
	overflow:hidden;
}
a {
	text-decoration:none;
}
.nav-header {
	position:fixed;
	z-index:99;
	height:90px;
	width:100%;
	left:0;
	top:0;
	background:rgba(0, 0, 0, .6);
}
.head-contain {
	width:1180px;
	height:90px;
	margin:0 auto;
	text-align:center;
}
.top-logo, .top-nav, .top-nav li, .top-right {
	height:90px;
	display:inline-block;
	vertical-align:top;
}
.top-nav {
	margin:0 48px;
}
.top-nav li {
	line-height:90px;
	width:90px;
}
.top-nav li a {
	display:block;
	text-align:center;
	font-size:16px;
	color:#fff;
}
.top-nav li a:hover {
	color:#ee0223;
}
.top-right a {
	display:inline-block;
	font-size:16px;
	text-align:center;
	margin-top:25px;
	border-radius:35px;
}
.top-right a.login {
	width:93px;
	height:38px;
	line-height:38px;
	color:#fad65c;
	border:1px #fad65c solid;
}
.top-right a.login:hover {
	color:#986b0d;
	background:#fad65c;
}
.top-right a.open-vip {
	width:140px;
	height:40px;
	font-weight:700;
	line-height:40px;
	background:#fad65c;
	color:#986b0d;
}
.top-right a.open-vip:hover {
	background:#fddc6c;
}
.index-wrap {
	transition:transform ease 1s;
}
.index-wrap > section {
	position:relative;
}
.screen-area {
	position:absolute;
	opacity:0;
	filter:alpha(opacity="0");
	width:355px;
	height:175px;
	top:290px;
	left:50%;
	margin-left:-500px;
	background:url(../img/sprites_index.png) no-repeat 0 -258px;
}
.icon {
	position:absolute;
	left:-130px;
	top:13px;
	width:130px;
	height:110px;
	background:url(../img/sprites_index.png) no-repeat;
}
/**第一屏**/
.sec1 {
	height:834px;
	background:url(../img/bg_1.jpg) no-repeat center top;
	-webkit-perspective:1000px;
	perspective:1000px;
}
.sec1 .sec1-title {
	position:absolute;
	z-index:5;
	width:770px;
	line-height:999;
	overflow:hidden;
	height:265px;
	left:50%;
	margin-left:-540px;
	top:175px;
	background:url(../img/sprites_index.png) no-repeat;
	-webkit-animation:firstIn 0.4s ease 1;
	-moz-animation:firstIn 0.4s ease 1;
	-ms-animation:firstIn 0.4s ease 1;
	animation:firstIn 0.4s ease 1;
}
.sec1 .sec1-info {
	position:absolute;
	opacity:0;
	filter:alpha(opacity="0");
	z-index:5;
	width:424px;
	height:128px;
	left:50%;
	top:380px;
	margin-left:-525px;
	line-height:999;
	overflow:hidden;
	background:url(../img/sprites_index.png) no-repeat -590px -268px;
}
.sec1 .sec1-vip {
	position:absolute;
	opacity:0;
	filter:alpha(opacity="0");
	z-index:5;
	top:500px;
	left:50%;
	margin-left:-535px;
}
.sec1 .sec1-vip a {
	display:inline-block;
	margin-right:15px;
	border-radius:26px;
	height:50px;
	line-height:50px;
	font-size:20px;
	width:196px;
	text-align:center;
	border:2px #fbd74f solid;
	color:#fbd74f;
}
.sec1 .sec1-vip a:hover {
	background:#fbd74f;
	color:#9c701e;
}
.sec1 .sec1-vip .super-vip {
	background:#fbd74f;
	color:#9c701e;
}
.sec1 .sec1-vip .super-vip:hover {
	background:#fee588;
	border-color:#fee588;
}
.sec1 .figure-1 {
	position:absolute;
	width:720px;
	height:656px;
	left:45%;
	top:170px;
	background:url(../img/figure_1.png) no-repeat 100% 17px;
}
.sec1 .figure-1:after {
	content:'';
	display:block;
	position:absolute;
	width:25px;
	height:25px;
	left:394px;
	top:188px;
	z-index:5;
	background:url(../img/sprites_index.png) no-repeat -526px -450px;
	-webkit-animation:flash 2s ease infinite;
	-moz-animation:flash 2s ease infinite;
	-ms-animation:flash 2s ease infinite;
	animation:flash 2s ease infinite;
}
/**第二屏**/
.sec2 {
	height:820px;
	background:url(../img/bg_2.jpg) no-repeat center top;
}
.sec2 .icon-feature {
	background-position:-685px -450px;
}
.sec2 .figure-2 {
	position:absolute;
	z-index:5;
	width:720px;
	height:897px;
	left:45%;
	top:-66px;
	background:url(../img/figure_2.png) no-repeat -427px 155px;
}
.figure-list a {
	position:absolute;
	z-index:5;
	width:100px;
	height:100px;
	left:50%;
	background:url(../img/sprites_function_feature.png) no-repeat;
}
.figure-list a.icon-1 {
	background-position:0 0;
	top:595px;
	margin-left:100px;
}
.figure-list a.icon-2 {
	background-position:0 -110px;
	top:595px;
	margin-left:330px;
	transform:scale(1.3);
}
.figure-list a.icon-3 {
	background-position:0 -220px;
	top:500px;
	margin-left:500px;
}
.figure-list a.icon-4 {
	background-position:0 -330px;
	z-index:1;
	top:365px;
	margin-left:420px;
	transform:scale(0.8);
}
.figure-list a.icon-5 {
	background-position:0 -440px;
	z-index:1;
	top:305px;
	margin-left:250px;
	transform:scale(0.6);
}
.figure-list a.icon-6 {
	background-position:0 -550px;
	z-index:1;
	top:313px;
	margin-left:90px;
	transform:scale(0.4);
}
.figure-list a.icon-7 {
	background-position:0 -880px;
	top:545px;
	margin-left:-90px;
	transform:scale(0.7);
}
.figure-list a.icon-8 {
	background-position:0 -770px;
	top:450px;
	margin-left:-170px;
	transform:scale(0.6);
}
.figure-list a.icon-9 {
	background-position:0 -660px;
	top:350px;
	margin-left:-70px;
	transform:scale(0.5);
}
/**第三屏**/
.sec3 {
	height:779px;
	background:url(../img/bg_3.jpg) no-repeat center top;
}
.sec3 .sec3-area {
	background-position:0 -450px;
}
.sec3 .icon-game {
	background-position:-685px -570px;
}
.figure-3 {
	position:absolute;
	width:527px;
	height:758px;
	left:55%;
	top:2px;
	z-index:4;
	background:url(../img/figure_3.png) no-repeat -666px 100px
}
.figure-3-mask {
	position:absolute;
	left:50%;
	bottom:17px;
	margin-left:100px;
	width:600px;
	height:156px;
	z-index:5;
	background:url(../img/bg_3_mask.png) no-repeat;
}
.figure1-list span {
	display:block;
	position:absolute;
	left:55%;
	z-index:5;
	transform-origin:center center;
}
.figure1-list .sec3-icon {
	opacity:0;
	filter:alpha(opacity="0");
	background:url(../img/sprites_game_feature.png) no-repeat;
}
.figure1-list .sec3-icon1 {
	opacity:0;
	filter:alpha(opacity="0");
	background:url(../img/sprites_game_feature2.png) no-repeat;
}
.figure1-list .icon-monitor {
	width:335px;
	height:300px;
	z-index:6;
	margin-left:-226px;
	top:494px;
}
.figure1-list .icon-character1 {
	width:237px;
	height:285px;
	margin-left:-299px;
	top:380px;
	background-position:-204px -33px;
}
.figure1-list .icon-character2 {
	width:191px;
	height:382px;
	margin-left:-188px;
	top:295px;
	background-position:-426px 0;
}
.figure1-list .icon-character3 {
	width:260px;
	height:385px;
	z-index:4;
	margin-left:-165px;
	top:187px;
	background-position:-382px -227px;
}
.figure1-list .icon-character4 {
	width:337px;
	height:369px;
	margin-left:-120px;
	top:220px;
	background-position:0 -305px;
}
.figure1-list .icon-character5 {
	width:193px;
	height:162px;
	margin-left:70px;
	top:500px;
	background-position:-413px -30px;
}
.figure1-list .icon-shine {
	width:407px;
	height:355px;
	margin-left:-224px;
	top:332px;
	background-position:10px -389px;
}
.figure1-list .icon-car {
	width:147px;
	height:82px;
	margin-left:455px;
	top:627px;
	background-position:0 0;
}
.figure1-list .icon-flame {
	width:207px;
	height:159px;
	z-index:4;
	margin-left:375px;
	top:564px;
	background-position:0 -102px;
}
.sec3 .light {
	opacity:0;
	filter:alpha(opacity="0");
	position:absolute;
	z-index:10;
	width:1173px;
	height:604px;
	left:50%;
	top:165px;
	margin-left:-400px;
	background:url(../img/sprites_decoration2.png) no-repeat;
}
/**第四屏**/
.sec4 {
	height:818px;
	background:url(../img/bg_4.jpg) no-repeat center top;
}
.sec4 .sec4-area {
	background-position:0 -625px;
}
.sec4 .icon-life {
	background-position:-685px -690px;
}
.sec4 .figure-4 {
	position:absolute;
	left:45%;
	top:-35px;
	width:700px;
	height:864px;
	z-index:5;
	background:url(../img/figure_4.png) no-repeat -562px 160px;
}
.sec4 .figure-4-mask {
	position:absolute;
	left:50%;
	bottom:-13px;
	margin-left:-115px;
	width:750px;
	height:150px;
	z-index:5;
	background:url(../img/bg_4_mask.png) no-repeat;
}
.sec4 .figure2-list {
	position:absolute;
	width:875px;
	height:693px;
	top:92px;
	z-index:5;
	left:50%;
	margin-left:-196px;
	transform:rotate(-90deg) scale(0);
}
.figure2-list span {
	display:block;
	position:absolute;
	z-index:5;
	width:150px;
	height:150px;
	background:url(../img/sprites_life_feature.png) no-repeat;
}
.sec4 .icon-watch {
	top:-10px;
	left:225px;
	z-index:4;
	background-position:0 -150px;
}
.sec4 .icon-headset {
	top:45px;
	left:60px;
	z-index:4;
	background-position:0 0;
}
.sec4 .icon-shoe {
	top:370px;
	left:-25px;
	z-index:4;
	background-position:0 -300px;
}
.sec4 .icon-glasses {
	top:525px;
	left:200px;
	background-position:0 -750px;
}
.sec4 .icon-bag {
	top:540px;
	left:500px;
	background-position:0 -900px;
}
.sec4 .icon-perfume {
	top:415px;
	left:690px;
	background-position:0 -1050px;
}
.sec4 .icon-hat {
	top:200px;
	left:700px;
	z-index:4;
	background-position:0 -600px;
}
.sec4 .icon-dress {
	top:45px;
	left:600px;
	z-index:1;
	background-position:0 -450px;
}
/**第五屏**/
.sec5 {
	height:749px;
	background:url(../img/bg_5.jpg) no-repeat center top;
}
.sec5-area {
	background-position:0 -820px;
}
.sec5 .icon-makeup {
	background-position:-685px -810px;
}
.figure-5 {
	position:absolute;
	left:50%;
	top:60px;
	width:570px;
	height:690px;
	z-index:5;
	background:url(../img/figure_5.png) no-repeat;
}
.figure3-list span {
	position:absolute;
	left:50%;
	z-index:5;
	background:url(../img/sprites_makeup_feature.png) no-repeat;
}
.figure3-list .icon-bird {
	width:100px;
	height:110px;
	top:247px;
	margin-left:375px;
}
.figure3-list .icon-babyq {
	width:138px;
	height:134px;
	top:595px;
	margin-left:470px;
	background-position:0 -121px;
}
.figure3-list .icon-bear {
	width:160px;
	height:210px;
	top:480px;
	margin-left:-95px;
	background-position:0 -400px;
}
.figure3-list .icon-qana {
	width:138px;
	height:130px;
	top:590px;
	margin-left:-210px;
	background-position:0 -271px;
}
.figure3-list .icon-dialog1 {
	width:190px;
	height:90px;
	top:400px;
	margin-left:50px;
	background-position:0 -626px;
}
.figure3-list .icon-dialog2 {
	width:285px;
	height:85px;
	top:500px;
	margin-left:300px;
	background-position:0 -740px;
}
/**底部**/
.ui-footer {
	background:#302f37;
	text-align:center;
	height:320px;
}
.ui-footer nav ul {
	margin:60px 0;
}
.ui-footer nav ul, .ui-footer li {
	display:inline-block;
}
.ui-footer li {
	width:100px;
	height:100px;
	margin:0 5px;
	font-size:14px;
}
.ui-footer li a {
	display:block;
	color:#7e7e7e;
	padding-top:85px;
	background:url(../img/sprites_footer.png) no-repeat;
}
.ui-footer li:first-child a {
	background-position:0 0;
}
.ui-footer li:first-child a:hover {
	background-position:-100px 0;
}
.ui-footer li:nth-child(2) a {
background-position:0 -100px;
}
.ui-footer li:nth-child(2) a:hover {
background-position:-100px -100px;
}
.ui-footer li:nth-child(3) a {
background-position:0 -200px;
}
.ui-footer li:nth-child(3) a:hover {
background-position:-100px -200px;
}
.ui-footer li:nth-child(4) a {
background-position:0 -300px;
}
.ui-footer li:nth-child(4) a:hover {
background-position:-100px -300px;
}
.ui-footer li:nth-child(5) a {
background-position:0 -400px;
}
.ui-footer li:nth-child(5) a:hover {
background-position:-100px -400px;
}
.ui-footer li:nth-child(6) a {
background-position:0 -500px;
}
.ui-footer li:nth-child(6) a:hover {
background-position:-100px -500px;
}
.ui-footer li:last-child a {
	background-position:0 -600px;
}
.ui-footer li:last-child a:hover {
	background-position:-100px -600px;
}
.ui-footer p {
	font-size:12px;
	line-height:1.8;
	color:#9d9d9d;
}
/****动画****/
.current .screen-area {
	-webkit-animation:fadeInUp 1s ease 1 both;
	-moz-animation:fadeInUp 1s ease 1 both;
	-ms-animation:fadeInUp 1s ease 1 both;
	animation:fadeInUp 1s ease 1 both;
}
.current .icon {
	-webkit-animation:rollToRight 1s ease 1 both;
	-moz-animation:rollToRight 1s ease 1 both;
	-ms-animation:rollToRight 1s ease 1 both;
	animation:rollToRight 1s ease 1 both;
}
/**第一屏**/
.current .sec1-info, .current .sec1-vip {
	-webkit-animation:fadeInUp 1s ease 0.5s 1 both;
	-moz-animation:fadeInUp 1s ease 0.5s 1 both;
	-ms-animation:fadeInUp 1s ease 0.5s 1 both;
	animation:fadeInUp 1s ease 0.5s 1 both;
}
/**第二屏**/
.current .icon-1 {
	-webkit-animation:icon1 0.5s linear both;
	-moz-animation:icon1 0.5s linear both;
	-ms-animation:icon1 0.5s linear both;
	animation:icon1 0.5s linear both;
}
.current .icon-2 {
	-webkit-animation:icon2 0.5s linear both;
	-moz-animation:icon2 0.5s linear both;
	-ms-animation:icon2 0.5s linear both;
	animation:icon2 0.5s linear both;
}
.current .icon-3 {
	-webkit-animation:icon3 0.5s linear both;
	-moz-animation:icon3 0.5s linear both;
	-ms-animation:icon3 0.5s linear both;
	animation:icon3 0.5s linear both;
}
.current .icon-4 {
	-webkit-animation:icon4 0.5s linear both;
	-moz-animation:icon4 0.5s linear both;
	-ms-animation:icon4 0.5s linear both;
	animation:icon4 0.5s linear both;
}
.current .icon-5 {
	-webkit-animation:icon5 0.5s linear both;
	-moz-animation:icon5 0.5s linear both;
	-ms-animation:icon5 0.5s linear both;
	animation:icon5 0.5s linear both;
}
.current .icon-6 {
	-webkit-animation:icon6 0.5s linear both;
	-moz-animation:icon6 0.5s linear both;
	-ms-animation:icon6 0.5s linear both;
	animation:icon6 0.5s linear both;
}
.current .icon-7 {
	-webkit-animation:icon7 0.5s linear both;
	-moz-animation:icon7 0.5s linear both;
	-ms-animation:icon7 0.5s linear both;
	animation:icon7 0.5s linear both;
}
.current .icon-8 {
	-webkit-animation:icon8 0.5s linear both;
	-moz-animation:icon8 0.5s linear both;
	-ms-animation:icon8 0.5s linear both;
	animation:icon8 0.5s linear both;
}
.current .icon-9 {
	-webkit-animation:icon9 0.5s linear both;
	-moz-animation:icon9 0.5s linear both;
	-ms-animation:icon9 0.5s linear both;
	animation:icon9 0.5s linear both;
}
/**第三屏**/
.current .icon-monitor {
	-webkit-animation:fadeInLeft 0.5s ease both;
	-moz-animation:fadeInLeft 0.5s ease both;
	-ms-animation:fadeInLeft 0.5s ease both;
	animation:fadeInLeft 0.5s ease both;
}
.current .icon-character1 {
	-webkit-animation:fadeInUp2 0.5s ease 0.4s both;
	-moz-animation:fadeInUp2 0.5s ease 0.4s both;
	-ms-animation:fadeInUp2 0.5s ease 0.4s both;
	animation:fadeInUp2 0.5s ease 0.4s both;
}
.current .icon-character2 {
	-webkit-animation:fadeInUp2 0.5s ease 0.5s both;
	-moz-animation:fadeInUp2 0.5s ease 0.5s both;
	-ms-animation:fadeInUp2 0.5s ease 0.5s both;
	animation:fadeInUp2 0.5s ease 0.5s both;
}
.current .icon-character3 {
	-webkit-animation:fadeInUp2 0.5s ease 0.6s both;
	-moz-animation:fadeInUp2 0.5s ease 0.6s both;
	-ms-animation:fadeInUp2 0.5s ease 0.6s both;
	animation:fadeInUp2 0.5s ease 0.6s both;
}
.current .icon-character4 {
	-webkit-animation:fadeInLeft 0.5s ease 0.7s both;
	-moz-animation:fadeInLeft 0.5s ease 0.7s both;
	-ms-animation:fadeInLeft 0.5s ease 0.7s both;
	animation:fadeInLeft 0.5s ease 0.7s both;
}
.current .icon-character5 {
	-webkit-animation:fadeInLeft 0.5s ease 0.8s both;
	-moz-animation:fadeInLeft 0.5s ease 0.8s both;
	-ms-animation:fadeInLeft 0.5s ease 0.8s both;
	animation:fadeInLeft 0.5s ease 0.8s both;
}
.current .icon-shine {
	-webkit-animation:fadeIn 0.5s ease 0.2s both;
	-moz-animation:fadeIn 0.5s ease 0.2s both;
	-ms-animation:fadeIn 0.5s ease 0.2s both;
	animation:fadeIn 0.5s ease 0.2s both;
}
.current .icon-car {
	-webkit-animation:fadeInLeft 0.8s ease 1.2s both;
	-moz-animation:fadeInLeft 0.8s ease 1.2s both;
	-ms-animation:fadeInLeft 0.8s ease 1.2s both;
	animation:fadeInLeft 0.8s ease 1.2s both;
}
.current .icon-flame {
	-webkit-animation:fadeIn 0.5s ease 1s both;
	-moz-animation:fadeIn 0.5s ease 1s both;
	-ms-animation:fadeIn 0.5s ease 1s both;
	animation:fadeIn 0.5s ease 1s both;
}
.current .light {
	-webkit-animation:fadeIn 0.8s ease 1.2s both;
	-moz-animation:fadeIn 0.8s ease 1.2s both;
	-ms-animation:fadeIn 0.8s ease 1.2s both;
	animation:fadeIn 0.8s ease 1.2s both;
}
/**第四屏**/
.current .figure2-list {
	-webkit-animation:rotateAndZoomOut 0.8s ease both;
	-moz-animation:rotateAndZoomOut 0.8s ease both;
	-ms-animation:rotateAndZoomOut 0.8s ease both;
	animation:rotateAndZoomOut 0.8s ease both;
}
.current .icon-watch, .current .icon-shoe, .current .icon-bag, .current .icon-hat {
	-webkit-animation:randomMove1 5s linear infinite;
	-moz-animation:randomMove1 5s linear infinite;
	-ms-animation:randomMove1 5s linear infinite;
	animation:randomMove1 5s linear infinite;
}
.current .icon-headset, .current .icon-glasses, .current .icon-perfume, .current .icon-dress {
	-webkit-animation:randomMove2 5s linear infinite;
	-moz-animation:randomMove2 5s linear infinite;
	-ms-animation:randomMove2 5s linear infinite;
	animation:randomMove2 5s linear infinite;
}
/**第五屏**/
.current .icon-bird {
	-webkit-animation:fadeInUp2 0.8s ease 0.5s both;
	-moz-animation:fadeInUp2 0.8s ease 0.5s both;
	-ms-animation:fadeInUp2 0.8s ease 0.5s both;
	animation:fadeInUp2 0.8s ease 0.5s both;
}
.current .icon-babyq {
	-webkit-animation:bounceInRight 0.8s ease 0.1s both;
	-moz-animation:bounceInRight 0.8s ease 0.1s both;
	-ms-animation:bounceInRight 0.8s ease 0.1s both;
	animation:bounceInRight 0.8s ease 0.1s both;
}
.current .icon-bear {
	-webkit-animation:bounceInLeft 0.8s ease both;
	-moz-animation:bounceInLeft 0.8s ease both;
	-ms-animation:bounceInLeft 0.8s ease both;
	animation:bounceInLeft 0.8s ease both;
}
.current .icon-qana {
	-webkit-animation:bounceInLeft 0.8s ease 0.5s both;
	-moz-animation:bounceInLeft 0.8s ease 0.5s both;
	-ms-animation:bounceInLeft 0.8s ease 0.5s both;
	animation:bounceInLeft 0.8s ease 0.5s both;
}
.current .icon-dialog1 {
	-webkit-animation:bounceIn 0.8s ease both;
	-moz-animation:bounceIn 0.8s ease both;
	-ms-animation:bounceIn 0.8s ease both;
	animation:bounceIn 0.8s ease both;
}
.current .icon-dialog2 {
	-webkit-animation:bounceIn 0.8s ease 0.5s both;
	-moz-animation:bounceIn 0.8s ease 0.5s both;
	-ms-animation:bounceIn 0.8s ease 0.5s both;
	animation:bounceIn 0.8s ease 0.5s both;
}

/***********js*********/

var slide = {
	index:1,
	scrollB:true,
	scroll:function(e){
		var e = e || window.event;
		if(!slide.scrollB) return;
		slide.scrollB = false;
		var top = [0,-834,-1654,-2433,-3251,-3550];//设置滚动高度
		var box = document.getElementById("slide");//找到滚动元素
		
		setTimeout(function(){
			//针对火狐
			if(e.detail){
				//向下滚动
				if(e.detail>0){
					slide.index++;
					if(slide.index>=6) slide.index=6;
					box.style.cssText = "-webkit-transform:translateY("+top[slide.index-1]+"px);transform:translateY("+top[slide.index-1]+"px)";
				}else{
					//向上滚动
					slide.index--;
					if(slide.index<=1) slide.index=1;
					if(slide.index==5){
						slide.index=4;
					}
					box.style.cssText = "-webkit-transform:translateY("+top[slide.index-1]+"px);transform:translateY("+top[slide.index-1]+"px)";
				}
			//除火狐之外的浏览器
			}else if(e.wheelDelta){
				//向上滚动
				if(e.wheelDelta>0){
					slide.index--;
					if(slide.index<=1) slide.index=1;
					if(slide.index==5){
						slide.index=4;
					}
					box.style.cssText = "-webkit-transform:translateY("+top[slide.index-1]+"px);transform:translateY("+top[slide.index-1]+"px)";
				}else{
					//向下滚动
					slide.index++;
					if(slide.index>=6) slide.index=6;
					box.style.cssText = "-webkit-transform:translateY("+top[slide.index-1]+"px);transform:translateY("+top[slide.index-1]+"px)";
				}
			}
			
			setTimeout(function(){
				//设置添加current
				var child = box.getElementsByTagName("section");
				var len = child.length;
				for( i in child ){
					var s = child[i].className;
					if(s && s.indexOf("current")>-1){
						s = s.replace("current","");
						child[i].className = s ;
					}
				}
				if(slide.index==6){
					slide.index=5;
				}
				//滚动到的当前区域添加current
				child[slide.index-1].className = 'sec'+slide.index+" current";
				slide.scrollB = true;
			},500);
			e.preventDefault();
		},300);
		
	},
	scrollEvent:function(){
		//判断浏览器 滚轮事件
		if(window.addEventListener){
			window.addEventListener("DOMMouseScroll",this.scroll,false);
		}
		window.onmousewheel = this.scroll;
	},
	init:function(){
		this.scrollEvent();
	}
};
slide.init();

猜你喜欢

转载自blog.csdn.net/weixin_42400955/article/details/81158795
今日推荐
周排行
成为C++高手之宏与枚举
在CAD二次开发中使用进度条
Js插件ECharts，HighCharts学习网址整理
Celery提交任务出错(on windows.)
cephfs内核客户端性能追踪
thinkphp中PHPExcel用法
EntityFramework动态组合多排序字段
汇编语言（八）实验9 根据材料编程
安装ubuntu后必须做的事情（对我而言）
JS函数式编程
每日归档
更多
2024-10-22(0)
2024-10-21(0)
2024-10-20(0)
2024-10-19(0)
2024-10-18(0)
2024-10-17(0)
2024-10-16(0)
2024-10-15(0)
2024-10-14(0)
2024-10-13(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022