網(wǎng)頁設計與開發(fā)（HTML5+CSS3） 課件 項目8 利用CSS3制作網(wǎng)頁特效

項目8利用CSS3制作網(wǎng)頁特效01040203目錄定義平移效果

定義縮放效果定義傾斜效果定義2D旋轉(zhuǎn)效果050607目錄定義變形原點定義3D旋轉(zhuǎn)效果定義過渡效果08設置過渡效果持續(xù)時間0910目錄制作過渡效果速度曲線制作CSS3動畫效果項目描述前面的項目制作的網(wǎng)頁基本是靜態(tài)效果，在傳統(tǒng)網(wǎng)頁設計中，一般使用JavaScript腳本或者Flash來制作網(wǎng)頁動態(tài)特效，而CSS3提供了對動畫的強大支持，可以實現(xiàn)變形、過渡、動畫等效果，大大降低了制作網(wǎng)頁特效的難度。本項目利用CSS3的這些功能制作一個“旋轉(zhuǎn)的3D相冊”頁面。項目效果圖知識儲備知識目標理解并掌握transform（變形）屬性的用法和意義。掌握transition（過渡）屬性的用法和意義。010203掌握動畫屬性及屬性對應的不同屬性值的用法和意義。定義平移效果01任務描述利用CSS3中transform屬性的translate()方法定義盒子模型移動后的坐標，實現(xiàn)元素平移效果。平移后的效果如右圖所示。知識點撥

transform01transform是CSS3新增的屬性，可以實現(xiàn)元素的變形效果，如平移、傾斜、縮放及翻轉(zhuǎn)等。

translate()方法02translate()方法能夠重新定義元素的坐標，實現(xiàn)平移效果，該方法包含兩個參數(shù)，分別用于定義X軸和Y軸坐標，基本語法格式如下。transform:translate(x-value,y-value);在上面的語法格式中，x-value指元素在水平方向上移動的距離，y-value指元素在垂直方向上移動的距離，第二個參數(shù)可省略，省略后取默認值0，當值為負數(shù)時，表示元素向反方向移動。

定義縮放效果02任務描述利用CSS3中transform屬性的scale()方法實現(xiàn)盒子模型放大1.5倍的效果。原效果和放大1.5倍后的效果如右圖所示。

原效果放大1.5倍后的效果知識點撥在CSS3中，可以利用transform屬性的scale()方法實現(xiàn)元素的縮放效果，縮放是指“縮小”和“放大”的意思。scale()方法與translate()方法類似，用法如下。（1）scaleX(x)：元素僅在水平方向上縮放（X軸縮放）。（2）scaleY(y)：元素僅在垂直方向上縮放（Y軸縮放）。（3）scale(x,y)：元素在水平方向和垂直方向上同時縮放（X軸和Y軸同時縮放）。其中，參數(shù)x表示元素在X軸方向上的縮放倍數(shù)，參數(shù)y表示元素在Y軸方向上的縮放倍數(shù)。定義傾斜效果03任務描述利用CSS3中transform屬性的skew()方法實現(xiàn)盒子模型傾斜的效果，如右圖所示。任務3效果知識點撥

skew()方法01利用transform屬性的skew()方法可以實現(xiàn)元素的傾斜效果，其用法和translate()、scale()方法類似，基本語法格式如下。transform:skew(x,y);在上面的語法格式中，x和y分別代表相對于X軸和Y軸傾斜的角度，如果省略了第二個參數(shù)，則其取默認值0。定義2D旋轉(zhuǎn)效果04任務描述利用CSS3中transform屬性的rotate()方法實現(xiàn)素材圖片在2D空間中旋轉(zhuǎn)的效果。旋轉(zhuǎn)后的效果如右圖所示。任務4效果知識點撥利用transform屬性的rotate()方法能夠?qū)崿F(xiàn)元素的旋轉(zhuǎn)效果，主要在2D空間中進行操作，該方法中的參數(shù)允許出現(xiàn)負值，這時元素將進行逆時針旋轉(zhuǎn)，基本語法格式如下。transform:rotate(角度值);

在上面的語法格式中，如果角度值為正值，則元素按照順時針旋轉(zhuǎn)，否則，按照逆時針旋轉(zhuǎn)。定義變形原點05任務描述利用transform-origin屬性更改元素變形原點實現(xiàn)元素變形效果。變形后的效果如右圖所示。任務5效果圖知識點撥

transform-origin屬性01通過transform屬性可以實現(xiàn)元素的平移、縮放、傾斜及旋轉(zhuǎn)效果，這些變形操作是以元素的原點作為參照的。在默認情況下，元素的原點在X軸和Y軸的50%位置，如果需要更改這個原點，就可以使用transform-origin屬性，其基本語法格式如下。transform-origin:x-axisy-axisz-axis;在上面的語法格式中，每個屬性值都代表一個偏移量，具體描述如下表所示。定義3D旋轉(zhuǎn)效果06任務描述利用rotateX()、rotateY()、rotateZ()、translateZ()及perspective屬性，制作一個可以實現(xiàn)3D旋轉(zhuǎn)的“禁毒宣傳標語”。旋轉(zhuǎn)前后的效果分別如右圖所示。旋轉(zhuǎn)前的效果

旋轉(zhuǎn)后的效果知識點撥

