码迷，mamicode.com
首页 > Web开发 > 详细

HTML5制作新年贺春

时间：2017-01-30 14:00:21      阅读：463      评论：0      收藏：0      [点我收藏+]

标签：position   his   pos   asc   pat   element   www   javascrip   time   

技术分享 
<!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=‘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

 

HTML5制作新年贺春

标签：position   his   pos   asc   pat   element   www   javascrip   time   

原文地址：http://www.cnblogs.com/aliwa/p/6358067.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！