HTML5+CSS3網(wǎng)頁設(shè)計(jì)基礎(chǔ)-第十章-CSS3簡單動畫

1、第1頁第10章 CSS3簡單動畫本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁本章概述在傳統(tǒng)的Web設(shè)計(jì)中，當(dāng)網(wǎng)頁中需要顯示動畫或特效時(shí)，需要使用JavaScript腳本或者Flash來實(shí)現(xiàn)。在CSS3中，提供了對動畫的強(qiáng)大支持，可以實(shí)現(xiàn)旋轉(zhuǎn)、縮放、移動和過渡等效果。本章將對CSS3中的過渡、變形和動畫進(jìn)行詳細(xì)講解。第3頁本章的學(xué)習(xí)目標(biāo)理解過渡屬性，能夠控制過渡時(shí)間、動畫快慢等常見過渡效果。掌握CSS3中的變形屬性，能夠?qū)崿F(xiàn)2D轉(zhuǎn)換、3D轉(zhuǎn)換效果。掌握CSS3中的動畫技術(shù)，能夠制作網(wǎng)頁中常見的動畫效果。第4頁主要內(nèi)容10.1 CSS3過渡10.2 變形10.3 動畫設(shè)計(jì)10.4 實(shí)訓(xùn)10.5 本章小結(jié)

2、第5頁10.1 CSS3過渡本節(jié)主要內(nèi)容：transition-property屬性transition-duration屬性transition-timing-function屬性transition-delay屬性transition屬性10.1.1 transition-property屬性transition-property屬性用于指定應(yīng)用過渡效果的CSS屬性名稱，默認(rèn)值為all。其基本語法格式如下。transition-property：none | all | property;none：沒有屬性會獲得過渡效果。all：所有屬性都將獲得過渡效果。property：定義應(yīng)用過渡效果

3、的CSS屬性名稱，多個(gè)名稱之間以逗號分隔。第6頁第7頁10.1.2 transition-duration屬性transition-duration屬性用于定義過渡效果花費(fèi)的時(shí)間，默認(rèn)值為0，常用單位是秒（s）或者毫秒（ms），其基本語法格式如下。transition-duration:time;參考示例：例10-1-2.html第8頁10.1.3 transition-timing-function屬性transition-timing-function屬性規(guī)定過渡效果的速度曲線，默認(rèn)值為“ease”，其基本語法格式如下。transition-timing-function:linear|e

4、ase|ease-in|ease-in-out;各參數(shù)的意義如下。linear：指定以相同速度開始至結(jié)束的過渡效果。ease：指定以慢速開始，然后加快，最后慢慢結(jié)束的過渡效果ease-in：指定以慢速開始，然后逐漸加快（淡入效果）的過渡效果。ease-out：指定以慢速結(jié)束（淡出效果）的過渡效果。ease-in-out：指定以慢速開始和結(jié)束的過渡效果。參考示例：例10-1-3.html第9頁10.1.4 transition-delay屬性transition-delay屬性規(guī)定過渡效果何時(shí)開始，默認(rèn)值為0，常用單位是秒（s）或者毫秒（ms）。transition-delay的屬性值可以為正整

5、數(shù)、負(fù)整數(shù)和0。當(dāng)設(shè)置為負(fù)數(shù)時(shí)，過渡動作會從該時(shí)間點(diǎn)開始，之前的動作被截?cái)?；設(shè)置為正數(shù)時(shí)，過渡動作會延遲觸發(fā)。其基本語法格式如下。transition-delay:time;參考示例：例10-1-4.html第10頁10.1.5 transition屬性transition屬性是一個(gè)復(fù)合屬性，用于在一個(gè)屬性中設(shè)置transition-property、transition-duration、transition-timing-function、transition-delay四個(gè)過渡屬性。其基本語法格式如下。transition：property duration timing-functio

