UI設(shè)計(jì)|響應(yīng)式網(wǎng)站和H5動(dòng)畫

時(shí)間：2023-09-14 19:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-14 19:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

UI設(shè)計(jì)|響應(yīng)式網(wǎng)站和H5動(dòng)畫：標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用HTML標(biāo)準(zhǔn)自1999年12月發(fā)布HTML 4.01后,后繼的HTML 5

和其他標(biāo)準(zhǔn)被束之高閣，為了推動(dòng)Web標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，一些公司聯(lián)合起來(lái)，成立了一個(gè)叫

作"Web Hypertext Application Technology Working Group（Web超文本應(yīng)用技術(shù)工作

組-WHATWG） ”的組織。

WHATWG致力于Web表單和應(yīng)用程序，而W3C [World Wide Web Consortium （萬(wàn)維網(wǎng)

聯(lián)盟）]專注于XHTML 2.0。在2006年，雙方?jīng)Q定進(jìn)行合作，來(lái)創(chuàng)建一個(gè)新版本的HTML。

HTML 5草案的前身名為Web Applications 1.0,于2004年被WHATWG提出，于2007年被

W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。

1.1 HTML5的3個(gè)優(yōu)勢(shì)

HTML5的發(fā)展史，如圖8.1所示。




1.多設(shè)備跨平臺(tái)

用HTML 5的優(yōu)點(diǎn)主要在于，這個(gè)技術(shù)可以跨平臺(tái)使用。比如你開(kāi)發(fā)了一款HTML 5的游戲，

你可以很輕易地將其移植到UC的開(kāi)放平臺(tái)、Opera的游戲中心、Facebook應(yīng)用平臺(tái)，甚至可

以通過(guò)封裝的技術(shù)發(fā)放到App Store或Google Play上，所以它的跨平臺(tái)性非常強(qiáng)大，這也是

大多數(shù)人對(duì)HTML5有興趣的主要原因。

2.自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)

很早就有人設(shè)想，能不能“一次設(shè)計(jì)，普遍適用"，讓同一張網(wǎng)頁(yè)自動(dòng)適應(yīng)不同大小的屏幕，

根據(jù)屏幕寬度，自動(dòng)調(diào)整布局（Layout）。2010年，Ethan Marcotte提出了 “自適應(yīng)網(wǎng)頁(yè)設(shè)

計(jì)"這個(gè)名詞，指可以自動(dòng)識(shí)別屏幕寬度，并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)。

這就解決了一種傳統(tǒng)的局面——網(wǎng)站為不同的設(shè)備提供不同的網(wǎng)頁(yè)，比如專門提供一個(gè)

Mobile版本，或者iPhone/iPad版本。這樣做固然保證了效果，但是比較麻煩，同時(shí)要維護(hù)好

幾個(gè)版本，而且如果一個(gè)網(wǎng)站有多個(gè)Portal （入口），會(huì)大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度。

而HTML 5的媒體查詢功能很好地解決了一套代碼、一套資源和數(shù)據(jù)庫(kù)，根據(jù)不同屏幕分辨率

響應(yīng)，輸出適配布局合理美觀的頁(yè)面。

3.即時(shí)更新

游戲客戶端每次都要更新，很麻煩；而更新HTML 5游戲就好像更新頁(yè)面一樣，即時(shí)更新。

一套代碼響應(yīng)多個(gè)分辨率。

1.2 HTML 5八大特性

1.語(yǔ)義特性(Class:Semantic)

HTML5 M予網(wǎng)頁(yè)更好的意義和結(jié)構(gòu)。

2.本地存儲(chǔ)特性(Class:Offline & Storage)

基于HTML 5開(kāi)發(fā)的網(wǎng)頁(yè)APP擁有更短的啟動(dòng)時(shí)間、更快的聯(lián)網(wǎng)速度，這些全得益于HTML 5

APP Cache,以及本地存儲(chǔ)功能。

3.設(shè)備兼容特性(Class:Device Access)

HTML 5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開(kāi)放接口。使外部應(yīng)用可以與瀏覽器內(nèi)部的數(shù)據(jù)直

接相連，例如視頻影音可直接與Microphones及攝像頭相連。

4.連接特性(Class:Connectivity)

更有效的連接工作效率，使得基于頁(yè)面的實(shí)時(shí)聊天、更快速的網(wǎng)頁(yè)游戲體驗(yàn)、更優(yōu)化的在線交

流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù)。

5.網(wǎng)頁(yè)多媒體特性(Class:Multimedia)

支持網(wǎng)頁(yè)端的Audio、Video等多媒體功能，與網(wǎng)站自帶的APPS、攝像頭、影音功能相得益

