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 动画分析构成:贝塞尔曲线画布 ...
随机推荐
- SP263 PERIOD - Period KMP技巧
\(\color{#0066ff}{题目描述}\) 如果一个字符串S是由一个字符串T重复K次形成的,则称T是S的循环元.使K最大的字符串T称为S的最小循环元,此时的K称为最大循环次数. 现给一个给定长 ...
- linux中tomcat内存溢出
刚开始测试服务器与线上后台都不能上传10分钟以上的视频,后来只要是视频就不能上传,进入服务器查日志得到如下错误: Caused by: java.lang.OutOfMemoryError: Java ...
- Git 的简单测试
Git 简介 Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开 ...
- Solr学习笔记(3) —— SolrJ管理索引库&集群
一.什么是SolrJ solrj是访问Solr服务的java客户端,提供索引和搜索的请求方法,SolrJ通常嵌入在业务系统中,通过SolrJ的API接口操作Solr服务,如下图: 二.SolrJ的基本 ...
- ajax加载菊花loading效果
Ajax异步请求的时候,一般都会利用一个动态的gif小图片来制作一个Ajax Loading,以便增加用户体验. 这里我们可以使用Spin.js,该js脚本压缩后5k,可以不用任何图片,任何外部CSS ...
- 关于django的模板层
你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python代码之中. def current_datetime(request): now = datet ...
- Paw —— 比Postman更舒服的API利器
特点: 颜值高本地应用,流畅有收藏夹,管理请求可使用环境变量.比如用来一键切换开发环境请求和线上环境请求.即不同环境的同个接口只有host不一样,其它都是一样的,所以就把host抽离出来弄成一个环境变 ...
- 简述wcf应用
一.新建wcf 如下图:wcf可以简历俩种形式 1.库文件,就是一个类库文件,可以用windows服务或控制台开启. 2.服务应用程序,可以直接IIS上面发布. 二.库文件自动生成的类 接口类 usi ...
- hive取等分数据
%sql select t3.* from ( select t2.* ,row_number() over(partition by t2.pt order by t2.pv) as rn2 fro ...
- Gone Fishing
原题网址 代码已经写出来了,自己测试的时候没有问题,提交上去之后反馈了我一个Runtime error 一口老血啊! 找了半天还是没找到可能越界啊啥的地方 import java.util.Scan ...