zoukankan html css js c++ java
HTML5制作新年贺春

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<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'/>
<meta http-equiv='X-UA-Compatible' content='IE=edge, chrome=1'/>
<title>2017贺春</title>
</head>
<style>
/* all tag */
   *{
     margin: 0px;
     padding: 0px;
     border: none;
     font-size: 1.5625vw;
     font-family: 'Microsoft Yahei';
   }
   html,
   body{
     height: 100%;
     overflow: hidden;
   }
   #music{
     position: fixed;
     top: 3vw;
     right: 4vw;
     z-index: 5;
      15vw;
     height: 15vw; 
     border: 4px solid #ef1639;     
     border-radius: 50%;
   }
   #music > img:first-of-type{
     position: absolute;
     top: 24%;
     right: 2.5%;
      28.421%;
     z-index: 1;
   }
   #music > img:last-of-type{
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
      79%;
     z-index: 0;
   }
   #music > img.play{
        -webkit-animation: music_disc 4s linear infinite;
        -o-animation: music_disc 4s linear infinite;
           animation: music_disc 4s linear infinite;
        
   }
   @keyframes music_disc{
       0%{
           -webkit-transform: rotate(0deg);
           -ms-transform: rotate(0deg);
           -o-transform: rotate(0deg);
              transform: rotate(0deg);
       }
       100%{
           -webkit-transform: rotate(360deg);
           -ms-transform: rotate(360deg);
           -o-transform: rotate(360deg);
              transform: rotate(360deg);
       }
   }
   @-webkit-keyframes music_disc{
       0%{
           -webkit-transform: rotate(0deg);
           -ms-transform: rotate(0deg);
           -o-transform: rotate(0deg);
              transform: rotate(0deg);
       }
       100%{
           -webkit-transform: rotate(360deg);
           -ms-transform: rotate(360deg);
           -o-transform: rotate(360deg);
              transform: rotate(360deg);
       }
   }
   @-o-keyframes music_disc{
       0%{
           -webkit-transform: rotate(0deg);
               -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                   transform: rotate(0deg);
       }
       100%{
           -webkit-transform: rotate(360deg);
               -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                   transform: rotate(360deg);
       }
   }
   .page{
      position: absolute;
       100%;
      height: 100%;
   }
   /* page bg */
   
   .page > .bg{
      position: absolute;
       100%;
      height: 100%;      
   }
   
   /* page1 */
   #page1{
     display: block;
   }
   #page1 > .bg{
      background: url('image/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('image/p1_lantern.png') no-repeat center bottom;
      background-size: 100%;
       45vw;
      height: 71.2vh;
      font-size: 3.506rem;
      padding-top: 31vh;
      text-align: center;
      z-index:0;
      -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;
      bottom: 0;
      left: 0;
      content: '';
      margin: auto;
       30vw;
      height: 30vw;
      z-index: -1;
      background: #d60b3b;
      border-radius: 50%;
      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;
      -webkit-animation: p1_lantern .5s infinite;
      -o-animation: p1_lantern .5s infinite;
         animation: p1_lantern .5s infinite;
      
   }
   @keyframes p1_lantern{
       0%{
           opacity: .5;
           -webkit-transform: scale(.8, .8);
                   transform: scale(.8, .8);
       }
       100%{
           opacity: 1;
       }
   }
   @-webkit-keyframes p1_lantern{
       0%{
           opacity: .5;
           -webkit-transform: scale(.8, .8);
                   transform: scale(.8, .8);
       }
       100%{
           opacity: 1;
       }
   }
   @-o-keyframes p1_lantern{
       0%{
           opacity: .5;
           -webkit-transform: scale(.8, .8);
                   transform: scale(.8, .8);
       }
       100%{
           opacity: 1;
       }
   }
   #page1 > .p1_imooc{
      position: absolute;
      right: 0;
      bottom: 9vh;
      left: 0;
      background: url('image/p1_imooc.png') no-repeat center center;
      background-size: 100%；
       27.656vw;
      height: 18.63vh;
      margin: auto;
   }
   #page1 > .p1_words{
      position: absolute;
      font-size: 2.134rem;
      right: 0;
      bottom: 48px;
      left: 0;
      text-align: center;
      color: #241815;
   }
   /* page2 */
    #page2{
     display: none;
     -webkit-transition: .5s;
             transition: .5s;
   }
   .fadeOut{
         opacity: .3;
         -webkit-transform: translate(0, -100%);
         transform: translate(0, -100%);
   }
    #page2 > .bg{
      background: url('image/p2_bg.jpg') no-repeat center center;
      background-size: 100%;
   }   
   #page2 > .p2_bg_loading{ z-index: 4; background: #ef1639
          -webkit-animation: p2_bg_loading 1s linear forwards;
          animation: p2_bg_loading 1s linear forwards;          
   }
   @keyframes p2_bg_loading{
       0%{ opacity: 1;}
       100%{ opacity: 0;}
   }
   @-webkit-keyframes p2_bg_loading{
       0%{ opacity: 1;}
       100%{ opacity: 0;}
   }
   #page2 > .p2_circle{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      border-radius: 50%;
      background: url('image/p2_circle_outer.png') no-repeat center;
      background-size: 100%;
       59.375vw;
      height: 59.375vw;
     
      -webkit-animation: p2_circle_outer 1s linear 3s infinite;
      -o-animation: p2_circle_outer 1s linear 3s infinite;
         animation: p2_circle_outer 1s linear 3s infinite;
   }
   @keyframes p2_circle_outer{
      0% {
         -webkit-transform: rotate(0deg);
                 transform: rotate(0deg);
      }
      100% {
         -webkit-transform: rotate(-360deg);
                 transform: rotate(-360deg);
      }
   }
   @-webkit-keyframes p2_circle_inner{
      0%{
         -webkit-transform: rotate(0deg);
                 transform: rotate(0deg);
      }
      100%{
         -webkit-transform: rotate(-360deg);
                 transform: rotate(-360deg);
      }
   }
   @-o-keyframes p2_circle_inner{
      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;
      border-radius: 50%;
      content: '';
      background: url('image/p2_circle_middle.png') no-repeat center;
      background-size: 100%;
       45.625vw;
      height: 45.625vw;
         
      -webkit-animation: p2_circle_middle 1s linear 2s infinite;
      -o-animation: p2_circle_middle 1s linear 2s infinite;
         animation: p2_circle_middle 1s linear 2s infinite;
   }
   @keyframes p2_circle_middle{
      0% {
         -webkit-transform: rotate(0deg);
                 transform: rotate(0deg);
      }
      100% {
         -webkit-transform: rotate(-720deg);
                 transform: rotate(-720deg);
      }
   }
   @-webkit-keyframes p2_circle_inner{
      0%{
         -webkit-transform: rotate(0deg);
                 transform: rotate(0deg);
      }
      100%{
         -webkit-transform: rotate(-720deg);
                 transform: rotate(-720deg);
      }
   }
   @-o-keyframes p2_circle_inner{
      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;
      border-radius: 50%;
      content: '';
      background: url('image/p2_circle_inner.png') no-repeat center;
      background-size: 100%;
       39.9375vw;
      height: 39.9375vw;
      
      -webkit-animation: p2_circle_inner 1s linear 1s infinite;
      -o-animation: p2_circle_inner 1s linear 1s infinite;
         animation: p2_circle_inner 1s linear 1s infinite;
   }
   @keyframes p2_circle_inner{
      0% {
         -webkit-transform: rotate(0deg);
                 transform: rotate(0deg);
      }
      100% {
         -webkit-transform: rotate(-1080deg);
                 transform: rotate(-1080deg);
      }
   }
   @-webkit-keyframes p2_circle_inner{
      0%{
         -webkit-transform: rotate(0deg);
                 transform: rotate(0deg);
      }
      100%{
         -webkit-transform: rotate(-1080deg);
                 transform: rotate(-1080deg);
      }
   }
   @-o-keyframes p2_circle_inner{
      0%{
         -webkit-transform: rotate(0deg);
                 transform: rotate(0deg);
      }
      100%{
         -webkit-transform: rotate(-1080deg);
                 transform: rotate(-1080deg);
      }
   }
   #page2 > .p2_2017{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      border-radius: 50%;
      background: url('image/p2_2016.png') no-repeat center;
      background-size: 100%;
       30.5vw;
      height: 18vh;
   }
   /* page3 */
    #page3{
     display: none;
     -webkit-transition: .5s;
             transition: .5s;
   }
   .fadeInt{
      -webkit-transform: translate(0, -100%);
      -ms-transform: translate(0, -100%);
      -o-transform: translate(0, -100%);
         transform: translate(0, -100%);
   }
    #page3 > .bg{
      background: url('image/p3_bg.jpg') no-repeat center center;
      background-size: 100%;
   }
   #page3 > .p3_logo{
       34.6875vw;
      height: 6.3275vh;
      position: absolute;
      top: 12vh;
      right: 0;
      left: 0;
      margin: auto;
      background: url('image/p3_logo.png') no-repeat center;
      background-size: 100%;
   }
   #page3 > .p3_title{
      48.125vw;
     height: 50vh;
     position: absolute;
     top: 21vh;
     right: 0;
     left: 0;
     margin: auto;
     background: url('image/p3_title.png') no-repeat center;
      background-size: 100%;
   }
   #page3 > .p3_second{
      22.8125vw;
     height: 41.652vh;
     position: absolute;
     top: 25.48vh;
     left: 3.75vw;
     background: url('image/p3_couplet_second.png') no-repeat center;
      background-size: 100%;
   }
   #page3 > .p3_first{
      22.8125vw;
     height: 41.652vh;
     position: absolute;
     top: 25.48vh;
     right: 3.75vw;
     background: url('image/p3_couplet_first.png') no-repeat center;
      background-size: 100%;
   }
    #page3 > .p3_blessing{
       32vw;
      height: 32vw;
      position: absolute;
      bottom: 10vh;
      right: 0;
      left: 0;
      margin: auto;
      border-radius: 50%;
      background: url('image/p3_blessing.png') no-repeat center;
      background-size: 100%;
  
      -webkit-animation: p3_blessing 2s linear infinite;
      -o-animation: p3_blessing 2s linear infinite;
         animation: p3_blessing 2s linear infinite;
   }
   @keyframes p3_blessing{
      0% {
         -webkit-transform: rotate(0deg);
                 transform: rotate(0deg);
      }
      100% {
         -webkit-transform: rotate(360deg);
                 transform: rotate(360deg);
      }
   }
   @-webkit-keyframes p3_blessing{
      0%{
         -webkit-transform: rotate(0deg);
                 transform: rotate(0deg);
      }
      100%{
         -webkit-transform: rotate(360deg);
                 transform: rotate(360deg);
      }
   }
   @-o-keyframes p3_blessing{
      0%{
         -webkit-transform: rotate(0deg);
                 transform: rotate(0deg);
      }
      100%{
         -webkit-transform: rotate(360deg);
                 transform: rotate(360deg);
      }
   }