影。

6.三維、圖形及特效特性(Class:3D、Graphics&Effects)

基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會(huì)驚嘆于瀏覽器所呈現(xiàn)的驚人視覺(jué)效

果。

7.性能與集成特性(Class:Performance&lntegration)

沒(méi)有用戶會(huì)永遠(yuǎn)等待你的Loading, HTML 5會(huì)通過(guò)XMLHttpRequest2等技術(shù)，幫助開(kāi)發(fā)者的

Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速地工作。

8.CSS3 特性(Class:CSS3)

在不犧牲性能和語(yǔ)義結(jié)構(gòu)的前提下，CSS3提供了更多的風(fēng)格和更強(qiáng)的效果。此外，較之以前

的Web排版，Web的開(kāi)放字體格式(WOFF)也提供了更高的靈活性和控制性。

1.3 HTML 5的應(yīng)用及布局方式

海外HTML 5被用在響應(yīng)式網(wǎng)站，或社交網(wǎng)站廣告條及移動(dòng)設(shè)備廣告上，中國(guó)HTML 5被用在

移動(dòng)互聯(lián)網(wǎng)廣告、APP的閃屏、活動(dòng)推廣、微信、小游戲等方面。

HTML 5與傳統(tǒng)div的語(yǔ)義架構(gòu)，如圖8.2所示。

傳統(tǒng)div+CSS頁(yè)面布局方式，如圖8.3所示。










對(duì)于HTML 5布局方式，為什么我們需要網(wǎng)格布局？

在我們的Web內(nèi)容中，可以將其分割成很多個(gè)內(nèi)容塊，而這些內(nèi)容塊都占據(jù)自己的區(qū)域

（Regions）,可以將這些區(qū)域想像成一個(gè)虛擬的網(wǎng)格。網(wǎng)格布局特性主要是針對(duì)Web應(yīng)用程

序的開(kāi)發(fā)者，可以用這個(gè)模塊實(shí)現(xiàn)許多不同的布局。網(wǎng)絡(luò)布局可以將應(yīng)用程序分割成不同的空

間，或者定義它們的大小、位置及層級(jí)。

所謂網(wǎng)格設(shè)計(jì)，就是把頁(yè)面按照等比分成等分格子，然后所有元素按照最小單位的倍數(shù)尺寸來(lái)

設(shè)計(jì)，以便于后期前端排版有規(guī)律、定位好算、網(wǎng)頁(yè)看起來(lái)規(guī)整、適合響應(yīng)式多分辨率適配、

適合大型動(dòng)態(tài)網(wǎng)站布局、CSS更好寫。

網(wǎng)格布局，如圖8.4所示。

1.4 CSS3視覺(jué)表現(xiàn)方面的新特性

1.半透明rgba屬性

在rgba出現(xiàn)之前，半透明可以用opacity來(lái)創(chuàng)建，可是這樣導(dǎo)致的結(jié)果是不僅元素的背景會(huì)變

透明，標(biāo)簽元素包含的文字也會(huì)變透明。

2.Background-image (多背景圖)

以前Backround-image只支持一個(gè)圖片，現(xiàn)在可以支持多個(gè)圖片，只要把它們用逗號(hào)隔開(kāi)就

行了，格式如下。

background:

[background-image] [background-position] [background-repeat],

[background-image] [background-position] [background-repeat],

[background-image] [background-position] [background-repeat];

3.Border-image (邊框圖片)

Border-image主要是用圖片來(lái)填充邊框。

Border-image的分解屬性如下。

(1)border-image-source 指定 border 的背景圖的 url。

(2)border-image-slice設(shè)置圖片如何切割的屬性，非定位。

(3)border-image-width 定義 border-image 的顯示區(qū)域。

(4)border-image-repeat 定義 border-image 的重復(fù)方式。

(5)[stretch | repeat | round]:拉伸 | 重復(fù) | 平鋪(其中 stretch 是默認(rèn)值)。

邊框圖片用例如圖8.5所示。




圖8.5




4.圓角

border-radius: 90px 以半徑為 90px 的圓。

除了可以同時(shí)設(shè)置4個(gè)圓角以外，還可以單獨(dú)對(duì)每個(gè)角進(jìn)行設(shè)置。CSS3提供四個(gè)單獨(dú)的屬性對(duì)

應(yīng)4個(gè)角。

(1)* border-top-left-radius： 125px。

(2)* border-top-right-radius: 125px。

(3)* border-bottom-right-radius: 125px。

(4)* border-bottom-left-radius: 125px。

border-radius可以同時(shí)設(shè)置1 ~ 4個(gè)值。如果設(shè)置1個(gè)值，表示4個(gè)圓角都使用這個(gè)值：如果

