@charset 'utf-8';
* {
  padding: 0;
  margin: 0;
}
ul,
li {
  list-style-type: none;
}
html,
body {
  height: 100%;
  width: 100%;
}
/*主体部分*/
.content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.content-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.content-wrap > li {
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.boy {
  width: 151px;
  height: 291px;
  background: url(../images/boy-act.png) 0 -291px no-repeat;
  position: absolute;
  left: 0;
  top: 55%;
}
/**************************************page 1**************************************************/
/* 背景图 */
.a_background {
  width: 100%;
  height: 100%;
  position: absolute;
}
.a_background_top {
  width: 100%;
  height: 71.6%;
  background-image: url(../images/a_background_top.png);
  background-size: 100% 100%;
}
.a_background_middle {
  width: 100%;
  height: 13.1%;
  background-image: url(../images/a_background_middle.png);
  background-size: 100% 100%;
}
.a_background_botton {
  width: 100%;
  height: 15.3%;
  background-image: url(../images/a_background_botton.png);
  background-size: 100% 100%;
}
/* 太阳 */
.sun {
  background: url(../images/sun.png) no-repeat;
  position: absolute;
  z-index: 1;
  top: -30px;
  height: 201px;
  width: 201px;
  right: 40%;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all 30s;
  -moz-transition: all 30s;
  -ms-transition: all 30s;
  -o-transition: all 30s;
  transition: all 30s;
}
.rotation {
  -webkit-transform: translate(-2000px, 400px);
  -moz-transform: translate(-2000px, 400px);
  -ms-transform: translate(-2000px, 400px);
  -o-transform: translate(-2000px, 400px);
  transform: translate(-2000px, 400px);
}
/* 云 */
.cloud {
  position: absolute;
  z-index: 2;
}
.cloud1 {
  width: 181px;
  height: 101px;
  left: -5%;
  top: 15%;
  background: url(../images/cloud1.png) no-repeat;
}
.cloud2 {
  width: 301px;
  height: 140px;
  right: -5%;
  background: url(../images/cloud1.png) no-repeat;
}
.cloud1Anim {
  -webkit-animation: smallCloud 30s infinite;
  -moz-animation: smallCloud 30s infinite;
  -o-animation: smallCloud 30s infinite;
  animation: smallCloud 30s infinite;
}
@-webkit-keyframes smallCloud {
  0% {
    left: -5%;
  }
  100% {
    left: 100%;
  }
}
@-moz-keyframes smallCloud {
  0% {
    left: -5%;
  }
  100% {
    left: 100%;
  }
}
@keyframes smallCloud {
  0% {
    left: -5%;
  }
  100% {
    left: 100%;
  }
}
.cloud2Anim {
  -webkit-animation: largeCloud 60s infinite;
  -moz-animation: largeCloud 60s infinite;
  -o-animation: largeCloud 60s infinite;
  animation: largeCloud 60s infinite;
}
@-webkit-keyframes largeCloud {
  0% {
    right: -5%;
  }
  100% {
    right: 100%;
  }
}
@-moz-keyframes largeCloud {
  0% {
    right: -5%;
  }
  100% {
    right: 100%;
  }
}
@keyframes largeCloud {
  0% {
    right: -5%;
  }
  100% {
    right: 100%;
  }
}
/* 暂停动画，针对animation */
.pauseWalk {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;
}
.boyOriginal {
  background-position: -150px 0px;
}
/* boy walk */
/* -------- 动画切换的方式是一帧一帧的改变,通过setp处理css sprite
    steps 函数指定了一个阶跃函数，
    第一个参数指定了时间函数中的间隔数量（必须是正整数）；
    也就是帧与帧之间的切换分为x步执行，0%~25%，这区间内按几步完成
    第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

    与linear的区别:
    首先我们先理解一下time-function属性，它是用来定义相邻帧之间切换的速率曲线，
    linear是指整个动画的平滑过渡，比如下面的例子，换成linear，效果就是小人在图片中各种过渡，这不是我们想要的效果
    steps:是将每一帧的动画分成几步完成，小人行走，肯定每一帧动画切换的时候，一步就完成
----------------     */
.slow-walk {
  -webkit-animation: person-slow 950ms infinite steps(1, start);
  -moz-animation: person-slow 950ms infinite steps(1, start);
  -o-animation: person-slow 950ms infinite steps(1, start);
  animation: person-slow 950ms infinite steps(1, start);
}
/* 普通慢走 */
@-webkit-keyframes person-slow {
  0% {
    background-position: 0px -291px;
  }
  25% {
    background-position: -602px 0px;
  }
  50% {
    background-position: -302px -291px;
  }
  75% {
    background-position: -151px -291px;
  }
  100% {
    background-position: 0px -291px;
  }
}
@-moz-keyframes person-slow {
  0% {
    background-position: 0px -291px;
  }
  25% {
    background-position: -602px 0px;
  }
  50% {
    background-position: -302px -291px;
  }
  75% {
    background-position: -151px -291px;
  }
  100% {
    background-position: 0px -291px;
  }
}
@keyframes person-slow {
  0% {
    background-position: 0px -291px;
  }
  25% {
    background-position: -602px 0px;
  }
  50% {
    background-position: -302px -291px;
  }
  75% {
    background-position: -151px -291px;
  }
  100% {
    background-position: 0px -291px;
  }
}
/**************************************page 2**************************************************/
.b_background {
  width: 100%;
  height: 100%;
  background-image: url(../images/QixiB-dark.png);
  background-size: 100% 100%;
  position: absolute;
}
.b_background_preload {
  background: url(../images/QixiB-bright.png) no-repeat -9999px -9999px;
}
.lamp-bright {
  background-image: url(../images/QixiB-bright.png);
}
.shop {
  width: 39.5%;
  height: 35.5%;
  position: absolute;
  left: 29%;
  top: 36.5%;
}
.door {
  position: absolute;
  width: 32%;
  height: 100%;
  top: 32%;
  height: 68%;
  overflow: hidden;
  left: 58.5%;
}
.door-left,
.door-right {
  width: 50%;
  height: 100%;
  position: absolute;
}
.door-left {
  left: 0%;
  background: url(../images/door-left.png);
  background-size: 100% 100%;
}
.door-right {
  left: 50%;
  background: url(../images/door-right.png);
  background-size: 100% 100%;
}
/* 拿花走路 */
.slowFlowerWalk {
  -webkit-animation: person-flower 950ms infinite steps(1, start);
  -moz-animation: person-flower 950ms infinite steps(1, start);
  -o-animation: person-flower 950ms infinite steps(1, start);
  animation: person-flower 950ms infinite steps(1, start);
}
@-webkit-keyframes person-flower {
  0% {
    background-position: -453px 0px;
  }
  25% {
    background-position: -904px 0px;
  }
  50% {
    background-position: -451px 0px;
  }
  75% {
    background-position: -753px 0px;
  }
  100% {
    background-position: -300px 0px;
  }
}
@-moz-keyframes person-flower {
  0% {
    background-position: -453px 0px;
  }
  25% {
    background-position: -904px 0px;
  }
  50% {
    background-position: -451px 0px;
  }
  75% {
    background-position: -753px 0px;
  }
  100% {
    background-position: -300px 0px;
  }
}
@keyframes person-flower {
  0% {
    background-position: -453px 0px;
  }
  25% {
    background-position: -904px 0px;
  }
  50% {
    background-position: -451px 0px;
  }
  75% {
    background-position: -753px 0px;
  }
  100% {
    background-position: -300px 0px;
  }
}
.bird {
  min-width: 91px;
  min-height: 71px;
  position: absolute;
  top: 10%;
  right: -91px;
  z-index: 2;
  background: url(../images/bird.png) -182px 0px no-repeat;
}
.bird-fly {
  -webkit-animation: birdFly 400ms infinite steps(1, start);
  -moz-animation: birdFly 400ms infinite steps(1, start);
  -o-animation: birdFly 400ms infinite steps(1, start);
  animation: birdFly 400ms infinite steps(1, start);
}
@-webkit-keyframes birdFly {
  0% {
    background-position: -182px 0px;
  }
  50% {
    background-position: 0px 0px;
  }
  75% {
    background-position: -91px 0px;
  }
  100% {
    background-position: -182px 0px;
  }
}
@-moz-keyframes birdFly {
  0% {
    background-position: -182px 0px;
  }
  50% {
    background-position: 0px 0px;
  }
  75% {
    background-position: -91px 0px;
  }
  100% {
    background-position: -182px 0px;
  }
}
@keyframes birdFly {
  0% {
    background-position: -182px 0px;
  }
  50% {
    background-position: 0px 0px;
  }
  75% {
    background-position: -91px 0px;
  }
  100% {
    background-position: -182px 0px;
  }
}
/**************************************page 3**************************************************/
.c_background {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  position: absolute;
}
.c_background_top {
  width: 100%;
  height: 71.6%;
  background-image: url(../images/c_background_top.png);
  background-size: 100% 100%;
}
.c_background_middle {
  width: 100%;
  height: 13.1%;
  background-image: url(../images/c_background_middle.png);
  background-size: 100% 100%;
}
.c_background_botton {
  width: 100%;
  height: 15.3%;
  background-image: url(../images/c_background_botton.png);
  background-size: 100% 100%;
}
/*小女孩*/
.girl {
  background: url(../images/girl.png) -755px 0 no-repeat;
  position: absolute;
  right: 40%;
  top: 37%;
  width: 151px;
  height: 291px;
}
.girl-rotate {
  -webkit-animation: girl-rotate 850ms 1 steps(1, start) forwards;
  -moz-animation: girl-rotate 850ms 1 steps(1, start) forwards;
  -o-animation: girl-rotate 850ms 1 steps(1, start) forwards;
  animation: girl-rotate 850ms 1 steps(1, start) forwards;
}
@-webkit-keyframes girl-rotate {
  0% {
    background-position: -604px 0px;
  }
  16.7% {
    background-position: -151px 0px;
  }
  33.4% {
    background-position: -906px 0px;
  }
  50.1% {
    background-position: 0px 0px;
  }
  66.8% {
    background-position: -302px 0px;
  }
  83.5% {
    background-position: -453px 0px;
  }
  100% {
    background-position: -604px 0px;
  }
}
@-moz-keyframes girl-rotate {
  0% {
    background-position: -604px 0px;
  }
  16.7% {
    background-position: -151px 0px;
  }
  33.4% {
    background-position: -906px 0px;
  }
  50.1% {
    background-position: 0px 0px;
  }
  66.8% {
    background-position: -302px 0px;
  }
  83.5% {
    background-position: -453px 0px;
  }
  100% {
    background-position: -604px 0px;
  }
}
@keyframes girl-rotate {
  0% {
    background-position: -604px 0px;
  }
  16.7% {
    background-position: -151px 0px;
  }
  33.4% {
    background-position: -906px 0px;
  }
  50.1% {
    background-position: 0px 0px;
  }
  66.8% {
    background-position: -302px 0px;
  }
  83.5% {
    background-position: -453px 0px;
  }
  100% {
    background-position: -604px 0px;
  }
}
/*桥*/
.bridge-bottom {
  position: absolute;
  width: 41%;
  height: 24%;
  left: 29.5%;
  top: 76%;
  overflow: hidden;
  /*    -webkit-transform:perspective(8px) rotateX(.8deg); */
}
/*波浪水布局*/
.water {
  width: 100%;
  height: 100%;
}
.water_1,
.water_2,
.water_3,
.water_4 {
  position: absolute;
  height: 50%;
  -webkit-animation: shake 40s alternate linear infinite;
  -moz-animation: shake 40s alternate linear infinite;
  -o-animation: shake 40s alternate linear infinite;
  animation: shake 40s alternate linear infinite;
}
.water_1 {
  width: 131px;
  height: 15px;
  top: 13%;
  left: 35%;
  background: url(../images/water.png) -261px 0px no-repeat;
}
.water_2 {
  width: 161px;
  height: 9px;
  top: 30%;
  left: 45%;
  background: url(../images/water.png) -693px 0px no-repeat;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
}
.water_3 {
  width: 261px;
  height: 29px;
  top: 50%;
  left: 15%;
  background: url(../images/water.png) 0px 0px no-repeat;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
.water_4 {
  width: 301px;
  height: 12px;
  top: 75%;
  left: 30%;
  background: url(../images/water.png) -392px 0px no-repeat;
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  animation-delay: 3s;
}
@-webkit-keyframes shake {
  0%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-30px, 0, 0);
    -moz-transform: translate3d(-30px, 0, 0);
    -ms-transform: translate3d(-30px, 0, 0);
    -o-transform: translate3d(-30px, 0, 0);
    transform: translate3d(-30px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(30px, 0, 0);
    -moz-transform: translate3d(30px, 0, 0);
    -ms-transform: translate3d(30px, 0, 0);
    -o-transform: translate3d(30px, 0, 0);
    transform: translate3d(30px, 0, 0);
  }
}
@-moz-keyframes shake {
  0%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-30px, 0, 0);
    -moz-transform: translate3d(-30px, 0, 0);
    -ms-transform: translate3d(-30px, 0, 0);
    -o-transform: translate3d(-30px, 0, 0);
    transform: translate3d(-30px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(30px, 0, 0);
    -moz-transform: translate3d(30px, 0, 0);
    -ms-transform: translate3d(30px, 0, 0);
    -o-transform: translate3d(30px, 0, 0);
    transform: translate3d(30px, 0, 0);
  }
}
@keyframes shake {
  0%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-30px, 0, 0);
    -moz-transform: translate3d(-30px, 0, 0);
    -ms-transform: translate3d(-30px, 0, 0);
    -o-transform: translate3d(-30px, 0, 0);
    transform: translate3d(-30px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(30px, 0, 0);
    -moz-transform: translate3d(30px, 0, 0);
    -ms-transform: translate3d(30px, 0, 0);
    -o-transform: translate3d(30px, 0, 0);
    transform: translate3d(30px, 0, 0);
  }
}
/*星星*/
.stars {
  width: 100%;
  height: 100%;
  position: absolute;
}
.stars > li {
  position: absolute;
  width: 30px;
  height: 31px;
  background: url(../images/stars.png) no-repeat;
  -webkit-animation: flash 5s ease-in-out infinite alternate;
  -moz-animation: flash 5s ease-in-out infinite alternate;
  -o-animation: flash 5s ease-in-out infinite alternate;
  animation: flash 5s ease-in-out infinite alternate;
}
.stars1 {
  top: 20%;
  left: 30%;
}
.stars2 {
  top: 15%;
  left: 20%;
}
.stars3 {
  top: 25%;
  left: 85%;
}
.stars4 {
  top: 30%;
  left: 70%;
}
.stars5 {
  top: 25%;
  left: 20%;
}
.stars6 {
  top: 10%;
  left: 65%;
}
@-webkit-keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@-moz-keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
/*男孩转身*/
.boy-rotate {
  -webkit-animation: boy-rotate 850ms 1 steps(1, start) forwards;
  -moz-animation: boy-rotate 850ms 1 steps(1, start) forwards;
  -o-animation: boy-rotate 850ms 1 steps(1, start) forwards;
  animation: boy-rotate 850ms 1 steps(1, start) forwards;
}
@-webkit-keyframes boy-rotate {
  0% {
    background-position: -603px -291px;
  }
  16.7% {
    background-position: -150px 0px;
  }
  33.4% {
    background-position: -453px -291px;
  }
  50.1% {
    background-position: 0px 0px;
  }
  66.8% {
    background-position: -903px -291px;
  }
  83.5% {
    background-position: -753px -291px;
  }
  100% {
    background-position: -603px -291px;
  }
}
@-moz-keyframes boy-rotate {
  0% {
    background-position: -603px -291px;
  }
  16.7% {
    background-position: -150px 0px;
  }
  33.4% {
    background-position: -453px -291px;
  }
  50.1% {
    background-position: 0px 0px;
  }
  66.8% {
    background-position: -903px -291px;
  }
  83.5% {
    background-position: -753px -291px;
  }
  100% {
    background-position: -603px -291px;
  }
}
@keyframes boy-rotate {
  0% {
    background-position: -603px -291px;
  }
  16.7% {
    background-position: -150px 0px;
  }
  33.4% {
    background-position: -453px -291px;
  }
  50.1% {
    background-position: 0px 0px;
  }
  66.8% {
    background-position: -903px -291px;
  }
  83.5% {
    background-position: -753px -291px;
  }
  100% {
    background-position: -603px -291px;
  }
}
/*logo*/
.logo {
  width: 126px;
  height: 80px;
  background: url(../images/logo.jpg) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10;
  display: none;
}
/*logo进入动画*/
.logolightSpeedIn {
  display: block;
  -webkit-animation: lightSpeedIn 1s ease-out;
  -moz-animation: lightSpeedIn 1s ease-out;
  -o-animation: lightSpeedIn 1s ease-out;
  animation: lightSpeedIn 1s ease-out;
}
@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-130deg);
    -moz-transform: translate3d(100%, 0, 0) skewX(-130deg);
    -ms-transform: translate3d(100%, 0, 0) skewX(-130deg);
    -o-transform: translate3d(100%, 0, 0) skewX(-130deg);
    transform: translate3d(100%, 0, 0) skewX(-130deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    -moz-transform: skewX(-5deg);
    -ms-transform: skewX(-5deg);
    -o-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    opacity: 1;
  }
}
@-moz-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-130deg);
    -moz-transform: translate3d(100%, 0, 0) skewX(-130deg);
    -ms-transform: translate3d(100%, 0, 0) skewX(-130deg);
    -o-transform: translate3d(100%, 0, 0) skewX(-130deg);
    transform: translate3d(100%, 0, 0) skewX(-130deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    -moz-transform: skewX(-5deg);
    -ms-transform: skewX(-5deg);
    -o-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-130deg);
    -moz-transform: translate3d(100%, 0, 0) skewX(-130deg);
    -ms-transform: translate3d(100%, 0, 0) skewX(-130deg);
    -o-transform: translate3d(100%, 0, 0) skewX(-130deg);
    transform: translate3d(100%, 0, 0) skewX(-130deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    -moz-transform: skewX(-5deg);
    -ms-transform: skewX(-5deg);
    -o-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    opacity: 1;
  }
}
/*logo颤动动画*/
.logoshake {
  -webkit-animation: logoshake 0.5s;
  -moz-animation: logoshake 0.5s;
  -o-animation: logoshake 0.5s;
  animation: logoshake 0.5s;
}
@-webkit-keyframes logoshake {
  0%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    -moz-transform: translate3d(-5px, 0, 0);
    -ms-transform: translate3d(-5px, 0, 0);
    -o-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    -moz-transform: translate3d(10px, 0, 0);
    -ms-transform: translate3d(10px, 0, 0);
    -o-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@-moz-keyframes logoshake {
  0%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    -moz-transform: translate3d(-5px, 0, 0);
    -ms-transform: translate3d(-5px, 0, 0);
    -o-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    -moz-transform: translate3d(10px, 0, 0);
    -ms-transform: translate3d(10px, 0, 0);
    -o-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes logoshake {
  0%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    -moz-transform: translate3d(-5px, 0, 0);
    -ms-transform: translate3d(-5px, 0, 0);
    -o-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    -moz-transform: translate3d(10px, 0, 0);
    -ms-transform: translate3d(10px, 0, 0);
    -o-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
/*雪花*/
.snowflake {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.snow {
  width: 41px;
  height: 41px;
  position: absolute;
  top: 11;
  z-index: 11;
  background-size: cover;
}
/*雪花转动*/
.snowRoll {
  height: 80px;
  opacity: 0;
  -webkit-animation: snow-roll 20s;
  -moz-animation: snow-roll 20s;
  -o-animation: snow-roll 20s;
  animation: snow-roll 20s;
}
@-webkit-keyframes snow-roll {
  0% {
    bottom: 100%;
  }
  50% {
    -webkit-transform: rotate(1000deg);
    -moz-transform: rotate(1000deg);
    -ms-transform: rotate(1000deg);
    -o-transform: rotate(1000deg);
    transform: rotate(1000deg);
  }
  100% {
    -webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px);
    -moz-transform: rotate(0deg) translate3d(50px, 50px, 50px);
    -ms-transform: rotate(0deg) translate3d(50px, 50px, 50px);
    -o-transform: rotate(0deg) translate3d(50px, 50px, 50px);
    transform: rotate(0deg) translate3d(50px, 50px, 50px);
  }
}
@-moz-keyframes snow-roll {
  0% {
    bottom: 100%;
  }
  50% {
    -webkit-transform: rotate(1000deg);
    -moz-transform: rotate(1000deg);
    -ms-transform: rotate(1000deg);
    -o-transform: rotate(1000deg);
    transform: rotate(1000deg);
  }
  100% {
    -webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px);
    -moz-transform: rotate(0deg) translate3d(50px, 50px, 50px);
    -ms-transform: rotate(0deg) translate3d(50px, 50px, 50px);
    -o-transform: rotate(0deg) translate3d(50px, 50px, 50px);
    transform: rotate(0deg) translate3d(50px, 50px, 50px);
  }
}
@keyframes snow-roll {
  0% {
    bottom: 100%;
  }
  50% {
    -webkit-transform: rotate(1000deg);
    -moz-transform: rotate(1000deg);
    -ms-transform: rotate(1000deg);
    -o-transform: rotate(1000deg);
    transform: rotate(1000deg);
  }
  100% {
    -webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px);
    -moz-transform: rotate(0deg) translate3d(50px, 50px, 50px);
    -ms-transform: rotate(0deg) translate3d(50px, 50px, 50px);
    -o-transform: rotate(0deg) translate3d(50px, 50px, 50px);
    transform: rotate(0deg) translate3d(50px, 50px, 50px);
  }
}