4回答

• 

  夕阳天使0

  2017-08-12 21:57:47

  window.onload = function(){
      var page1 = document.getElementById('page1');
      var page2 = document.getElementById('page2');
      var page3 = document.getElementById('page3');
      var music = document.getElementById('music');
      var shouba = document.getElementById('shouba');
      var audio = document.getElementsByTagName('audio')[0];
      //音乐播放停止，自动停止光盘旋转(添加监听事件)
      audio.addEventListener("enden",function(event){
          music.setAttribute("class","");
          shouba.setAttribute("class","shouba");
      },false)
      //点击音乐图标，控制音乐播放(PC端点击事件)
      // music.onclick = function(){
      //     if(audio.paused){
      //         audio.play();
      //         this.setAttribute("class","play");
      //         // this.style.animationPlayState = "running";
      //         // this.style.webkitanimationPlayState = "running";
  
      //     }else{
      //         audio.pause();    
      //         this.setAttribute("class","");                    //js方法
      //         // this.style.animationPlayState = "paused";        //css方法
      //         // this.style.webkitanimationPlayState = "paused"; //兼容ios
  
      //     }
      // }
      //点击音乐图标，控制音乐播放(手机端触摸事件)
      music.addEventListener("touchstart",function(event){
          if(audio.paused){
              audio.play();
              this.setAttribute("class","play");
              shouba.setAttribute("class","");
              // this.style.animationPlayState = "running";
              // this.style.webkitanimationPlayState = "running";
  
          }else{
              audio.pause();    
              this.setAttribute("class","");
              shouba.setAttribute("class","shouba");    //js方法
              // this.style.animationPlayState = "paused";    //css方法
              // this.style.webkitanimationPlayState = "paused"; //兼容ios
  
          }
      },false)
      //点击屏幕，开启2016好运(手机端触摸事件)
      page1.addEventListener("touchstart",function(event){
          page1.style.display = "none";
          page2.style.display = "block";
          page3.style.display = "block";
          page3.style.top     = "100%";
          setTimeout(function(){
              page2.setAttribute("class","page fadeOut");
              page3.setAttribute("class","page fadeIn");
          },5500)
      },false)
  }

  0 0