6、n delay;在使用transition屬性設(shè)置多個(gè)過渡效果時(shí)，它的各個(gè)參數(shù)必須按照順序進(jìn)行定義，不能顛倒。如例10-1-4中設(shè)置的四個(gè)過渡屬性，可以直接通過如下代碼實(shí)現(xiàn)。transition:width,height 2s ease-out 1s;第11頁10.2 變形本節(jié)主要內(nèi)容：案例展示認(rèn)識transform2D轉(zhuǎn)換3D轉(zhuǎn)換案例實(shí)現(xiàn)第12頁10.2.1 案例展示【案例展示】設(shè)計(jì)客戶案例局部頁面，實(shí)現(xiàn)當(dāng)鼠標(biāo)懸浮于圖片上時(shí)，介紹文字從圖片上方滑下覆蓋圖片，文字半透明，能看到后面的圖片。本例文件10-2.HTML在瀏覽器中的瀏覽效果如圖10-3和10-4所示。 圖10-3 客戶案例局部頁面

7、10-4 鼠標(biāo)懸浮于圖片上時(shí)效果第13頁10.2.1 案例展示【知識要點(diǎn)】CSS3中transform屬性、2D及3D轉(zhuǎn)換?！緦W(xué)習(xí)目標(biāo)】掌握transform屬性、2D、3D轉(zhuǎn)換技術(shù)，實(shí)現(xiàn)移動、傾斜、縮放以及翻轉(zhuǎn)元素等效果。第14頁10.2.2 認(rèn)識transformCSS3變形是一系列效果的集合，如平移、旋轉(zhuǎn)、縮放和傾斜等，這些的基礎(chǔ)都是transform屬性。CSS3中的變形允許動態(tài)的控制元素，可以在網(wǎng)頁中對元素進(jìn)行移動、縮放、傾斜、旋轉(zhuǎn)，或者結(jié)合這些變形屬性產(chǎn)生復(fù)雜的動畫。通過CSS3中的變形操作，可以讓元素生成動態(tài)視覺效果，也可以結(jié)合過渡和動畫屬性產(chǎn)生一些新的動畫效果。CSS3的變形（

8、transform）屬性可以讓元素在一個(gè)坐標(biāo)系統(tǒng)中變形。這個(gè)屬性包含一系列變形函數(shù)，可以進(jìn)行元素的移動、旋轉(zhuǎn)和縮放。transform屬性的基本語法如下。transform: none | transform-functions;第15頁10.2.2 認(rèn)識transform參數(shù)說明：none：表示不進(jìn)行變形。transform-functions：用于設(shè)置變形函數(shù)，可以是一個(gè)或多個(gè)變形函數(shù)列表。transform-function函數(shù)包括translate()、scale()、rotate()和skew()等。具體說明如下。translate()：移動元素對象，即基于X和Y坐標(biāo)重新定位元素。s

9、cale()：縮放元素對象，可以使任意元素對象尺寸發(fā)生變化，取值包括正數(shù)、負(fù)數(shù)和小數(shù)。rotate()：旋轉(zhuǎn)元素對象，取值為一個(gè)度數(shù)值。skew()：傾斜元素對象，取值為一個(gè)度數(shù)值。第16頁10.2.3 2D轉(zhuǎn)換1. 平移使用translate()方法實(shí)現(xiàn)平移效果，使元素從其當(dāng)前位置平移，移動距離根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)進(jìn)行。該函數(shù)包含兩個(gè)參數(shù)值，分別用于定義X軸和Y軸坐標(biāo)，其基本語法格式如下。transform:translate(x-value,y-value);參數(shù)說明：x-value指元素在水平方向上移動的距離。y-value指元素在垂直方向上

10、移動的距離。參考示例：例10-2-1.html第17頁10.2.3 2D轉(zhuǎn)換2. 縮放scale()方法用于縮放元素大小，該函數(shù)包含兩個(gè)參數(shù)值，分別用來定義寬度和高度的縮放比例。元素尺寸的增加或減少，由定義的寬度（X軸）和高度（Y軸）參數(shù)控制，其基本語法格式如下。transform:scale(x-axis,y-axis);參數(shù)說明：x-axis：元素沿x軸方向上的縮放比例。y-axis：元素沿x軸方向上的縮放比例。參考示例：例10-2-2.html第18頁10.2.3 2D轉(zhuǎn)換3. 傾斜skew()方法用于元素傾斜顯示，即將一個(gè)對象圍繞著X軸和Y軸按照一定的角度傾斜。該函數(shù)包含兩個(gè)參數(shù)值，分

