@import "animation.css";

* {
  margin: 0;
  padding: 0
}

html, body {
  font-size: 100px;
  height: 100%;
}

.page0 {
  display: none;
  position: relative;
  width: 500px;
  height: 500px;
  margin: 50% auto;
  img {
    position: absolute;
    top: 21px;
    left: 70px;
    border-radius: 50%;
    width: 72%;
    height: 72%;
  }
}

//圆型进度条
.circleProgress_wrapper {
  width: 400px;
  height: 400px;
  margin: 50px auto;
  position: relative;
  border: 1px solid transparent;
  z-index: 2;
}

.wrapper {
  width: 200px;
  height: 400px;
  position: absolute;
  top: 0;
  overflow: hidden;
}

.right {
  right: 0;
}

.left {
  left: 0;
}

.circleProgress {
  width: 360px;
  height: 360px;
  border: 20px solid rgb(232, 232, 12);
  border-radius: 50%;
  position: absolute;
  top: 0;
  -webkit-transform: rotate(45deg);
}

.rightcircle {
  border-top: 20px solid green;
  border-right: 20px solid green;
  right: 0;
  -webkit-animation: circleProgressLoad_right 2s linear infinite;
}

.leftcircle {
  border-bottom: 20px solid green;
  border-left: 20px solid green;
  left: 0;
  -webkit-animation: circleProgressLoad_left 2s linear infinite;
}

@-webkit-keyframes circleProgressLoad_right {
  0% {
    border-top: 20px solid #ED1A1A;
    border-right: 20px solid #ED1A1A;
    -webkit-transform: rotate(45deg);
  }
  50% {
    border-top: 20px solid rgb(232, 232, 12);
    border-right: 20px solid rgb(232, 232, 12);
    border-left: 20px solid rgb(81, 197, 81);
    border-bottom: 20px solid rgb(81, 197, 81);
    -webkit-transform: rotate(225deg);
  }
  100% {
    border-left: 20px solid green;
    border-bottom: 20px solid green;
    -webkit-transform: rotate(225deg);
  }
}

@-webkit-keyframes circleProgressLoad_left {
  0% {
    border-bottom: 20px solid #ED1A1A;
    border-left: 20px solid #ED1A1A;
    -webkit-transform: rotate(45deg);
  }
  50% {
    border-bottom: 20px solid rgb(232, 232, 12);
    border-left: 20px solid rgb(232, 232, 12);
    border-top: 20px solid rgb(81, 197, 81);
    border-right: 20px solid rgb(81, 197, 81);
    -webkit-transform: rotate(45deg);
  }
  100% {
    border-top: 20px solid green;
    border-right: 20px solid green;
    border-bottom: 20px solid green;
    border-left: 20px solid green;
    -webkit-transform: rotate(225deg);
  }
}

@color: #fff;
.yezi {
  .yezi img {
    position: absolute;
    right: .1rem;
    bottom: .1rem;
    width: 1.6rem;
    transition: all 1s linear;
    animation: zoomIn 1s 1.5s linear 1 both;
  }
}

.bi {
  .bi img {
    position: relative;
    width: 2.5rem;
    transition: all 1s linear;
    animation: fadeInUp 1s 1s linear 1 both;
    z-index: 2;
  }
}

.p2-r {
  .p2-r {
    position: absolute;
    right: -.4rem;
    top: -1rem;
    width: 3.2rem;
    height: 4.5rem;
    background: url("../img/p2-r.png") no-repeat;
    background-size: 4.2rem;
    animation: fadeInDown 1s linear 1 both;
  }
}

.music {
  z-index: 999;
  position: fixed;
  top: .5rem;
  right: .1rem;
  img {
    width: .8rem;
  }
}
.work-title {
  .work-title{
    position: absolute;
    top: 1rem;
    left: 30%;
    color: @color;
    font-size: .48rem;
    text-align: center;
    animation: flip .8s linear;}
}
//page1
.page1 {
  position: relative;
  display: none;
  width: 100%;
  height: 11.33rem;
  background: url("../img/bg.png")  -10rem -5.5rem;
  background-size: 20rem 29rem;
  overflow: hidden;
  .bi;
  .jianliD {
    position: absolute;
    right: .5rem;
    top: .2rem;
    background: url("../img/jianli-bg.png") no-repeat;
    background-size: 2.06rem 7.55rem;
    width: 2.06rem;
    height: 7.55rem;
    transition: all 1s linear;
    animation: bounceInDown 1s linear 1 both;
  }
  .jianliD img {
    position: absolute;
    right: .45rem;
    top: 1.5rem;
    height: 2.4rem;
    width: 1rem;
  }
  .bidai img {
    position: absolute;
    left: .2rem;
    bottom: -1.5rem;
    width: 3.5rem;
    transition: all 1s linear;
    animation: bounceInUp 1s .5s linear 1 both;
  }
  .yezi;
  .gcs {
    position: absolute;
    right: 2rem;
    bottom: 2.5rem;
    color: @color;
    width: .28rem;
    padding: .05rem;
    font-size: .30rem;
    border: 5px solid gray;
    padding-left: 0.2rem;
    transition: all 1s linear;
    animation: zoomIn 1s 1s linear 1 both;
    padding-right: .18rem;
  }
  .xx {
    position: absolute;
    left: 1.5rem;
    top: 2.6rem;
    color: @color;
    width: 3rem;
    padding: .05rem;
    font-size: .28rem;
    padding-left: 0.2rem;
    div:nth-child(1) {
      position: absolute;
      width: .28rem;
      left: -.3rem;
      top: -0.8rem;
    }
    div:nth-child(2) {
      position: absolute;
      width: .28rem;
      left: .2rem;
      top: -.8rem;
    }
  }

}

