mini_read_space_front/happyphoto/qingrenjie2020/qingrenjie2020.wxss

/* temp1/qingrenjie2020/qingrenjie2020.wxss */
#container view,
#container image {
  position: absolute
}

#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden
}

.bg {
  width: 100%;
  height: 100%
}

.noshow {
  opacity: 0
}

#bg1 {
  background: url('https://s2.kagirl.cn/template/pic/qingrenjie2020/bg.png') no-repeat
}

.block {
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-transform-style: preserve-3d;
  perspective: 4200px
}

.page_block {
  opacity: 0;
  width: 80%;
  height: 100%;
  left: 10%;
  top: 10%;
  /* transform: translate(50%, 50%); */
}

.page_ctn {
  top: -100rpx;
  width: 100%;
  height: 100rpx;
}

.page_word {
  opacity: 0;
  bottom: 100px;
  width: 100%;
  height: 50px;
}

.page {
  width: 100%;
  height: 100%;
  border: 10px solid #fa5d7c;
}

.wordspan {
  font-size: 26px;
  color: #fff;
  left: 0;
  width: 230px;
  height: 100px;
  vertical-align: middle;
  line-height: 30px;
  text-align: center;
  text-shadow: 2px 2px 2px #e52446;
  letter-spacing: 2px
}

.word_block {
  opacity: 0;
  left: 150px;
  bottom: 160px;
  width: 180px;
  height: 100px;
  overflow: hidden
}

@-webkit-keyframes wordshow {
  0% {
    width: 0;
    opacity: 1
  }

  22% {
    width: 230px;
    opacity: 1
  }

  78% {
    width: 230px;
    opacity: 1
  }

  100% {
    width: 0;
    opacity: 1
  }
}

@-webkit-keyframes pageshow {
  0% {
    opacity: 0;
    -webkit-transform: translateY(500px)
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(0)
  }

  53% {
    -webkit-transform: translateY(30px)
  }

  80% {
    -webkit-transform: translateY(-10px)
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-600px)
  }
}

#fly1 {
  top: 0;
  left: 0;
  width: 120rpx;
  height: 83rpx
}

.fly1love {
  width: 90rpx;
  height: 60rpx;
  top: 60%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%)
}

.fly1left {
  width: 80rpx;
  height: 60rpx;
  top: -20rpx;
  left: -40rpx;
  -webkit-animation: flyleftshow 2s linear infinite
}

.fly1right {
  width: 80rpx;
  height: 60rpx;
  top: -20rpx;
  left: 80rpx;
  -webkit-animation: flyrightshow 2s linear infinite;
}

@-webkit-keyframes flyleftshow {

  0%,
  100% {
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: rotate(0)
  }

  50% {
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: rotate(-15deg)
  }
}

@-webkit-keyframes flyrightshow {

  0%,
  100% {
    -webkit-transform-origin: 0% 100%;
    -webkit-transform: rotate(0)
  }

  50% {
    -webkit-transform-origin: 0% 100%;
    -webkit-transform: rotate(15deg)
  }
}

.fly1line {
  width: 10rpx;
  height: 30rpx;
  bottom: -20rpx;
  left: 50%;
  -webkit-transform: translateX(-50%)
}

.fly23line {
  width: 10rpx;
  height: 30rpx;
  bottom: -20rpx;
  left: 50%;
  -webkit-transform: translateX(-50%)
}

#fly1_2 {
  top: 0;
  left: 240rpx;
  width: 120rpx;
  height: 83rpx
}

#fly1_3 {
  top: 0;
  left: 500rpx;
  width: 120rpx;
  height: 83rpx
}

#fly2 {
  top: -5rpx;
  left: 0;
  width: 120rpx;
  height: 83rpx
}

#fly2_2 {
  top: -5rpx;
  right: 0;
  width: 120rpx;
  height: 83rpx;
}

#fly3 {
  top: -5rpx;
  left: 0;
  width: 120rpx;
  height: 83rpx;
}

#fly3_2 {
  top: -5rpx;
  right: 0;
  width: 120rpx;
  height: 83rpx;
}

#top_block {
  top: -82px;
  left: 3px;
  width: 497px;
  height: 200px
}

#shanghua {
  width: 100%;
  height: 100%
}

#top1_block {
  top: -14px;
  left: -19px;
  width: 117px;
  height: 128px
}

#top1_block image {
  width: 100%;
  height: 100%;
}

