碼上快樂

相關內容    簡體    繁體

HTML5+CSS3開發移動端頁面

本文轉載自   查看原文   2017-11-13 01:37   4682 

前提知識：

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>
View Code

 

 

樣式層分析

樣式層使用了大量的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);
    }
}
View Code

 

 

行為層分析

傳統的行為交互開發步驟，首先獲取元素節點，接着為各個節點綁定一個監聽事件

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);
}
View Code

 

在線演示地址

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 HTML5+CSS3 QQ會員頁面導航 HTML5+css3 的開心網游戲頁面 HTML5+CSS3熱門活動頁面 HTML5+CSS3靜態頁面項目-BusinessTheme的總結 HTML5+CSS3靜態頁面項目-PayPaul的總結 移動端頁面開發 HTML5+CSS3從入門到精通 移動端頁面 css reset 移動端html頁面優化 HTML5+CSS3學習筆記（二） 頁面布局：HTML5新元素及其特性
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM