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 动画分析构成:贝塞尔曲线画布 ...
随机推荐
- 黑马JavaScript学习一 BOM之Window对象定时器功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- poj3713 Transferring Sylla 枚举+tarjan判割点
其实就是判断是否为三连通图 三连通图指的是去掉3个点就不连通的图,但是并没有直接求三连通的算法.著名的Tarjan算法可以求解连通和割点,再枚举删除一个点就能达到三连通的目的. 先看用例2,是由用例1 ...
- win7旗舰版+caffe+vs2013+matlab2014b(无GPU版)
参考网站: http://www.cnblogs.com/njust-ycc/p/5776286.html 无法找到gpu/mxGPUArray.h: No such file or director ...
- Day03 知识点
一.单行注释与多行注释 # 用来标记不运行的程序 pycharm 快捷键 ctrl+/ 可以在程序上方 也可以在程序后面 (PEP8) 多行注释 用三引号,一般推荐三双引号来做注释. 二.数据类型 ( ...
- c语言中有关0和1的运算问题
/*有关0和1 的总结 最近做题总是混淆0 和 1 对于/ 和 %运算时候的结果怎么算 所以就上机试验了一番 结论: c语言中,0/任何数都为0 0%任何数都为0 1/任何数都为0 1%任何数都余1 ...
- vue中this.$router.push() 传参
1 params 传参 注意⚠️:patams传参 ,路径不能使用path 只能使用name,不然获取不到传的数据 this.$router.push({name: 'dispatch', para ...
- REQUIRED与REQUIRED_NEW
出处: https://blog.csdn.net/selfsojourner/article/details/74561745 spring 事务的传播行为中,有两个容易混淆的行为:REQUIRED ...
- redis的三种启动方式,个人常用第二种
redis的启动方式1.直接启动 进入redis根目录,执行命令: #加上‘&’号使redis以后台程序方式运行 1 ./redis-server & 2.通过指定配置文件启动 ...
- 对四次挥手中的TIME_WAIT状态的学习
TIME_WAIT状态不必多说 是属于四次挥手中的一种特殊状态 作用有两点简单明了 不废话 (1)可靠的实现TCP全双工连接的终止 (2)允许老的重复的.迟到的分节在网络中消逝 ...
- win10电脑的USB接口插上U盘以后不能使用？
今天刚遇到的问题 解决方法如下: 右击“我的电脑”选“属性”,打开“设备管理器”,双击“通用串行总线控制器”,双击任意一个,打开属性对话框,切换到“电源管理”选项卡,去除“允许计算机关闭这个设备以节约 ...