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 动画分析构成:贝塞尔曲线画布 ...

随机推荐

memcache_helper
class memcache_helper extends memcache { private $host = "127.0.0.1"; private $port = &quo ...
jvm与tomcat启动优化配置
JVM 优化 Java 的内存模型分为: Young,年轻代(易被 GC).Young 区被划分为三部分,Eden 区和两个大小严格相同的 Survivor 区,其中 Survivor 区间中,某一时 ...
第一册：lesson 125.
原文: Tea for two. question:Does Susan have tea by herself? Can't you come in and have tea now Piter? ...
取消 windows2008 server 禁ping
windows 2008 server 默认是禁ping的,取消方法如下: 依次打开: 服务器管理器——配置——高级安全windows防火墙——入站规则找到“文件和打印机共享(回显请求-ICMPv4 ...
2015苏州大学ACM-ICPC集训队选拔赛（2）1004
草爷要的数 Problem Description 今天校队队员们准备放松一下,我们队就准备选一些数字玩,然而每个人喜欢的数字是不同的,刻盘喜欢x(1<=x<=1^9),凯凯喜欢y(1&l ...
编译安装libimobiledevice
在windows上大家可以使用iTunes来与iPhone进行通信,但是Linux上没有这类的官方软件,所以一些爱好者就破解了iTunes的通信协议,然后在Linux上实现了该协议,也就是libimo ...
my19_mysql 多线程备份恢复工具mydumper
mydumper适合库中有大表且CPU个数较多的场景,多用于恢复从库或单个实例推荐用法**************************** mydumper -u automng -p root ...
vue.js请求数据（axios）
使用npm安装axios npm install axios --save 在main.js中引入axios import axios from "axios"; 注册axios到 ...
android 闹钟设置问题
Android开发中,alarmManager在5.0以上系统,启动时间设置无效的问题做一个app,需要后台保持发送心跳包.由于锁屏后CPU休眠,导致心跳包线程被挂起,所以尝试使用alarmMana ...
不要滥用SharedPreference
SharedPreference是Android上一种非常易用的轻量级存储方式,由于其API及其友好,得到了很多很多开发者的青睐.但是,SharedPreference并不是万能的,如果把它用在不合适 ...

HTML5制作新年贺春

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

随机推荐

热门专题