.page2 {
  position: relative;
  display: none;
  width: 100%;
  height: 11.33rem;
  background: url("../img/bg.png")  -10rem -5.5rem;
  background-size: 20rem 29rem;
  overflow: hidden;
  .bi;
  .me {
    position: absolute;
    top: 1rem;
    left: 30%;
    img {
      transition: all 1s linear;
      animation: zoomInDown 1s linear;
      border-radius: 50%;
      width: 2rem;
    }
    p {
      color: #fff;
      font-size: .48rem;
      text-align: center;
      animation: lightSpeedIn 1s linear;
    }
  }
  .p2-r;
  .shouji {
    position: absolute;
    top: 4.2rem;
    left: .8rem;
    background: url("../img/photo.png") no-repeat;
    background-size: 4.6rem 7.5rem;
    width: 4.6rem;
    height: 7.5rem;
    animation: fadeInLeft 1s linear;
    line-height: .6rem;
    div {
      border-left: 3px solid #fff;
      position: relative;
      top: 1rem;
      left: .8rem;
      width: 3.4rem;
      i {
        opacity: 0;
        position: relative;
        left: -0.1rem;
        display: inline-block;
        content: "";
        width: .2rem;
        height: .2rem;
        border-radius: 50%;
        background-color: orange;
      }
      span {
        opacity: 0;
        color: #fff;
        font-size: .25rem;
        line-height: .58rem;
        height: 1.68rem;
        margin-left: -.3rem;
        padding-left: .03rem;
      }
    }
  }
  .yezi;
}

.page3 {
  position: relative;
  display: none;
  width: 100%;
  height: 11.33rem;
  background: url("../img/bg.png")  -10rem -5.5rem;
  background-size: 20rem 29rem;
  overflow: hidden;
  .bi;
  .work-title {
    position: absolute;
    top: 1rem;
    left: 30%;
    color: @color;
    font-size: .48rem;
    text-align: center;
    animation: lightSpeedIn 1s linear;
  }
  .p2-r;
  .work-experience {
    position: absolute;
    top: 3rem;
    left: -0.07rem;
    div {
      background: url("../img/work-experience-bg.png") no-repeat;
      background-size: 5.6rem 2.1rem;
      color: #fff;
      font-size: .28rem;
      margin-top: .02rem;
      padding: .2rem;
      height: 2.1rem;
      width: 4.24rem;
      padding-left: 1.1rem;
      line-height: .38rem;
      p {
        line-height: .38rem;
      }
      span {
        line-height: .38rem;
      }
    }
    div:nth-child(1) {
      float: left;
      animation: fadeInLeft 1s linear;
    }
    div:nth-child(2) {
      float: right;
      background: url("../img/work-experience-bg1.png") no-repeat;
      background-size: 5.6rem 1.9rem;
      padding-left: 0rem;
      padding-right: 1.1rem;
      animation: fadeInRight 1s linear;
      p {
        width: 100%;
        text-align: right;
        padding-left: .2rem;
      }
    }
    div:nth-child(3) {
      float: left;
      height: 2.3rem;
      background-size: 5.6rem 2.3rem;
      animation: fadeInLeft 1s linear;
    }
  }
  .yezi;
  .huochai {
    position: absolute;
    bottom: -1.4rem;
    left: .1rem;
    background: url("../img/huochai.png") no-repeat;
    background-size: 1.81rem 2.7rem;
    width: 1.81rem;
    height: 2.7rem;
    animation: fadeInUp 1.5s 1s linear 1 both;
  }
}