設(shè)置兩個(gè)值，表示左上角和右下角使用第一個(gè)值，右上角和左下角使用第二個(gè)值。

如果設(shè)置3個(gè)值，表示左上角使用第一個(gè)值，右上角和左下角使用第二個(gè)值，右下角使用第三

個(gè)值：如果設(shè)置4個(gè)值，則依次對(duì)應(yīng)左上角、右上角、右下角、左下角(順時(shí)針順序)如圖8.6所

示。

(1) border-radius： 125px。

(2) border-radius： 125px60px。

(3) border-radius： 125px90px45px。

(4) border-radius： 125px 90px 45px 5px。

5. box-shadow和text-shadow (盒子陰影)和(文字陰影)

text-shadow和box-shadow都有4個(gè)參數(shù)。第一個(gè)為水平偏移量；第二個(gè)為垂直偏移量；第

三個(gè)為模糊的像素寬度；第四個(gè)為顏色(可用rgba顏色)，如圖8.7所示。







文字陰影

如:text-shadow:5px 3px 4px rgba(0,0,0,0.7)。

意思是說(shuō)，陰影部分向右偏移5px、向下偏移3px、模糊寬度為4px、顏色為黑色,并且不透明

度為0.7,效果如圖8.8所示。

6.強(qiáng)大的CSS選擇器

E:hover{}等做各種元素狀態(tài)，如圖8.9所示。

7.transform （變換）

值得注意的有3個(gè)選項(xiàng)：skew、rotate和scale,如圖8.10所示。













(1)skew。定義沿著X軸和F?軸的2D傾斜轉(zhuǎn)換，如圖8.11所示。

(2)接下來(lái)是rotate。rotate接受一個(gè)旋轉(zhuǎn)的角度，如圖8.12所示。

(3)scale。定義2D縮放轉(zhuǎn)換。接受兩個(gè)值的時(shí)候是分別縮放寬度和高度，接受一個(gè)值的時(shí)候，

高度和寬度都根據(jù)該值縮放，如圖8.13所示。







8. SVG圖像使用

參數(shù)為 <img src="ICONl.svgH width="600M height=H600M alt=“”> 的圖如圖 8.14

所示。







9.transition （過(guò)渡）

transition可以實(shí)現(xiàn)非常平滑的過(guò)渡，最重要的用法就是偽類用法，以前的hover偽類只能實(shí)

現(xiàn)“瞬間”的變化，有的transition之后，可以實(shí)現(xiàn)平滑的過(guò)渡?？梢栽O(shè)置4個(gè)過(guò)渡屬性。

（1）transition-property□這個(gè)屬性是設(shè)置需要過(guò)渡的屬性，如color、width等，默認(rèn)為all,

即所有屬性都過(guò)渡。

（2）transition-durationo 過(guò)渡所需的時(shí)間。

（3）transition-timing-fiinctiono 過(guò)渡方式：ease （勻速）、ease-in （加速）、ease-

out （減速）、ease-in-out （先加速再減速）。

（4）transition-delayo過(guò)渡發(fā)生的延遲。各種過(guò)渡效果如圖8.15所示。







10.animation （動(dòng)畫）

HTML 5增加了 animation （動(dòng)畫）的屬性，這個(gè)屬性比transition （過(guò)渡）能更加細(xì)膩地控

制動(dòng)畫的時(shí)間和關(guān)鍵幀時(shí)間位置，支持在一個(gè)元素上做時(shí)間和行為復(fù)雜的動(dòng)畫如圖8.16所示。

動(dòng)畫的主要屬性如下。

（1）animation-name。名字,關(guān)于后續(xù)的關(guān)鍵幀的定義。

（2）animation-durationo。動(dòng)畫時(shí)間。

(3) animation-iteration-counto。動(dòng)畫次數(shù)，可為數(shù)字和 infinite (無(wú)限次)。

(4) animation-timing-fiinctiono 。動(dòng)畫方式，和 transition—樣。








11. 3D Canvas 畫布

HTML Canvas （畫布）能夠幫助你更加方便地實(shí)現(xiàn)2D繪制圖形圖像及其各種動(dòng)畫效果。

我們可以在HTML中使用屬性width和height來(lái)定義Canvas。

但是Canvas的相關(guān)功能主要依賴于Javascript實(shí)現(xiàn)，即HTML 5 Canvas API。

我們使用javascript來(lái)訪問(wèn)和控制Canvas相關(guān)的區(qū)域，比如調(diào)用相關(guān)繪圖的方法，用來(lái)動(dòng)態(tài)生

成需要的動(dòng)畫或者圖形，如圖8.17所示。