HTML5+CSS3开发移动端页面
前提知识：
1、能够独立根据设计稿进行整套项目的需求、剖析及其开发；
2、对项目开发流程需要有一个基本的了解；
3、可以灵活运用切图、重构、前端的知识对项目进行灵活控制。
开发步骤之需求分析：
1、确定项目主题，确定表现的形式；
2、设计稿图层分析，多页视觉放到一个网页文档，采取视觉差特效完成分页展示；
3、音乐不跟随翻页，位置固定，播放旋转，可暂停。
开发步骤之技术分析：
1、移动端项目，采用HTML 5作为项目的结构层；
2、分析网页呈现形势，直接采用CSS 3完成网页的表现层；
3、特效分析，采用CSS3完成主要特效，采用JavaScript控制交互；
4、背景音乐直接采取JavaScript控制audio的API进行控制；
5、直接采用原生态的JavaScript控制CSS 3实现翻页效果，放弃前端框架和类库。
开发步骤之性能优化分析：
1、项目作为移动端项目，尽可能简化结构层标签；
2、尽可能少用图片，尽量直接用CSS 3控制标签完成图片效果；
3、尽可能减小文件大小，压缩图片到无损最小值；
4、减少服务器请求次数，用原生态JavaScript代替Zepto等前端框架。
切图——>重构——>前端——>优化
1、减小图片文件，背景图片采用JPG格式，其他图片采用png24透明格式；
2、小型项目，直接采用手写HTML 5+CSS 3完成；
3、采用JavaScript控制HTML 5API完成前端特效；
结构层分析
整个结构层其实就是DIV再加上HTML5中audio新元素搭建起来，唯一需要记住的就是meta标签里面属性的含义，如：
1、<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
viewport 即可视区域
width=device-width 宽度是设备屏幕的宽度（像素）；
height=device-height 高度是设备屏幕的高度（像素）；
initial-scale 初始的缩放比例；
minimum-scale 允许用户缩放到的最小比例；
maximum-scale 允许用户缩放大的最大比例；
user-scalable 用户是否可以手动缩放。
2、<meta name=”format-detection” content=”telephone=no” />
telephone=no 就禁止了把数字转化为拨号链接！
3、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
它其实是指定浏览器按某种方式渲染。添加”chrome=1“将允许站点在使用了谷歌浏览器内嵌框架（Chrome Frame）的客户端渲染，对于没有使用的，则没有任何影响。
源代码：
<!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="format-detection" content="telephone=no"/> <title>恭贺新春</title> <link rel="stylesheet" href="css/style.css" /> <script src="js/script.js" type="text/javascript"></script> </head> <body> <div class="music"> <img src="images/music_pointer.png" alt="" /> <img id="music" src="images/music_disc.png" alt="" class="play" /> </div> <div class="page" id="page1"> <div class="bg"></div> <div class="p1_lantern">点击屏幕<br>开启好运2016</div> <div class="p1_imooc"></div> <div class="p1_words">2016年慕课网新年献</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_2016"></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="audio/happynewyear.mp3" type="audio/mpeg"></source> </audio> </body> </html>
样式层分析
样式层使用了大量的position属性作为盒子的布局属性，也利用了层级（z-index）避免该显示的盒子受到遮盖。关于CSS 3则定义了许多变形（transform）的动画（keyframes），然后利用animation调用属性，需要注意是其兼容性。让我觉得新颖的是vw和vh这两个数值，后来查看网上资料得知：
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
这两个数值和%的区别就是% 是相对于父元素的大小设定的比率，而vw和vh设定的大小只和视窗大小有关，所以用来开发多种屏幕设备的应用用这个单位还是挺合适的。
源代码：
/*all tag*/ * {margin:0;padding:0;border:none;font-size:1.5625vw;font-family:"微软雅黑";} html,body{height: 100%;overflow: hidden;} .music{position:absolute;top: 3vh;right: 4vw;z-index: 5;width: 15vw;height: 15vw;border: 4px solid #ef1639;border-radius: 50%;background: #fff;} .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 ; -moz-animation: music_disc 4s linear infinite; -o-animation: music_disc 4s linear infinite; animation: music_disc 4s linear infinite; } @-webkit-keyframes music_disc{ 0%{ -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-0-keyframes music_disc{ 0%{ -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes music_disc{ 0%{ -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes music_disc{ 0%{ -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } /* page */ .page{ position: absolute; height:100%; width: 100%; } .page > .bg { position:absolute; height:100%; width:100%; z-index: -1; } /*page1*/ #page1{ display: block; } #page1 > .bg{ background: url("../images/p1_bg.jpg") no-repeat center center; background-size:100%; } #page1 > .p1_lantern { position: absolute; color: #FFFFFF; top:-3.4%; right:0; left:0; margin: auto; background: url("../images/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; -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; content:""; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 30vw; height: 30vw; background: #d60b3b; opacity: .5; border-radius: 50%; -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 alternate; -0-animation: p1_lantern .5s infinite alternate ; animation: p1_lantern .5s infinite alternate; } @-webkit-keyframes p1_lantern{ 0%{ opacity: .5; -webkit-transform: scale(.8,.8); transform: scale(.8,.8); } 100%{ opacity: 1; } } @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; margin: auto; background: url('../images/p1_imooc.png') no-repeat center center; background-size:100% ; width:27.656vw; height: 18.63vh; } #page1 > .p1_words { font-size:2.134rem; position:absolute; right: 0; bottom:48px; left: 0; text-align: center; color: #231815; } /*page2*/ #page2{ display: none; -webkit-transition: .5s; transition: .5s; } #page2.fadeOut{ opacity: .3; -webkit-transform: translate(0,-100%); transform: translate(0,-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; } @-webkit-keyframes p2_bg_loading{ 0%{opacity: 1;} 100%{opacity: 0;} } @keyframes p2_bg_loading{ 0%{opacity: 1;} 100%{opacity: 0;} } #page2 > .bg{ background: url("../images/p2_bg.jpg") no-repeat center center; background-size:100%; } #page2 > .p2_circle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: url(../images/p2_circle_outer.png) no-repeat center center; background-size:100% ; width: 59.375vw; height: 59.375vw; -webkit-animation: p2_circle_middle 1s infinite 3s alternate; -0-animation: p2_circle_middle 1s infinite 3s alternate ; animation: p2_circle_middle 1s infinite 3s alternate; } @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(-360deg); transform: rotate(-360deg); } } #page2 > .p2_circle:before{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: url(../images/p2_circle_middle.png) no-repeat center center; background-size:100% ; width: 45.625vw; height: 45.625vw; content: ""; -webkit-animation: p2_circle_middle 1s infinite 2s alternate; -0-animation: p2_circle_middle 1s infinite 2s alternate ; animation: p2_circle_middle 1s infinite 2s alternate; } @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); } } #page2 > .p2_circle:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border-radius: 50%; background: url(../images/p2_circle_inner.png) no-repeat center center; background-size:100% ; width: 39.9375vw; height: 39.9375vw; content:""; -webkit-animation: p2_circle_inner 1s infinite 1s alternate; -0-animation: p2_circle_inner 1s infinite 1s alternate ; animation: p2_circle_inner 1s infinite 1s alternate; } @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); } } #page2 > .p2_2016 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: url(../images/p2_2016.png) no-repeat center center; background-size:100% ; width: 27.5vw; height: 6.24vh; content:""; } /*page3*/ #page3{ display: none; -webkit-transition: .5s; transition: .5s; } #page3.fadeIn{ -webkit-transform: translate(0,-100%); transform: translate(0,-100%); } #page3 > .bg{ background: url("../images/p3_bg.jpg") no-repeat center center; background-size:100%; } #page3 > .p3_logo{ width: 34.6875vw; height: 6.327vh; position: absolute; top: 7.82vh; right: 0; left: 0; margin: auto; background: url(../images/p3_logo.png) no-repeat center center; background-size:100% ; } #page3 > .p3_title { width: 48.125vw; height: 50vh; position: absolute; top: 21vh; right: 0; left: 0; margin: auto; background: url(../images/p3_title.png) no-repeat center center; background-size:100% ; } #page3 > .p3_second { width: 22.8125vw; height: 41.652vh; position: absolute; top: 25.48vh; left: 3.75vw; margin: auto; background: url(../images/p3_couplet_second.png) no-repeat center center; background-size:100% ; } #page3 > .p3_first { width: 22.8125vw; height: 41.652vh; position: absolute; top: 25.48vh; right: 3.75vw; margin: auto; background: url(../images/p3_couplet_first.png) no-repeat center center; background-size:100% ; } #page3 > .p3_blessing { width: 32vw; height: 32vw; position: absolute; right: 0; left: 0; bottom: 10vh; margin: auto; border-radius: 50%; background: url(../images/p3_blessing.png) no-repeat center center; background-size:100% ; -webkit-animation: p3_blessing 2s linear infinite; -0-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); } }
行为层分析
传统的行为交互开发步骤，首先获取元素节点，接着为各个节点绑定一个监听事件
window.onload = function(){ var music = document.getElementById('music'); var audio = document.getElementsByTagName('audio')[0]; var page1 = document.getElementById('page1'); var page2 = document.getElementById('page2'); var page3 = document.getElementById('page3'); //当音乐播放完停止时候，自动停止光盘旋转效果 audio.addEventListener("ended",function(event){ music.setAttribute("class",""); },false); music.addEventListener("touchstart",function(event){ if(audio.paused){ audio.play(); this.setAttribute("class","play"); }else{ audio.pause(); this.setAttribute("class",""); } }) page1.addEventListener("touchstart",function(event){ 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 fadeIn"); },5500); },false); }
