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 动画分析构成:贝塞尔曲线画布 ...
随机推荐
- ELK+Filebeat 实践 Error : read tcp 192.168.0.2:48968->121.40.216.20:5044: i/o timeout
问题描述: 这是一个i/o time 的问题,一般考虑就是磁盘满的问题.以下是我遇到的具体问题: 1.Kibana页面刷新,没有新数据出来,再次刷新或者点击页面上其他地方,kibana就变成这样了: ...
- DP【洛谷P1704】 寻找最优美做题曲线
[洛谷P1704] 寻找最优美做题曲线 题目背景 nodgd是一个喜欢写程序的同学,前不久(好像还是有点久了)洛谷OJ横空出世,nodgd同学当然第一时间来到洛谷OJ刷题.于是发生了一系列有趣的事情, ...
- 一些优秀的Firefox扩展
AdBlock Plus 拦截广告. 在对付CSDN等垃圾网站时非常有用. Block Site 拦截你不想看的网站 没有知乎的一天真好... XStyle 设置自己喜欢的CSS样式(表示自己并不会用 ...
- NOIP2018初赛总结(提高组)（试题+答案+简要解析）
NOIP2018初赛总结(提高组) 更新完毕(纯手敲),如果有错误请在下面留言 单选题 T1.下列四个不同进制的数中,与其它三项数值上不相等的是 A.\((269)_{16}\) B.\((617)_ ...
- Opencv图像连通域
[摘要] 本文介绍在图像处理领域中较为常用的一种图像区域(Blob)提取的方法——连通性分析法(连通区域标记法). 文中介绍了两种常见的连通性分析的算法:1)Two-pass:2)Seed-Filli ...
- POJ1058 The Gourmet Club
题目来源:http://poj.org/problem?id=1058 题目大意:ACM城的美食俱乐部有16位成员.他们连续了当地的法国餐厅Chatrau Java来安排连续5天的晚餐.晚餐时他们每4 ...
- [PowerShell]template engine
今天讨论的是如何在Powershell里实现一个简单的Template Engine的功能. 假设模板文件的内容如下:template.tt hello $name welcome $company ...
- dedecms 的采集
http://www.360doc.com/content/14/0521/09/13870710_379547377.shtml http://www.360doc.com/content/14/0 ...
- mongodb 基础语法
参考原文:菜鸟教程 目录 一.数据库二.文档三.索引四.聚合 一.数据库 show dbs -- 查看所有数据库 use DATABASE_NAME -- 如果数据库不存在,则创建数据库,否则切换到指 ...
- SpringBoot2.0.3整合Quartz2.3.0实现定时任务
转载:https://www.cnblogs.com/ealenxie/p/9134602.html 关于别人写的quartz学习的地址:https://blog.csdn.net/lkl_csdn/ ...