1回答

• 

  quruixin

  2016-10-08 13:43:41

  *{
     margin:0;
     padding:0;
     border:none;
     font-size: 1.5625vw;
     font-family:"Microsoft Yahei";
  }
  html,
  body{
     height:100%;
     overflow: hidden;
  }
  .music {
    position:fixed;
    top:3vh;
     right:4vw;
     z-index:5;
     width:15vw;
     height:15vw;
     border:4px solid #ef1639;
     border-radius: 50%;
     background-color: #fff;
  }
  .music > img:first-of-type{
     position:absolute;
     z-index: 1;
     top:24%;
     right:2.5%;
     width:28.421%;
  }
  .music > img:last-of-type{
     position:absolute;
     z-index: 0;
     top:0;
     right:0;
     bottom:0;
     left:0;
     margin:auto;
     width:79%;
  }
  .music > img.play{
     animation:music_disc 4s linear infinite;
  }
  @keyframes music_disc {
     0%{transform: rotate(0deg);}
     100%{transform: rotate(360deg);}
  }
  
  .page{
     height:100%;
     width:100%;
     position:absolute;
  }
  .page > .bg{
     position:absolute;
     height:100%;
     width:100%;
     z-index:-1;
  }
  
  #page1{display:block;}
  #page2{display:none;}
  #page3{display:none;}
  #page1 > .bg{
     background: url(images/p1_bg.jpg) no-repeat center center;
     background-size:100%;
  }
  #page1 > .p1_lantern{
     position:absolute;
     top:-3.4%;
     right:0;
     left:0;
     margin:auto;
     color:#fff;
     background: url('images/p1_lantern.png') no-repeat center bottom;
     background-size:100%;
     width:45vw;
     height:71.2vh;
     font-size: 3.506rem;
     padding-top:31vh;
     text-align: center;
     -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
         -ms-box-sizing:border-box;
          -o-box-sizing:border-box;
             box-sizing:border-box;
  }
  #page1 > .p1_lantern:before{
     position: absolute;
     top:0;
     right:0;
     left:0;
     bottom:0;
     z-index: -1;
     content: "";
     border-radius: 50%;
     margin:auto;
     width:30vw;
     height:30vw;
     background: #d60b3b;
     opacity: .5;
     -webkit-box-shadow: 0 0 10vw 10vw #d60b3b;
        -moz-box-shadow: 0 0 10vw 10vw #d60b3b;
         -ms-box-shadow: 0 0 10vw 10vw #d60b3b;
          -o-box-shadow: 0 0 10vw 10vw #d60b3b;
             box-shadow: 0 0 10vw 10vw #d60b3b;
     animation: p1_lantern .5s infinite alternate;
  }
  @keyframes p1_lantern {
     0%{opacity:.5;transform:scale(.8,.8);}
     100%{opacity:1;}
  }
  #page1 > .p1_imooc {
     position: absolute;
     right:0;
     left:0;
     bottom:9vh;
     background: url("images/p1_imooc.png") no-repeat center center;
     background-size:100%;
     height:18.63vh;
     width:27.656vw;
     margin:auto;
  }
  #page1 > .p1_words{
     font-size:2.134rem;
     position: absolute;
     right:0;
     bottom:48px;
     left:0;
     text-align: center;
     color:#231815;
  }
  #page2{
     transition:.5s;
  }
  #page2.fadeOut{
     opacity:.3;
     transform:translate(0,-100%);
  }
  #page2 > .bg {
     background: url(images/p2_bg.jpg) no-repeat center center;
     background-size:100%;
  }
  #page2 > .p2_circle{
     position: absolute;
     top:0;
     left:0;
     right:0;
     bottom:0;
     margin:auto;
     background: url(images/p2_circle_outer.png) no-repeat center center;
     background-size: 100%;
     width:59.375vw;
     height:59.375vw;
     animation:p2_circle_outer 1s linear 3s infinite;
  }
  @keyframes p2_circle_outer {
     0%{transform:rotate(0deg);}
     100%{transform:rotate(-360deg);}
  }
  #page2 > .p2_circle:before{
     position: absolute;
     top:0;
     left:0;
     right:0;
     bottom:0;
     margin:auto;
     content: "";
     background: url(images/p2_circle_middle.png) no-repeat center center;
     background-size: 100%;
     width:45.625vw;
     height:45.625vw;
     animation:p2_circle_middle 1s linear 2s infinite;
  }
  @keyframes p2_circle_middle {
     0%{transform:rotate(0deg);}
     100%{transform:rotate(720deg);}
  }
  #page2 > .p2_circle:after{
     position: absolute;
     top:0;
     left:0;
     right:0;
     bottom:0;
     margin:auto;
     content: "";
     background: url(images/p2_circle_inner.png) no-repeat center center;
     background-size: 100%;
     width:39.937vw;
     height:39.937vw;
     animation:p2_circle_inner 1s linear 1s infinite;
  }
  @keyframes p2_circle_inner {
     0%{transform:rotate(0deg);}
     100%{transform:rotate(-1080deg);}
  }
  #page2 > .p2_2016{
     position: absolute;
     top:0;
     left:0;
     right:0;
     bottom:0;
     margin:auto;
     background: url(images/p2_2016.png) no-repeat center center;
     background-size: 100%;
     width:27.5vw;
     height:6.24vh;
  }
  #page2 > .p2_bg_loading{
     z-index:4;
     background:#ef1639;
     animation: p2_bg_loading 1s linear forwards;
  }
  @keyframes p2_bg_loading {
     0%{opacity:1;}
     100%{opacity:0;}
  }
  #page3{
     transition:.5s;
  }
  #page3.fadeIn{
     transform:translate(0,-100%);
  }
  #page3 > .bg {
     background: url(images/p3_bg.jpg) no-repeat center center;
     background-size:100%;
  }
  #page3 > .p3_logo{
     width:34.687vw;
     height:6.327vh;
     position:absolute;
     top:7.8vh;
     right:0;
     left:0;
     margin:auto;
     background: url(images/p3_logo.png) no-repeat center center;
     background-size:100%;
  }
  #page3 > .p3_title{
     width:48.125vw;
     height:50vh;
     position: absolute;
     top:21vh;
     right:0;
     left:0;
     margin:auto;
     background: url(images/p3_title.png) no-repeat center center;
     background-size:100%;
  }
  #page3 > .p3_second{
     width:22.8125vw;
     height:41.652vh;
     position: absolute;
     top:25.48vh;
     left:3.75vw;
     margin:auto;
     background: url(images/p3_couplet_second.png) no-repeat center center;
     background-size:100%;
  }
  #page3 > .p3_first{
     width:22.8125vw;
     height:41.652vh;
     position: absolute;
     top:25.48vh;
     right:3.75vw;
     margin:auto;
     background: url(images/p3_couplet_first.png) no-repeat center center;
     background-size:100%;
  }
  #page3 > .p3_blessing {
     width:32vw;
     height:32vw;
     position: absolute;
     right:0;
     bottom:10vh;
     left:0;
     margin:auto;
     border-radius:50%;
     background: url(images/p3_blessing.png) no-repeat center center;
     background-size:100%;
     animation:p3_blessing 2s linear infinite;
  }
  @keyframes p3_blessing {
     0%{transofrm:rotate(0deg);}
     100%{transofrm:rotate(360deg);}
  }

  1 0

  罗叔叔天天跑...

  谢谢大兄弟

  2016-10-20 14:08:24

  共 1 条回复 >