#top2_block {
  top: -20px;
  left: 37px;
  width: 87px;
  height: 106px
}

#top2_block image {
  width: 100%;
  height: 100%;
}

#top3_block {
  top: -8px;
  left: 349px;
  width: 59px;
  height: 63px
}

#top3_block image {
  width: 100%;
  height: 100%;
}

#top4_block {
  top: 26px;
  left: 204px;
  width: 86px;
  height: 95px
}

#top4_block image {
  width: 100%;
  height: 100%;
}

#top5_block {
  top: 34px;
  left: 258px;
  width: 53px;
  height: 52px
}

#top5_block image {
  width: 100%;
  height: 100%;
}


#top1 {
  -webkit-animation: top2show 2s linear infinite
}

#top2 {
  -webkit-animation: top2show 2s linear infinite
}

#top3 {
  -webkit-animation: top2show 1.5s linear infinite
}

#top4 {
  -webkit-animation: top2show 1.5s linear infinite
}

#top5 {
  -webkit-animation: top2show 1.5s linear infinite
}

@-webkit-keyframes top2show {

  0%,
  100% {
    -webkit-transform-origin: 10% 0%;
    -webkit-transform: rotate(0)
  }

  50% {
    -webkit-transform-origin: 10% 0%;
    -webkit-transform: rotate(8deg)
  }
}

@-webkit-keyframes topmove {
  0% {
    -webkit-transform: translateY(-100px)
  }

  100% {
    -webkit-transform: translateY(0)
  }
}

#bottom_block {
  bottom: -50px;
  width: 100%;
  height: 236px
}

#bottom_block image {
  width: 100%;
  height: 100%;
}

#bottom2_block {
  bottom: 36px;
  left: 2px;
  width: 507px;
  height: 120px
}

#bottom2_block image {
  width: 100%;
  height: 100%;
}

#bottom2_2 {
  opacity: 0;
  left: -10px;
  top: -11px;
  -webkit-animation: bottom2_2show 4s 2s linear infinite
}

@-webkit-keyframes bottom2_2show {

  0%,
  100% {
    opacity: 0
  }

  25%,
  75% {
    opacity: 1
  }
}

@-webkit-keyframes bottomshow {
  0% {
    -webkit-transform: translateY(100px)
  }

  100% {
    -webkit-transform: translateY(0)
  }
}

#bottom3_block {
  bottom: 7px;
  left: 130px;
  width: 72px;
  height: 74px
}

#bottom3_block image {
  width: 100%;
  height: 100%;
}

#bottom3 {
  -webkit-animation: bottom3show 1.5s linear infinite
}

@-webkit-keyframes bottom3show {

  0%,
  100% {
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: rotate(0)
  }

  50% {
    -webkit-transform-origin: 100% 100%;
    -webkit-transform: rotate(10deg)
  }
}

#bottom4_block {
  bottom: 40px;
  left: 456px;
  width: 59px;
  height: 51px
}

#bottom4 {
  -webkit-animation: bottom3show 1s linear infinite
}

#love1 {
  opacity: 0;
  bottom: -55px;
  left: -8px;
  width: 202px;
  height: 180px
}

#love2 {
  opacity: 0;
  bottom: -192px;
  left: 205px;
  width: 339px;
  height: 301px
}

#love3 {
  opacity: 0;
  bottom: -50px;
  left: 385px;
  width: 107px;
  height: 95px
}

#love4 {
  opacity: 0;
  bottom: 64px;
  left: 29px;
  width: 77px;
  height: 68px
}

@-webkit-keyframes lovemove {
  0% {
    -webkit-transform: translateY(0)
  }

  2% {
    opacity: 1
  }

  98% {
    opacity: 1
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-1200px)
  }
}

#love_block {
  top: 50%;
  width: 100%;
  height: 485px;
}

#love_block image {
  width: 100%;
}

@-webkit-keyframes love_blockmove {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50%)
  }

  2% {
    opacity: 1
  }

  30% {
    -webkit-transform: translateY(-50%)
  }

  78% {
    -webkit-transform: translateY(-50%)
  }

  98% {
    opacity: 1
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-150%)
  }
}

#qbt_block {
  width: 100%;
  height: 100%
}

#qbt_block #qiubite {
  width: 180rpx;
  height: 150rpx;
}

#qbt_block #arrow {
  width: 80rpx;
  height: 50rpx;
}