• 

  夕阳天使0

  2017-08-12 21:57:23

  *{
      margin:0;
      padding:0;
      border:0;
      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:0.5em solid #ef1639;
      border-radius:50%;
      background-color:#fff;
  }
  .music > img:nth-child(1){
      position:absolute;
      top:24%;
      right:2.5%;
      width:28.421%;
      z-index:2;
  }
  .shouba{
      -webkit-transform-origin:100% 0%;
              transform-origin:100% 0%;
      -webkit-transform:rotate(-15deg);
              transform:rotate(-15deg);
      -webkit-animation:0.5s;
              animation:0.5s;
  }
  .music > img:nth-child(2){
      position:absolute;
      top:11%;
      right:0;
      bottom:0;
      left:11%;
      margin:0;
      width:79%;
  }
  .music > img.play{
      -webkit-animation:music_disc 4s linear infinite;
              animation:music_disc 4s linear infinite;
  }
  @keyframes music_disc{
      0%{
          -webkit-transform:rotate(0deg);
                  transform:rotate(0deg);
      }
      100%{
          -webkit-transform:rotate(360deg);
                  transform:rotate(360deg);
      }
  }
  @-webkit-keyframes music_disc{
      0%{
          -webkit-transform:rotate(0deg);
                  transform:rotate(0deg);
      }
      100%{
          -webkit-transform:rotate(360deg);
                  transform:rotate(360deg);
      }
  }
  .page{
      position:absolute;
      width:100%;
      height:100%;
  }
  .page > .bg{
      position:absolute;
      width:100%;
      height:100%;
      z-index:-1;
  }
  #page1 >.bg{
      background:url("../../test/images/p1_bg.jpg") no-repeat center center;
      background-size:100%;
  }
  #page1 > .p1_lantern{
      width:45vw;
      height: 75.2vh;
      font-size:3em;
      position:absolute;
      top:-3.4%;
      right:0;
      left:0;
      color:green;
      text-align:center;
      font-weight:bold;
      margin:auto;
      background:url("../../test/images/p1_lantern.png")no-repeat center center;
      background-size:100%;
      padding-top:31vh;
      -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;
      margin:auto;
      content:"";
      width:30vw;
      height:30vw;
      background:#d60b3b;
      opacity:0.5;
      border-radius:50%;
      -webkit-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;
      -webkit-animation:p1_lantern .5s infinite alternate;
              animation:p1_lantern .5s infinite alternate;
  }
  @keyframes p1_lantern{
      0%{
          opacity:0.5;
          -webkit-transform: scale(0.8,0.8);
          transform: scale(0.8,0.8);
      }
      100%{
          opacity:1;
      }
  }
  @-webkit-keyframes p1_lantern{
      0%{
          opacity:0.5;
          -webkit-transform: scale(0.8,0.8);
          transform: scale(0.8,0.8);
      }
      100%{
          opacity:1;
      }
  }
  #page1 > .p1_imooc{
      position:absolute;
      right:0;
      bottom:9vh;
      left:0;
      background:url("../../test/images/p1_imooc.png") no-repeat center center;
      background-size:100%;
      width:27.656vw;
      height:18.63vh;
      margin:1em auto ;
  }
  #page1 > .p1_words{
      font-size:2.5em;
      position:absolute;
      right:0;
      bottom:2em;
      left:0;
      text-align:center;
      color:#231815;
  }
  #page2{
      display:none;
      -webkit-transition:0.5s;
              transition:0.5s;
  }
  #page2.fadeOut{
      opacity:0.3;
      -webkit-transform:translate(0,-100%);
              transform:translate(0,-100%);
  }
  .p2_bg_loading{
      /*z-index:4;*/
      background:#ef1639;
      -webkit-animation:p2_bg_loading 1s linear forwards;
              animation:p2_bg_loading 1s linear forwards;
  }
  @-webkit-keyframes p2_bg_loading{
      0%{opacity:0;}
      100%{opacity:1;}
  }
  @keyframes{
      0%{opacity:0;}
      100%{opacity:1;}
  }
  #page2 >.bg{
      background:url("../../test/images/p2_bg.jpg") no-repeat center center;
      background-size:100%;
  }
  #page2 > .p2_circle{
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      margin:auto;
      z-index: 3;
      background:url("../../test/images/p2_circle_outer.png") no-repeat center center;
      background-size:100%;
      width:59.375vw;
      height: 59.375vw;
      -webkit-animation:p2_circle 1s linear 3s infinite;
              animation:p2_circle 1s linear 3s infinite;
  }
  @-weikit-keyframes p2_circle{
      0%{
          -webkit-transform:rotate(0deg);
          transform:rotate(0deg);
      }
      100%{
          -webkit-transform:rotate(-360deg);
          transform:rotate(-360deg);
      }
  }
  @keyframes p2_circle{
      0%{
          -webkit-transform:rotate(0deg);
          transform:rotate(0deg);
      }
      100%{
          -webkit-transform:rotate(-360deg);
          transform:rotate(-360deg);
      }
  }
  #page2 > .p2_circle:before{
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      margin:auto;
      content: "";
      background:url("../../test/images/p2_circle_middle.png") no-repeat center center;
      background-size:100%;
      width:45.625vw;
      height:45.625vw;
      -webkit-animation:p2_circle1 1s linear 2s infinite;
              animation:p2_circle1 1s linear 2s infinite;
  }
  @-weikit-keyframes p2_circle1{
      0%{
          -webkit-transform:rotate(0deg);
          transform:rotate(0deg);
      }
      100%{
          -webkit-transform:rotate(720deg);
          transform:rotate(720deg);
      }
  }
  @keyframes p2_circle1{
      0%{
          -webkit-transform:rotate(0deg);
          transform:rotate(0deg);
      }
      100%{
          -webkit-transform:rotate(720deg);
          transform:rotate(720deg);
      }
  }
  #page2 > .p2_circle:after{
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      margin:auto;
      content: "";
      background:url("../../test/images/p2_circle_inner.png") no-repeat center center;
      background-size:100%;
      width:39.937vw;
      height:39.937vw;
      -webkit-animation:p2_circle_inner 1s linear 1s infinite;
              animation:p2_circle_inner 1s linear 1s infinite;
  }
  @-weikit-keyframes p2_circle_inner{
      0%{
          -webkit-transform:rotate(0deg);
          transform:rotate(0deg);
      }
      100%{
          -webkit-transform:rotate(-1080deg);
          transform:rotate(-1080deg);
      }
  }
  @keyframes p2_circle_inner{
      0%{
          -webkit-transform:rotate(0deg);
          transform:rotate(0deg);
      }
      100%{
          -webkit-transform:rotate(-1080deg);
          transform:rotate(-1080deg);
      }
  }
  #page2 > .p2_2016{
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      margin:auto;
      background:url("../../test/images/p2_2016.png") no-repeat center center;
      background-size:100%;
      width:27.5vw;
      height:6.24vh;
  }
  #page3{
      display:none;
      -webkit-transition: 0.5s;
              transition: 0.5s;
  }
  #page3.fadeIn{
          -webkit-transform:translate(0, -100%);
                  transform:translate(0,-100%);
  }
  #page3 >.bg{
      background:url("../../test/images/p3_bg.jpg") no-repeat center center;
      background-size:100%;
  }
  #page3 > .p3_logo{
      width:34.6875vw;
      height:6.327vh;
      position:absolute;
      top:7.82vh;
      right:0;
      left:0;
      margin:auto;
      background:url("../../test/images/p3_logo.png") no-repeat center center;
      background-size:100%;
  }
  #page3 > .p3_title{
      width:48.125vw;
      height:50vh;
      position:absolute;
      top:20.80vh;
      right:0;
      left:0;
      margin:auto;
      background:url("../../test/images/p3_title.png") no-repeat center center;
      background-size:100%;
  }
  #page3 > .p3_second{
      width:22.8125vw;
      height:41.625vh;
      position:absolute;
      top:25.48vh;
      left:3.75vw;
      background:url("../../test/images/p3_couplet_second.png") no-repeat center center;
      background-size:100%;
  }#page3 > .p3_first{
      width:22.8125vw;
      height:41.625vh;
      position:absolute;
      top:25.48vh;
      right:3.75vw;
      background:url("../../test/images/p3_couplet_first.png") no-repeat center center;
      background-size:100%;
  }
  #page3 > .p3_blessing{
      width:32vw;
      height:32vh;
      position:absolute;
      bottom:-2vh;
      right:0;
      left:0;
      margin:auto;
      border-radius:50%;
      background:url("../../test/images/p3_blessing.png") no-repeat center center;
      background-size:100%;
      -webkit-animation:p3_blessing 2s linear  infinite;
              animation:p3_blessing 2s linear  infinite;
  }
  @-weikit-keyframes p3_blessing{
      0%{
          -webkit-transform:rotate(0deg);
          transform:rotate(0deg);
      }
      100%{
          -webkit-transform:rotate(360deg);
          transform:rotate(360deg);
      }
  }
  @keyframes p3_blessing{
      0%{
          -webkit-transform:rotate(0deg);
          transform:rotate(0deg);
      }
      100%{
          -webkit-transform:rotate(360deg);
          transform:rotate(360deg);
      }
  }
  

  0 0
