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>

效果图如下：

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

程序员用HTML5制作的爱心树表白动画
体验效果:http://keleyi.com/keleyi/phtml/html5/31.htm 推荐:http://hovertree.com/texiao/css3/18/ HTML代码如下: & ...
使用HTML5制作loading图
昨天发了一篇使用HTML5 canvas写的时钟的文章,今天发一篇关于使用HTML5制作loading图的文章. <!DOCTYPE html> <html> <head ...
使用HTML5制作时钟
之前看到别人用HTML5制作时钟,自己也写了一个,这是很久以前写的了,没有注释,现在自己看都晕了(注释的重要性就体现在这边了),找时间加上注释,让自己和别人都比较好理解. <!DOCTYPE h ...
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 ...
html5制作一个时钟
试着用html5写一个时钟记得开始这个随笔是几天前,一直保存在草稿里面,一直感觉有个东西搁在在那里,所以今天熬夜也要写完这篇博客!!!哈哈...不多说来上代码和思路. --------------- ...
基于html5制作3D拳击游戏源码下载
今天给大家分享一款基于HTML5实现的3d拳王游戏源码.这款实例适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览 ...
用Html5制作的一款数学教学程序Function Graphics(绘制函数图的程序)
最近我不仅对游戏开发感兴趣,还对函数图感兴趣,特此我开发了这个程序.以下是一些介绍和下载演示地址,喜欢的朋友可以看看: 一,产品名片产品名:Function Graphics 版本: 0.1 开发者 ...
google web design html5制作工具
Google 推出 Web Designer,帮助你做 HTML 5 设计的免费本地应用,支持 Windows 和 OS X 2013年10月1日感谢读者 SamRaper 的提醒. ...
分享一个利用HTML5制作的海浪效果代码
在前面简单讲述了一下HTML里的Canvas,这次根据Canvas完成了“海浪效果”(水波上升). (O(∩_∩)O哈哈哈~作者我能看这个动画看一下午) 上升水波.gif 动画分析构成:贝塞尔曲线画布 ...

随机推荐

ios swift4之kvo的使用
在swift4之前,使用kvo只需要继承NSObject 就可以了.但是swift4之后发生了变化,必须在class之前加入@objcMembers修饰,不然就没有效果了. 下面举个例子:如定义一个P ...
oracle Date format日期和月份不补0
格式化日期,日,月只有一位小数的只显示一位,不自动加0,在dd/mm 前面加上fm即可去掉前面的0 如:select to_char(t,'YYYY/fmMM/fmDD') from testdata ...
k8s安装
docker pull mirrorgooglecontainers/kube-scheduler:v1.13.3 安装docker 使用阿里的源https://mirrors.aliyun.com/ ...
complex 类
//定义一个复数类Complex,使得下面的代码能够工作. //Complex c1(3,5)//用复数3+5i初始化c1 //complex c2=4.5//用实数4.5初始化c1 //comple ...
去除IDEA报黄色/灰色的重复代码的下划波浪线
解决方法: File---->Settings
PreparedStatement是如何防止SQL注入的？
为什么在Java中PreparedStatement能够有效防止SQL注入?这可能是每个Java程序员思考过的问题. 首先我们来看下直观的现象(注:需要提前打开mysql的SQL文日志) 1. 不使用 ...
3.centos7 常用防火墙命令(转)
1.firewalld的基本使用启动: systemctl start firewalld 关闭: systemctl stop firewalld 查看状态: systemctl status f ...
标签li设为display inline-block后间距问题
在对导航栏做水平排列的时候,我们往往对li元素设为display:inline-block 目的是为了,让所有li元素并排在一起,但是遇到个问题,我们的标签之间会产生空白边距如图所示: 这样看上去, ...
OfficeControl插件的用法
项目中需要用到文档在线编辑的功能,网上找到这篇文章: http://hi.baidu.com/hurtingwings/item/bf83b6343305a94e3075a19e
前端技巧-w3c
1.使用全等===比较符 if (zeroAsAString === 0) { // 判断为false }在和null进行比较的时候,允许使用 == 比较符 2.使用 .parseInt() 的时候, ...

HTML5制作新年贺春

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

随机推荐

热门专题