</style>
<body>
<div id='music'>
   <img src='image/music_pointer.png'/>
   <img class='play' id='btn' src='image/music_disc.png'/>
</div>
<div class='page' id='page1'>
   <div class='bg'></div>
   <div class='p1_lantern'>点击屏幕<br>开启好运2017</div>
   <div class='p1_imooc'></div>
   <div class='p1_words'>2017年阿里瓦新年特献</div>
</div>
<div class='page' id='page2'>
   <div class='bg p2_bg_loading'></div>
   <div class='bg'></div>
   <div class='p2_circle'></div>
   <div class='p2_2017'></div>
</div>
<div class='page' id='page3'>
   <div class='bg'></div>
   <div class='p3_logo'></div>
   <div class='p3_title'></div>
   <div class='p3_second'></div>
   <div class='p3_first'></div>
   <div class='p3_blessing'></div>
</div>
<audio autoplay='true'>
    <source src='http://www.imooc.com/activity/project/project1/audio/happynewyear.mp3' type='audio/mpeg'>
</audio>
<script type='text/javascript'>
    var page1 = document.getElementById('page1');
    var page2 = document.getElementById('page2');
    var page3 = document.getElementById('page3');
    
    var music = document.getElementById('btn');
    var audio = document.getElementsByTagName('audio')[0];
    
    audio.addEventListener('ended', function(){
         music.setAttribute('class','');
    }, false);
    //music.onclick = function(){
    //   if(audio.paused){
    //     audio.play();
    //     this.setAttribute('class','play');
    //     //this.style.animationPlayState = 'running';
    //   }else{
    //     audio.pause();
    //     this.setAttribute('class',' ');
    //     //this.style.animationPlayState = 'paused';
    //   }
       
    //}
    music.addEventListener('touchstart', function(event){
       if(audio.paused){
         audio.play();
         this.setAttribute('class','play');
       }else{
         audio.pause();
         this.setAttribute('class',' ');
       }
    }, false);
    page1.addEventListener('touchstart', function(){
          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 fadeInt');
          }, 5500);
    }, false);
</script>
</body>
</html>
View Code
效果图如下：
查看全文
相关阅读:
使用 Spring + CXF 发布 REST 服务
 在web项目中使用CXF暴露REST服务
 学习SpringMVC——从HelloWorld开始
 java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet
安装maven时JAVA_HOME的配置小问题
 java 接口的实现和继承关系
 servlet的两种配置方式
 C# MainWindowHandle为0的解决方法
 C# WindowsMediaPlayer 的一些用法
 C# 获取MP3信息
原文地址：https://www.cnblogs.com/aliwa/p/6358067.html