rotateX()01rotateX()函數(shù)用于在3D空間中使元素沿X軸旋轉(zhuǎn)?。它接受一個角度值作為參數(shù)，用于指定旋轉(zhuǎn)的角度。當參數(shù)為正值時，元素順時針旋轉(zhuǎn)；當參數(shù)為負值時，元素逆時針旋轉(zhuǎn)?；菊Z法：transform:rotateX(<angle>)，其中<angle>表示旋轉(zhuǎn)的角度，可以是正值或負值。正值表示順時針旋轉(zhuǎn)，負值表示逆時針旋轉(zhuǎn)。

rotateY()、rotateZ()02rotateY()函數(shù)用于在3D空間中使元素沿Y軸旋轉(zhuǎn)?。用法同rotateX()函數(shù)類似。?rotateZ()函數(shù)用于在3D空間中使元素沿Z軸旋轉(zhuǎn)?。用法同rotateX()、rotateY()函數(shù)類似。?知識點撥

?translateZ()03?translateZ()?用于在3D空間中沿著Z軸重新定位元素，即從觀察者的角度來看，元素會更近或更遠。這個變換由一個長度值定義，指定元素向內(nèi)或向外移動的距離。正值將元素移向觀察者，負值則遠離觀察者?；菊Z法：transform:translateZ(z);其中z代表在Z軸上的移動距離。

perspective屬性04?CSS3中的perspective屬性用于設置從何處觀察一個元素的角度，可以理解為視距，主要用于呈現(xiàn)良好的3D透視效果。其基本語法格式如下。perspective:

number|none;在上面的語法格式中，number指元素距視圖的距離，單位為px，none表示不設置透視效果，透視效果由參數(shù)值number決定，參數(shù)值越小，透視效果越突出。知識點撥

知識補充：rotate3d()方法05rotate3d()方法用于在3D空間中圍繞一個固定軸線旋轉(zhuǎn)元素，而不使其變形，基本語法格式如下。rotate3d(x,y,z,angle);上述語法格式中各參數(shù)的描述如下表所示。

定義過渡效果07任務描述利用transition-property屬性，定義盒子模型由紅色到綠色過渡的效果。過渡前后的效果分別如右圖所示。過渡前的效果

過渡后的效果知識點撥

transition-property屬性01transition-property屬性用于設置過渡效果，基本語法格式如下。transition-property:none|all|property;上述語法格式中各屬性值的具體描述如下表所示。設置過渡效果持續(xù)時間08任務描述在任務7的基礎上，利用transition-duration屬性，為過渡效果加上過渡持續(xù)的時間，這樣鼠標懸停在元素上實現(xiàn)由紅色到綠色的過渡時會有一個過渡過程，效果如右圖所示。鼠標懸停時顏色的過渡過程（1）（3）（2）知識點撥

transition-duration屬性01transition-duration屬性用于定義過渡效果持續(xù)的時間，常用的單位是秒（s）或毫秒（ms），默認值為0。其基本語法格式如下。transition-duration:time;

知識補充：transition-delay屬性02transition-delay屬性用于定義過渡動作從何時開始觸發(fā)，屬性值也可以為負值。當為負值時，過渡動作會從該時間點開始觸發(fā)，之前的動作將被截斷；當為正值時，過渡動作會延遲觸發(fā)。其基本語法格式如下。transition-delay:time;讀者可以在該任務的的案例中嘗試使用，這里就不再做案例補充了。定義過渡效果速度曲線09任務描述結合前面學過的過渡效果相關屬性，并利用transition-timing-function屬性，定義鼠標懸停在元素上時實現(xiàn)過渡動畫效果，過渡動畫過程如右圖所示。鼠標懸停時元素的過渡動畫過程（1）（3）（2）知識點撥

transition-timing-function屬性01transition-timing-function屬性用于定義過渡效果的速度曲線，基本語法格式如下。transition-timing-function:liner|ease|ease-in|ease-out|ease-in-outease-incubic-bezier(n,n,n,n);從上面的語法格式中可以看出，transition-timing-function屬性的取值有很多個，其中，默認值為“ease”，常見屬性值及其描述如下表所示。制作CSS3動畫效果10任務描述結合前面學過的盒子屬性，并利用CSS3動畫中的@keyframes（又稱關鍵幀動畫）及animation相關屬性，定義小球在盒子中的動畫效果。小球動畫某一刻的效果截圖如右圖所示。小球動畫某一刻的效果截圖知識點撥

@keyframes01@keyframes是一種CSS規(guī)則，用于定義動畫序列，指定了動畫從開始到結束的各個關鍵幀。在@keyframes中指定某項CSS樣式，就能創(chuàng)建由當前樣式逐漸變?yōu)樾聵邮降膭赢嬓ЧＴ趧赢嬤\行過程中可以多次更改CSS樣式，使用百分比（%）來規(guī)定改變發(fā)生的時間，或者通過關鍵字from和to，其等價于0%和100%。0%是動畫的開始時間，100%是動畫的結束時間。該任務中設定了從0%到25%再到50%再到75%，最后到100%的動畫過程。注意：InternetExplorer10、Firefox及Opera瀏覽器支持@keyframes規(guī)則，Chrome和Safarii需要添加前綴-webkit-，-moz-代表Firefox瀏覽器內(nèi)核識別碼、-o-代表Opera瀏覽器內(nèi)核識別碼。本書建議使用chrome瀏覽器，該任務重的-webkit-也正是針對chrome瀏覽器而設的兼容代碼。知識點撥

animation屬性02animation屬性用于實現(xiàn)動畫，包括以下幾個子屬性：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state。其基本語法格式如下。animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state;animation屬性值及其描述如下表所示。知識點撥

animation屬性02在該任務中，animation:mymove8slinearinfinite;將幾個屬性集合在一起，分開后就是：animation-name：my