11、別用來定義X軸和Y軸坐標(biāo)傾斜的角度。其基本語法格式如下。transform:skew(x-angle,y-angle);參數(shù)說明：x-angle：相對于X軸進(jìn)行傾斜的角度值，單位deg。y-angle：相對于Y軸進(jìn)行傾斜的角度值，單位deg。說明：如果省略了第二個(gè)參數(shù)，則取默認(rèn)值0。參考示例：例10-2-3.html第19頁10.2.3 2D轉(zhuǎn)換4. 旋轉(zhuǎn)rotate()方法用于旋轉(zhuǎn)指定的元素，它通過指定的角度參數(shù)使元素相對原點(diǎn)中心進(jìn)行旋轉(zhuǎn)。其基本語法格式如下。transform:rotate(angle);參數(shù)說明：angle表示要旋轉(zhuǎn)的角度值。如果角度為正數(shù)值，則順時(shí)針旋轉(zhuǎn)，否則，逆時(shí)針旋

12、轉(zhuǎn)。參考示例：例10-2-4.html第20頁10.2.3 2D轉(zhuǎn)換5. 更改變換的中心點(diǎn)transform-origin()方法用來設(shè)置元素的運(yùn)動的基點(diǎn)(參照點(diǎn))，也就是該元素圍繞著那個(gè)點(diǎn)變形或旋轉(zhuǎn)，默認(rèn)基點(diǎn)是元素的中心點(diǎn)。在不使用transform-origin()改變元素基點(diǎn)位置的情況下，transform進(jìn)行的translate、scale、skew、rotate等操作都是以元素自己中心位置進(jìn)行變化的。如果需要在不同的位置對元素進(jìn)行這些操作，就可以使用transform-origin來對元素進(jìn)行基點(diǎn)位置改變，使元素基點(diǎn)不再在中心位置，以達(dá)到需要的基點(diǎn)位置。第21頁10.2.3 2D轉(zhuǎn)換

13、基本語法格式如下。transform-origin：x-axis y-axis z-axis;參數(shù)說明：x-axis：定義視圖被置于X軸的何處。取值left、center、right、length和%等，默認(rèn)值為50%。y-axis：定義視圖被置于Y軸的何處。取值top、center、bottom、length和%等，默認(rèn)值為50%。z-axis：定義視圖被置于Z軸的何處。取值length，默認(rèn)值為0。注意：該屬性只有在設(shè)置了transform屬性的時(shí)候起作用，2D轉(zhuǎn)換元素可以改變元素的X和Y軸。 3D轉(zhuǎn)換元素，還可以更改元素的Z軸。參考示例：例10-2-5.html第22頁10.2.4 3D

14、轉(zhuǎn)換1. rotateX()方法rotateX()函數(shù)用于指定元素圍繞X軸旋轉(zhuǎn)，其基本語法格式如下。transform:rotateX(a);參數(shù)說明：參數(shù)a用于定義旋轉(zhuǎn)的角度值，單位為deg。其值可以使正數(shù)也可以是負(fù)數(shù)。如果只為正，元素將圍繞X軸順時(shí)針旋轉(zhuǎn)；反之，如果是負(fù)值，元素將圍繞X軸逆時(shí)針旋轉(zhuǎn)。參考示例：例10-2-6.html第23頁10.2.4 3D轉(zhuǎn)換2. rotateY()方法rotateY()函數(shù)指定一個(gè)元素圍繞Y軸旋轉(zhuǎn)，其基本語法格式如下。transform:rotateY(a);參數(shù)說明：參數(shù)a與rotateX(a)中的a含義相同，用于定義旋轉(zhuǎn)的角度。如果值為正，元素圍繞