@-webkit-keyframes qbt_blockshow {
  0% {
    -webkit-transform: translate(0, 0)
  }

  100% {
    -webkit-transform: translate(400px, -200px)
  }
}

#arrow {
  top: 19px;
  left: 60px
}

@-webkit-keyframes arrowshow {
  0% {
    -webkit-transform: translate(0, 0)
  }

  100% {
    -webkit-transform: translate(77px, -25px)
  }
}

#qiubite_block {
  opacity: 0;
  top: 60px;
  left: 45px;
  width: 96px;
  height: 102px
}

@-webkit-keyframes qiubite_blockshow {
  0% {
    -webkit-transform: scale(.1)
  }

  2% {
    opacity: 1
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1)
  }
}

#qiubitexin {
  opacity: 0;
  top: 55px;
  left: 231px;
  width: 30px;
  height: 26px
}

@-webkit-keyframes qiubitexinshow {
  0% {
    -webkit-transform: translateY(50px) scale(.1)
  }

  2% {
    opacity: 1
  }

  50% {
    opacity: 1;
    -webkit-transform: translateY(50px) scale(1)
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1)
  }
}

#pagetitle {
  width: 100%;
  height: 100%;
  overflow: hidden
}

@-webkit-keyframes pagetitleshow {
  0% {
    height: 0
  }

  100% {
    height: 100%
  }
}

#titlecontent {
  opacity: 1;
  top: 43%;
  left: 50%;
  height: 50%;
  font-size: 25px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  -webkit-transform: translate(-50%, -50%);
}

@-webkit-keyframes fadein {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes fadeout {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

#huaban1 {
  top: -50px;
  left: 35px;
  width: 61px;
  height: 64px;
  -webkit-animation: huaban1show 4.5s 7s linear infinite
}

#huaban2 {
  top: -38px;
  left: 133px;
  width: 56px;
  height: 56px;
  -webkit-animation: huaban2show 5.3s 8s linear infinite
}

#huaban5 {
  top: -51px;
  left: 249px;
  width: 52px;
  height: 51px;
  -webkit-animation: huaban1show 4.6s 7.4s linear infinite
}

#huaban6 {
  top: -34px;
  left: 459px;
  width: 30px;
  height: 34px;
  -webkit-animation: huaban1show 7.1s 7s linear infinite
}

#huaban7 {
  top: -54px;
  left: 38px;
  width: 51px;
  height: 52px;
  -webkit-animation: huaban2show 6.8s 7s linear infinite
}

@-webkit-keyframes huaban1show {
  0% {
    -webkit-transform: translate(0, 0) rotate(0)
  }

  100% {
    -webkit-transform: translate(-5px, 950px) rotate(180deg)
  }
}

@-webkit-keyframes huaban2show {
  0% {
    -webkit-transform: translate(0, 0) rotate(0)
  }

  100% {
    -webkit-transform: translate(20px, 980px) rotate(-150deg)
  }
}

#xin1 {
  opacity: 0;
  bottom: 70px;
  left: 50px;
  width: 23px;
  height: 21px;
  -webkit-animation: xin1show 1.5s 7.4s linear infinite
}

#xin2 {
  opacity: 0;
  bottom: 70px;
  left: 100px;
  width: 32px;
  height: 30px;
  -webkit-animation: xin2show 1.5s 7s linear infinite
}

#xin3 {
  -webkit-transform: rotate(-50deg)
}

#xin3_block {
  opacity: 0;
  bottom: 70px;
  left: 250px;
  width: 37px;
  height: 37px;
  -webkit-animation: xin1show 1.4s 7s linear infinite
}

#xin4 {
  opacity: 0;
  bottom: 70px;
  left: 340px;
  width: 15px;
  height: 14px;
  -webkit-animation: xin2show 1.5s 7.4s linear infinite
}

#xin5 {
  opacity: 0;
  bottom: 70px;
  left: 425px;
  width: 30px;
  height: 27px;
  -webkit-animation: xin2show 2s 7s linear infinite
}

@-webkit-keyframes xin1show {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0)
  }

  10% {
    opacity: 1
  }

  75% {
    opacity: 1
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(-50px, -140px)
  }
}

@-webkit-keyframes xin2show {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 0)
  }

  10% {
    opacity: 1
  }

  75% {
    opacity: 1
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(60px, -140px)
  }
}