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="data:images/music_pointer.png" alt="" />

        <img id="music" src="data: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:;padding:;border:none;font-size:.5625vw;font-family:"微软雅黑";}

html,body{height: %;overflow: hidden;}

.music{position:absolute;top: 3vh;right: 4vw;z-index: ;width: 15vw;height: 15vw;border: 4px solid #ef1639;border-radius: %;background: #fff;}

.music > img:first-of-type{

    position: absolute;

    top: %;

    right:2.5%;

    width: 28.421%;

    z-index: ;

}

.music > img:last-of-type{

    position: absolute;

    top: ;

    right: ;

    bottom: ;

    left: ;

    margin: auto;

    width: %;

    z-index: ;

}

.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{

    %{

        -webkit-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -o-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

@--keyframes music_disc{

    %{

        -webkit-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -o-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

@-ms-keyframes music_disc{

    %{

        -webkit-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -o-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

@keyframes music_disc{

    %{

        -webkit-transform: rotate(0deg);

        -ms-transform: rotate(0deg);

        -moz-transform: rotate(0deg);

        -o-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        -moz-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

/* page */

.page{

    position: absolute;

    height:%;

    width: %;

}

.page > .bg {

    position:absolute;

    height:%;

    width:%;

    z-index: -;

}

/*page1*/

#page1{

    display: block;

}

#page1 > .bg{

    background: url("../images/p1_bg.jpg") no-repeat center center;

    background-size:%;

}

#page1 > .p1_lantern {

    position: absolute;

    color: #FFFFFF;

    top:-3.4%;

    right:;

    left:;

    margin: auto;

    background: url("../images/p1_lantern.png") no-repeat center bottom;

    background-size:%;

    width:45vw;

    height:.2vh;

    font-size:.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: -;

    top: ;

    right: ;

    bottom: ;

    left: ;

    margin: auto;

    width: 30vw;

    height: 30vw;

    background: #d60b3b;

    opacity: .;

    border-radius: %;

    -webkit-box-shadow:   10vw 10vw #d60b3b;

    -moz-box-shadow:   10vw 10vw #d60b3b;

    -ms-box-shadow:   10vw 10vw #d60b3b;

    -o-box-shadow:   10vw 10vw #d60b3b;

    box-shadow:   10vw 10vw #d60b3b;

    -webkit-animation: p1_lantern .5s infinite alternate;

    --animation: p1_lantern .5s infinite alternate ;

    animation:  p1_lantern .5s infinite alternate;

}

@-webkit-keyframes p1_lantern{

    %{

        opacity: .;

        -webkit-transform: scale(.,.);

        transform: scale(.,.);

    }

    %{

        opacity: ;

    }

}

@keyframes p1_lantern{

    %{

        opacity: .;

        -webkit-transform: scale(.,.);

        transform: scale(.,.);

    }

    %{

        opacity: ;

    }

}

#page1 > .p1_imooc {

    position: absolute;

    right: ;

    bottom:9vh;

    left: ;

    margin: auto;

    background: url('../images/p1_imooc.png') no-repeat center center;

    background-size:% ;

    width:.656vw;

    height: .63vh;

}

#page1 > .p1_words {

    font-size:.134rem;

    position:absolute;

    right: ;

    bottom:48px;

    left: ;

    text-align: center;

    color: #;

}

/*page2*/

#page2{

    display: none;

    -webkit-transition: .5s;

    transition: .5s;

}

#page2.fadeOut{

    opacity: .;

    -webkit-transform: translate(,-%);

            transform: translate(,-%);

}

#page2 >  .p2_bg_loading{

    z-index: ;

    background: #ef1639;

    -webkit-animation: p2_bg_loading 1s linear forwards;

    animation: p2_bg_loading 1s linear forwards;

}

@-webkit-keyframes p2_bg_loading{

    %{opacity: ;}

    %{opacity: ;}

}

@keyframes p2_bg_loading{

    %{opacity: ;}

    %{opacity: ;}

}

#page2 > .bg{

    background: url("../images/p2_bg.jpg") no-repeat center center;

    background-size:%;

}

#page2 > .p2_circle {

    position: absolute;

    top: ;

    right: ;

    bottom: ;

    left: ;

    margin: auto;

    background: url(../images/p2_circle_outer.png) no-repeat center center;

    background-size:% ;

    width: .375vw;

    height: .375vw;

    -webkit-animation: p2_circle_middle 1s infinite 3s alternate;

    --animation: p2_circle_middle 1s infinite 3s alternate ;

    animation:  p2_circle_middle 1s infinite 3s alternate;

}