• 

  夕阳天使0

  2017-08-12 21:56:58

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
      <meta name="format-detecion" content="telephone=no">
      <title>贺春</title>
      <link rel="stylesheet" type="text/css" href="../test/css/index.css" />
      <script src="../test/js/audio.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
      <div>
          <img id="shouba" src="../test/images/music_pointer.png">
          <img  id="music" src="../test/images/music_disc.png">
      </div>
      <div id="page1">
          <div></div>
          <div>点击屏幕<br>开启好运2016</div>
          <div></div>
          <div>2016新春快乐</div>
      </div>
      <div class="page p2_bg_loading" id="page2">
          <div></div>
          <div></div>
          <div></div>
      </div>
      <div id="page3">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
      </div>
      <audio autoplay="true">
          <source src="Sarah.mp3" type="audio/mpeg">
      </audio>
  </body>
  </html>

  
  

  0 0
• 

  rookie_r

  2017-01-16 16:15:05

  <!DOCTYPE html>

  <!-- saved from url=(0038)http://www.imooc.com/activity/project1 -->

  <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  
  

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  <meta name="format-detection" content="telephone=no">

  <title>2016年慕课网新年特献</title>

  <link rel="stylesheet" type="text/css" href="css/style.css">

  <script src="js/script.js" type="text/javascript" charset="utf-8" async="" defer=""></script>

  </head>

  <body>

  <div id="music">

  <img class="music_disc music_play" src="img/music_disc.png">

  <img src="img/music_pointer.png">

  </div>

  <div id="page1">

  <div></div>

  <div>点击屏幕<br>开启好运2016</div>

  <div></div>

  <div>2016年慕课网新年特献</div>

  </div>

  <div id="page2">

  <div class="bg p2_bg_loading"></div>

  <div></div>

  <!--三个圈只用一个div即可。放到p2_circle类中-->

  <div id="p2_circle"></div>

  <div></div>

  </div>

  <div id="page3">

  <div></div>

  <div></div>

  <div></div>

  <!--下联-->

  <div class="p3_couplet_second couplet"></div>

  <!--上联-->

  <div class="p3_couplet_first couplet"></div>

  <!--福-->

  <div></div>

  </div>

  <audio autoplay="true">

  <source src="audio/happynewyear.mp3" type="audio/mpeg">

  </audio>

  
  

  </body></html>

  
  

  0 2