首页 > 代码库 > HTML5制作新年贺春

HTML5制作新年贺春

2024-09-02 15:01:41   223人阅读

技术分享 
<!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;
     width: 15vw;
     height: 15vw; 
     border: 4px solid #ef1639;     
     border-radius: 50%;
   }
   #music > img:first-of-type{
     position: absolute;
     top: 24%;
     right: 2.5%;
     width: 28.421%;
     z-index: 1;
   }
   #music > img:last-of-type{
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
     width: 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;
      width: 100%;
      height: 100%;
   }
   /* page bg */
   
   .page > .bg{
      position: absolute;
      width: 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%;
      width: 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;
      width: 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%；
      width: 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%;
      width: 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%;
      width: 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%;
      width: 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%;
      width: 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{
      width: 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{
     width: 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{
     width: 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{
     width: 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{
      width: 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=http://www.mamicode.com/‘image/music_pointer.png‘/>"color: #0000ff">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

 

HTML5制作新年贺春


联系
我们