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;
     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>

时间： 2024-08-07 01:37:40

HTML5制作新年贺春的相关文章

html5制作表格

今天学了html5制作表格的方法,其中,有一些基础的用法要给大家介绍一下: 表格的基本格式 格式: <table> <tr>… <th>…</th> <th>…</th> <th>…</th> </tr> <tr> <td>…</td> <td>…</td> <td>…</td> </tr> </t

HTML5 制作广告工具4个

GOOGLE 推出的广告设计工具 web designer 生成 html5 广告. Flite 也推出类似工具 Adobe Edge是adobe公司的一款新型网页互动工具.允许设计师通过HTML5.CSS和JavaScript制作网页动画.无需Flash. 2012年创建了乐享云创科技有限公司,推出了基于HTML5的富媒体制作平台Mugeda. https://www.mugeda.com/pricing.php HTML5制作的广告一大优势是广泛的平台支持 IOS , 安卓,PC ,平板电脑

程序员用HTML5制作的爱心树表白动画

体验效果:http://keleyi.com/keleyi/phtml/html5/31.htm HTML代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <title>程序员用HTML5制作的爱心树表白动画- 柯乐义</title><base tar

利用html5制作一个时钟动画

1 <canvas id="clock" width="500" height="500" style="background-color: yellow"></canvas> 1 var clock=document.getElementById("clock"); 2 var cxt=clock.getContext("2d"); 3 function dra

HTML5制作的坦克游戏

HTML5制作的坦克游戏 本游戏是基于HTML5开发的 网页游戏,js,css辅助开发 源码如下: <!DOCTYPE html><html><head><meta charset="utf-8"/><title>坦克大战</title> </head><body onkeydown="getCommand();"><h3>坦克大战(请使用IE浏览器)<

jquery+html5制作超酷的圆盘时钟表

自己封装的一个用HTML5+jQuery写的时钟表 代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

Bootstrap+Html5制作强大的网页视频播放器

在做视频管理系统时,我们的定位是做到类似土豆视频的功能.视频管理,当然播放是必不可少的.在做这个播 放页面的时候,也研究了一下土豆的播放器,土豆用的是自己做的.但由于我们目前的技术有限,于是想着从网上找 一个现成的插件,于是开始了播放器的技术选型. 我发现了一个好的插件叫Video.js,研究了一下.基本的播放没问题,但当需要动态传参播放视频的时候,该款 播放器却很难跟着我的思路走,参数动态传不进去.如果现在去研究内部的js,改动内部代码,时间不允许.于是迫 不得已,只能另换解决方案. 搜索一番

html5制作一个时钟

试着用html5写一个时钟 记得开始这个随笔是几天前,一直保存在草稿里面,一直感觉有个东西搁在在那里,所以今天熬夜也要写完这篇博客!!!哈哈...不多说来上代码和思路. --------------------------------------------------------------------------------------------- 其实并不难,主要看你是否掌握了canvas下面几个属性:save(),restore();ratate();translate(),moveT

用Html5制作的一款数学教学程序Function Graphics(绘制函数图的程序)

最近我不仅对游戏开发感兴趣,还对函数图感兴趣,特此我开发了这个程序.以下是一些介绍和下载演示地址,喜欢的朋友可以看看: 一,产品名片 产品名:Function Graphics 版本: 0.1 开发者:Yorhom Wang 首次发行时间:2013年 4月4日 分类:教学程序 功能:画出一,二,三次函数图象 开发语言:JavaScript&HTML5 二,怎么使用 下载地址(含有源码): http://files.cnblogs.com/ducle/function_graphs.rar 在线使