<big id="n3dbt"><strong id="n3dbt"></strong></big>
      1. <small id="n3dbt"><delect id="n3dbt"></delect></small>

        <thead id="n3dbt"><ruby id="n3dbt"><rp id="n3dbt"></rp></ruby></thead>
        <th id="n3dbt"></th>
        <span id="n3dbt"></span><span id="n3dbt"></span><span id="n3dbt"></span><strike id="n3dbt"></strike>

        建站百科Website News

        當前位置:首頁 »帶你玩轉HTML5動效頁面(一)

        帶你玩轉HTML5動效頁面(一)

        至成科技 2015-05-03 訪問量(1480) 評論(0)
        摘要:
        play-with-html5-animation-1

        四月份較有技術含量的干貨!今天騰訊前端TQ同學來來談談一些動畫設計的小技巧,能幫你在短時間沒動畫靈感時瞬間讓頁面增色,同時也會談及移動端H5頁面的優化細節與關鍵點 >>>

        作為一名前端,在拿到設計稿時你有兩種選擇:

        1.快速輸出靜態頁面
        2.加上高級大氣上檔次狂拽炫酷屌炸天的動畫讓頁面動起來

        作為一個有志向的前端,當然是選2啦!可是需求時間又很短很短,怎么辦呢?

        這次就來談談一些動畫設計的小技巧,能在你時間不多又沒有動畫想法的時候瞬間讓頁面增色不少。

        cover2-01

        同時也會談及移動端H5頁面的優化細節與關鍵點,因此本文章將分為動效篇和優化篇。

        (1) CSS3時序錯開漸顯動畫

        這是一種比較常用的動畫,它的優點是節奏感強,做法就是先讓每個元素隱藏,然后當頁面呈現后每個元素錯開時間出現。
        例子(忽略兼容前綴和無關屬性):

        玩轉HTML5移動頁面(動效篇)
        玩轉HTML5移動頁面(動效篇)

        效果就是兩個元素分別從上面掉下來,這里有個小細節(keyframes),為了讓掉下來的動畫生動點,應該是在90%的時候先掉下一點點,然后瞬間在100%時回跳5px。

        還有個細節,安卓2.3.*不能良好支持-webkit-animation-fill-mode,也就是漸變動畫不能停止在較后一幀。有這樣一個解決方案:

        1.用Modernizr去檢測是否支持這個屬性,加上識別類.no-animation-fill-mode;

        2.根據識別類采取以下措施:

        (1)用js模擬同樣效果;
        (2)用css屏蔽掉動畫;
        (3)或者直接全部都用transition來做(不要keyframes)。

        示例頁面如下(查看DEMO):

        20150326222456182

        (2) CSS3細節強調動畫

        一些局部細節如果還是漸現顯示,會枯燥沒什么感覺,例如標題、按鈕等,需要一種強調。

        分兩種情況:

        1.如果時間允許的話,基本做法是先把一個元素切成不同的塊狀,例如小人的手腳都切成不同圖片,然后讓它們重新組合,再通過賦予不同的CSS動畫來讓它生動起來,這里引用個webank的例子:

        玩轉HTML5移動頁面(動效篇)

        (查看DEMO)

        2.如果時間緊湊,又不像桑尼一樣擅長于動畫細節,可以使用一些輔助工具:

        Animate.css,通過直接預覽選擇想要的動效,然后下載它的CSS把對應的keyframe扒下來就好了(引用整個CSS是資源浪費)。

        (3)SVG動畫

        SVG技術越來越不陌生,使用門檻也漸漸降0,而且SVG動畫還可以使用CSS控制。

        先看個生日頁面,是個SVG的蛋糕:

        玩轉HTML5移動頁面(動效篇)

        (查看DEMO)

        可見SVG是很強大的!彌補了CSS3的不足。

        然而這種動畫也是略耗時,但有一種比較常用的,就是線條的描繪動畫,CSS3比較難實現,這里可以用SVG,看圖:

        玩轉HTML5移動頁面(動效篇)

        以上內容由至成科技(西安網站建設,西安網站設計,西安網站制作)為您提供,更多精彩內容:http://www.vxdmg.com/

        關注“至成科技”微信公眾號,快速獲取互聯網較新資訊

        網友評論

        登錄后可評論,請登錄

        全部評論:0條

        掃描左側二維碼
        關注至成微信公眾號

        西安至成信息科技有限公司  Copyright 2012-2019  xazcit.com  All rights reserved.

        Email:[email protected]     郵政編碼:710016     《中華人民共和國增值電信業務經營許可證》陜B1.B2-20140011     陜ICP備12008874號-1

        聯系地址:西安市經開區鳳城四路西安國際企業中心B座23層06-10室    售前咨詢熱線:029-89390727    售后服務電話:029-89393039

        西安網站建設、網站設計制作公司-至成科技,已為眾多企業提供網站建設網站制作響應式網站設計手機網站建設虛擬主機云主機服務器租用等建站解決方案。

        網絡警察 12321垃圾信息舉報 不良信息舉報 中國文明網 西安工商
        ×
        安徽25选5计划 35选7头奖几率 内蒙古11选5基本走势 广西快乐双彩开奖 德州扑克和梭哈的区别 北京快3和值跨度图 湖南体彩顶呱刮 河南22选5开奖结果查询204期 快乐十分开奖实时 竟彩竟彩计算器胜平负 推牌九绝技视频 大头十三水 蓝球走势图 劲料 七星彩走势图表带坐标连线图标 七星彩走势图表