.page4 {
  position: relative;
  display: none;
  width: 100%;
  height: 11.33rem;
  background: url("../img/bg.png")  -10rem -5.5rem;
  background-size: 20rem 29rem;
  overflow: hidden;
  .bi;
  .work-title;
  .p2-r;
  .work-ability {
    background-color: #f0f0f0;
    position: absolute;
    top: 3rem;
    left: .8rem;
    box-shadow: silver .1rem .05rem .1rem;
    width: 4.8rem;
    border-radius: .5rem;
    div {
      float: left;
      color: #555;
      font-size: .28rem;
      margin-top: .02rem;
      padding: .3rem;
      width: 4.24rem;
      line-height: .48rem;
      p {
        line-height: .38rem;
      }
      span {
        line-height: .38rem;
      }
    }
    div:nth-child(1) {
      opacity: 0;
      float: left;
      animation: rollIn .5s linear 1 both;
    }
    div:nth-child(2) {
      opacity: 0;
      float: left;
      animation: rotateInDownRight .5s .5s linear 1 both;
    }
    div:nth-child(3) {
      opacity: 0;
      float: left;
      animation: fadeInLeft .5s 1s linear 1 both;
    }
  }
  .yezi;
  .huochai {
    position: absolute;
    bottom: -1.4rem;
    left: .1rem;
    background: url("../img/huochai.png") no-repeat;
    background-size: 1.81rem 2.7rem;
    width: 1.81rem;
    height: 2.7rem;
    animation: fadeInUp 1s 1s linear 1 both;
  }
}

.page5 {
  position: relative;
  display: none;
  width: 100%;
  height: 11.33rem;
  background: url("../img/bg.png")  -10rem -5.5rem;
  background-size: 20rem 29rem;
  overflow: hidden;
  .bi;
  .p2-r;
  .work-ability {
    position: absolute;
    top: 2rem;
    left: .8rem;
    div {
      position: absolute;
    }
    div:nth-child(1) {
      top: 0.1rem;
      left: 1.8rem;
      img {
        opacity: 0;
        width: 3.5rem;
        animation: rollIn .5s linear 1 both;
      }
    }
    div:nth-child(2) {
      top: 1rem;
      left: .5rem;
      transform: rotate(22deg);
      img {
        opacity: 0;
        width: 1.9rem;
        height: .8rem;
        animation: rotateInDownRight .5s .5s linear 1 both;
      }
    }
    div:nth-child(3) {
      top: 2rem;
      left: .5rem;
      img {
        opacity: 0;
        width: 1.8rem;
        height: .6rem;
        animation: fadeInLeft .5s 1s linear 1 both;
      }
    }
    div:nth-child(4) {
      top: 3rem;
      left: .5rem;
      img {
        opacity: 0;
        width: 2.6rem;
        height: 1rem;
        animation: fadeInLeft .5s 1s linear 1 both;
      }
    }
    div:nth-child(5) {
      top: 4rem;
      left: .5rem;
      transform: rotate(326deg);
      img {
        opacity: 0;
        width: 1.6rem;
        height: .6rem;
        animation: fadeInLeft .5s 1s linear 1 both;
      }
    }
  }
  .erweima {
    position: absolute;
    bottom: .5rem;
    left: 1.3rem;
    margin: 0 auto;
    p {
      color: @color;
      font-size: .28rem;
      text-align: center;
    }
    img {width:2rem;height: 2rem;}
    .callMe {
      font-size: .38rem;
      animation: bounce .5s linear infinite both;
    }
  }
  .yezi;
}

.pageL {
  position: relative;
  display: none;
  width: 100%;
  height: 11.33rem;
  background: url("../img/bg.png")  -10rem -5.5rem;
  background-size: 20rem 29rem;
  overflow: hidden;
  .bi;
  .p2-r;
  .work-title;
  .myProjectIntroduction {
    position: absolute;
    top: 3.5rem;
    left: .9rem;
    color: @color;
    font-size: .28rem;
    img {
      width: 4.5rem;
    }
    span{
      width: 4.9rem;
      font-size: .3rem;
      margin-bottom: .2rem;
      display: block;
    }
    p{
      width: 4.9rem;
      line-height: .5rem;
    }
  }
  .yezi;
  .huochai {
    position: absolute;
    bottom: -1.4rem;
    left: .1rem;
    background: url("../img/huochai.png") no-repeat;
    background-size: 1.81rem 2.7rem;
    width: 1.81rem;
    height: 2.7rem;
    animation: fadeInUp 1s 1s linear 1 both;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rotateInDownRight {
  from {
    opacity: 0;
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 45deg);

  }

  to {
    opacity: 1;
    transform-origin: right bottom;
    transform: none;
  }
}

@keyframes flip {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }

  50% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }

  80% {
    transform: perspective(400px) scale3d(.95, .95, .95);
    animation-timing-function: ease-in;
  }

  to {
    transform: perspective(400px);
    animation-timing-function: ease-in;
  }
}