15、Y軸順時(shí)針旋轉(zhuǎn)；反之，如果值為負(fù)，元素圍繞Y軸逆時(shí)針旋轉(zhuǎn)。參考示例：例10-2-7.html第24頁10.2.4 3D轉(zhuǎn)換3. perspective屬性perspective 屬性定義 3D 元素距視圖的距離，以像素計(jì)。該屬性能改變 3D 元素查看 3D 元素的視圖。當(dāng)為元素定義 perspective 屬性時(shí)，其子元素會獲得透視效果，但元素本身沒有。語法格式：perspective: number|none;參數(shù)說明：number：元素距離視圖的距離，單位是像素。none：不設(shè)置透視，默認(rèn)值，與 0 相同。說明：perspective 屬性只影響 3D 轉(zhuǎn)換元素。目前瀏覽器都不支持 per

16、spective 屬性，Chrome 和 Safari 支持替代的 -webkit-perspective 屬性。參考示例：例10-2-8.html第25頁10.2.4 3D轉(zhuǎn)換4.perspective-origin屬性perspective-origin 屬性定義 3D 元素所基于的 X 軸和 Y 軸，用來改變 3D 元素的底部位置。語法格式：perspective-origin:x-axis y-axis;參數(shù)說明：x-axis：定義視圖在 x 軸上的位置。取值left、center、right、length、%，默認(rèn)值50%。y-axis：定義視圖在 y 軸上的位置。取值top、cen

17、ter、bottom、length、%，默認(rèn)值50%。說明：使用perspective -Origin屬性，定義一個(gè)元素的子元素的透視圖，而不是元素本身。目前瀏覽器都不支持 perspective-origin 屬性。Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 屬性參考示例：例10-2-9.html第26頁10.2.4 3D轉(zhuǎn)換5.backface-visibility屬性backface-visibility 屬性定義當(dāng)元素不面向屏幕時(shí)是否可見。語法格式：backface-visibility: visible | hidden;參數(shù)：v

18、isible：背面是可見的，默認(rèn)值。hidden：背面是不可見的。參考示例：例10-2-10.html第27頁10.3 動畫設(shè)計(jì)本節(jié)主要內(nèi)容：keyframes規(guī)則animation屬性第28頁10.3.1 keyframes規(guī)則在CSS3中，keyframes定義關(guān)鍵幀，一個(gè)關(guān)鍵幀表示動畫過程中的一個(gè)狀態(tài)。在keyframes中規(guī)定某套CSS樣式，從一套 CSS 樣式逐漸變化為另一套樣式的過程，就實(shí)現(xiàn)了動畫效果。keyframes規(guī)則的語法格式如下。keyframes animationname keyframes-selectorcss-styles;參數(shù)說明：animationname：

19、動畫的名稱，它將作為引用時(shí)的唯一標(biāo)識，不能為空。第29頁10.3.1 keyframes規(guī)則keyframes-selecytor：關(guān)鍵幀選擇器，規(guī)定當(dāng)前關(guān)鍵幀要應(yīng)用到整個(gè)動畫過程中的時(shí)間，取值為百分比（百分比是指動畫完成一遍的時(shí)間長度的的百分比）、from或者to。其中，from和0%效果相同，是動畫的開始時(shí)間；to和100%效果相同，是動畫的結(jié)束時(shí)間。css-styles：當(dāng)前關(guān)鍵幀的CSS樣式，定義執(zhí)行到當(dāng)前關(guān)鍵幀時(shí)對應(yīng)的動畫狀態(tài)，由CSS樣式屬性進(jìn)行定義，多個(gè)屬性之間用分號分隔，不能為空。說明：目前瀏覽器都不支持 keyframes 規(guī)則。Firefox 支持替代的 -moz-keyframes 規(guī)則。Opera 支持替代的 -o-keyframes 規(guī)則。Safari 和 Chrome 支持替代的 -