@keyframes p2_circle_middle{

    %{

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(720deg);

        transform: rotate(720deg);

    }

}

@-webkit-keyframes p2_circle_inner{

    %{

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(-360deg);

        transform: rotate(-360deg);

    }

}

#page2 > .p2_circle:before{

        position: absolute;

    top: ;

    right: ;

    bottom: ;

    left: ;

    margin: auto;

    background: url(../images/p2_circle_middle.png) no-repeat center center;

    background-size:% ;

    width: .625vw;

    height: .625vw;

    content: "";

    -webkit-animation: p2_circle_middle 1s infinite 2s alternate;

    --animation: p2_circle_middle 1s infinite 2s alternate ;

    animation:  p2_circle_middle 1s infinite 2s alternate;

}

@keyframes p2_circle_middle{

    %{

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(720deg);

        transform: rotate(720deg);

    }

}

@-webkit-keyframes p2_circle_inner{

    %{

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(720deg);

        transform: rotate(720deg);

    }

}

#page2 > .p2_circle:after {

    position: absolute;

    top: ;

    right: ;

    bottom: ;

    left: ;

    margin: auto;

    border-radius: %;

    background: url(../images/p2_circle_inner.png) no-repeat center center;

    background-size:% ;

    width: .9375vw;

    height: .9375vw;

    content:"";

    -webkit-animation: p2_circle_inner 1s infinite 1s alternate;

    --animation: p2_circle_inner 1s infinite 1s alternate ;

    animation:  p2_circle_inner 1s infinite 1s alternate;

}

@keyframes p2_circle_inner{

    %{

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(-1080deg);

        transform: rotate(-1080deg);

    }

}

@-webkit-keyframes p2_circle_inner{

    %{

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(-1080deg);

        transform: rotate(-1080deg);

    }

}

#page2 > .p2_2016 {

    position: absolute;

    top: ;

    right: ;

    bottom: ;

    left: ;

    margin: auto;

    background: url(../images/p2_2016.png) no-repeat center center;

    background-size:% ;

    width: .5vw;

    height: .24vh;

    content:"";

}

/*page3*/

#page3{

    display: none;

    -webkit-transition: .5s;

    transition: .5s;

}

#page3.fadeIn{

    -webkit-transform: translate(,-%);

    transform: translate(,-%);

}

#page3 > .bg{

    background: url("../images/p3_bg.jpg") no-repeat center center;

    background-size:%;

}

#page3 > .p3_logo{

    width: .6875vw;

    height: .327vh;

    position: absolute;

    top: .82vh;

    right: ;

    left: ;

    margin: auto;

    background: url(../images/p3_logo.png) no-repeat center center;

    background-size:% ;

}

#page3 > .p3_title {

    width: .125vw;

    height: 50vh;

    position: absolute;

    top: 21vh;

    right: ;

    left: ;

    margin: auto;

    background: url(../images/p3_title.png) no-repeat center center;

    background-size:% ;

}

#page3 > .p3_second {

    width: .8125vw;

    height: .652vh;

    position: absolute;

    top: .48vh;

    left: .75vw;

    margin: auto;

    background: url(../images/p3_couplet_second.png) no-repeat center center;

    background-size:% ;

}

#page3 > .p3_first {

    width: .8125vw;

    height: .652vh;

    position: absolute;

    top: .48vh;

    right: .75vw;

    margin: auto;

    background: url(../images/p3_couplet_first.png) no-repeat center center;

    background-size:% ;

}

#page3 > .p3_blessing {

    width: 32vw;

    height: 32vw;

    position: absolute;

    right: ;

    left: ;

    bottom: 10vh;

    margin: auto;

    border-radius: %;

    background: url(../images/p3_blessing.png) no-repeat center center;

    background-size:% ;

    -webkit-animation: p3_blessing 2s linear infinite;

    --animation: p3_blessing 2s linear infinite ;

    animation:  p3_blessing 2s linear infinite;

}

@keyframes p3_blessing{

    %{

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

@-webkit-keyframes p3_blessing{

    %{

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);

    }

    %{

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg);

    }

}

行为层分析

