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 动画分析构成:贝塞尔曲线画布 ...
随机推荐
- P4196 [CQOI2006]凸多边形 半平面交
\(\color{#0066ff}{题目描述}\) 逆时针给出n个凸多边形的顶点坐标,求它们交的面积.例如n=2时,两个凸多边形如下图: 则相交部分的面积为5.233. \(\color{#0066f ...
- luogu4449 于神之怒加强版(莫比乌斯反演)
link 给定n,m,k,计算\(\sum_{i=1}^n\sum_{j=1}^m\gcd(i,j)^k\)对1000000007取模的结果 多组数据,T<=2000,1<=N,M,K&l ...
- Jenkins 相关
手动下载Jenkins plugin 的地址, 下载后的是zip 文件,然后再手动修改为.hpi 文件,然后再手动上传 https://plugins.jenkins.io/
- Exadata X7来了
1.Exadata Brings In-Memory OLTP to Storage Exadata Storage Servers add a memory cache in front of Fl ...
- python 批量下载 spring 的 xsd
#coding=utf-8 import os import urllib import urllib2 import re from bs4 import BeautifulSoup # 利用 ur ...
- js 点击页面出现烟花 心形
css :1 body{width:1000px; height:500px;} input{ margin:100px; width:250px; height: 50px } 3 .Firewor ...
- 关于c++中const的基本用法
c++中的const 有点类似于c里的宏定义#define,但是似乎是在宏定义基础上的代码优化,具体我解释不清,下面主要提到的是 const 在c++中的3中基本用法: 1.指向常量的指针 例如:co ...
- 图像数据转换成db（leveldb/lmdb)文件(转)
参考网站:http://www.cnblogs.com/denny402/p/5082341.html 在深度学习的实际应用中,我们经常用到的原始数据是图片文件,如jpg,jpeg,png,tif等格 ...
- 下载，安装oracle数据库以及navicat连接数据库
一.学习时所遇问题: 1.在下载之前以为oracle不是免费的,但是后来才知道oracle对于个人学习时是免费的,可以到官网下载安装.在下载时由于要注册oracle官网,所以尝试了好几遍,才成功下载o ...
- java list分页
用list分页时会遇到一个问题:用户先选好页码,再传条件查询的时候,会导致查询的那一页有可能什么都没有.这时候我们给他当前查询的最后一页的内容会比较友好. int pageSize; //用户查询的每 ...