传统的行为交互开发步骤，首先获取元素节点，接着为各个节点绑定一个监听事件

window.onload = function(){

    var music = document.getElementById('music');

    var audio = document.getElementsByTagName('audio')[];

    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");

        },);

    },false);

}

在线演示地址

HTML5+CSS3开发移动端页面的更多相关文章

轻松使用px为单位开发移动端页面
研究移动端页面已经有许久了,一直执着于rem来开发,不谈性能怎么样,单从工作效率上看影响了不少,首先要固定设计稿的宽度,一般都是固定在640px,然后在根据根目录的字体大小来计算出每个元素的rem的值 ...
HTML5/CSS3 第三章页面布局
页面布局 1 页面组成 2 布局相关的标签 <div></div> 定义文档中的分区或节 <span></span> 这是一个行内元素,没有任何意义 & ...
用css3解决移动端页面自适应横屏竖屏的思考
之前对于横屏的webapp做过一些尝试,可是始终不是非常好的解决方式,前段时间又接触了类似的需求,尝试了感觉更好的解决方式. 之前的方法写的博客:移动网页横竖屏兼容适应的一些体会这里举的样例还是平时 ...
HTML5/CSS3开发工具
1.谷歌Google Web Designer https://www.google.com/webdesigner/ 这个工具不能在xp上运行,可以在win7 win8上运行 http://www. ...
HTML5+css3 的开心网游戏页面
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
【移动端 Web】怎么循序渐进地开发一个移动端页面
1. 移动页面开发基础 1.1 像素——什么是像素像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...
html5/css3响应式页面开发总结
一,自适应和响应式的区别自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...
大话ASP.NET开发(第一章 html5+css3+解耦问题的探讨)
一.拉近我们的距离我想,很多人会问,如今IE6还占据颇多份额的中国,html5.css3是否还很遥远?我会很直接告诉他们:其实就在你的眼前.我们来看两个图: ...
Html5+css3+angularjs+jquery+webAPi 开发手机web（一）
前言随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛,一直想学这个,想学那个折腾下来几乎没学到什么东西.工作经验告诉我,要掌握一门技术,就需要在项目中去磨练, 所以我就准备开发一个手机端的 ...

随机推荐

MySQL授权命令grant的详细使用方法
2019-01-07 转自 https://www.cnblogs.com/crxis/p/7044582.html 本文实例,运行于 MySQL 5.0 及以上版本. MySQL 赋予用户权限命令的 ...
对java的理解
一门编程语言,分三部分. 核心语法,库,数据结构.
C运算符和表达式
C语言入门(5)——运算符与表达式版权声明:本文为博主尹成联系QQ77025077,微信18510341407原创文章,欢迎转载侵权不究. https://blog.csdn.net/yinch ...
java se系列（十一）线程
1 线程的概述进程:正在运行的程序,负责了这个程序的内存空间分配,代表了内存中的执行区域. 线程:就是在一个进程中负责一个执行路径. 多线程:就是在一个进程中多个执行路径同时执行. 图上的一键优化与 ...
python中掉过又爬出来的那些坑
一.中文是不是“字母”? 当然,看到标题你肯定想这答案是显而易见的,但是.but.问题就在这里,我也是这么想的!!!然后就被python打脸了看下面的例子: s = '你说我是字母吗' print( ...
设置开机自动运行vncserver
a. 在/etc/rc.d/rc.local文件中加入下面行 /etc/init.d/vncserver startb. 编辑/etc/sysconfig/vncservers VNCSERV ...
btn按钮事件
1.用Delegate 和 Event 来定义一个通用类来处理事件 (观察者模式) using System.Collections; using System.Collections.Generic ...
List与IList的区别
在我看一个源程序的时候看到这个例子使用了IList<T>返回类型,因为上午刚刚总结过List<T>的详细用法,突然出现了IList<T>,感觉很奇怪,于是上网搜集了 ...
(转)Systemd 入门教程：命令篇
Systemd 入门教程:命令篇原文:http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.html Systemd 入门 ...
LinuxShell脚本基础 6-case...esac的使用和通配符
1.case...esac的使用 #!/bin/bash echo "请输入编号选择不同的显示文件和目录方式:" echo "1 - 普通显示" echo & ...

HTML5+CSS3开发移动端页面

HTML5+CSS3开发移动端页面的更多相关文章

随机推荐

热门专题