HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計與制作項目教程課件-項目6 讓頁面更酷炫-CSS3高級應(yīng)用

HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計與制作項目教程項目6讓你的頁面更酷炫——CSS3高級應(yīng)用目錄ENTERPRISEOPERATIONREPORT04.總結(jié)提升03.知識鏈接02.學(xué)習(xí)目標01.項目導(dǎo)入項目導(dǎo)入PART01項目導(dǎo)入【項目導(dǎo)入】“旅行家——住宿”頁面效果展示CSS3不僅可以布局頁面和美化頁面，同時拓展了過渡、變形及動畫效果，使網(wǎng)頁更加生動。在網(wǎng)頁制作中可以使用這些動畫效果代替復(fù)雜的JavaScript或Flash。本章將在布局美化頁面的基礎(chǔ)上，使用CSS3的過渡及變形屬性制作“旅行家——攻略”頁面，案例完成效果如圖6.1所示。在一個網(wǎng)站中，所有頁面往往具有風(fēng)格統(tǒng)一的框架及樣式風(fēng)格，例如“旅行家——攻略”頁面中header及footer與“旅行家——住宿”頁面完全相同，banner結(jié)構(gòu)與“旅行家——住宿”頁面結(jié)構(gòu)相似；本章將著重講解“達人攻略”和“主題攻略”部分動畫效果的實現(xiàn)。學(xué)習(xí)目標PART02知識目標能力目標掌握CSS3過渡屬性掌握CSS3中2D變形屬性掌握CSS3中2D變形屬性理解CSS3變形相關(guān)屬性能夠使用過渡效果制作頁面動畫效果能夠使用變形效果制作頁面動畫效果知識鏈接PART03一、過渡transitionCSS3過渡屬性transition主要包括transition-property、transition-duration、transition-timing-function以及transition-delay四個分屬性。使用過渡屬性需注意瀏覽器的支持情況，InternetExplorer10、Firefox、Chrome以及Opera支持transition屬性；Safari需要前綴-webkit-；InternetExplorer9以及更早的版本，不支持transition屬性；Chrome25以及更早的版本，需要前綴-webkit-。

一、過渡transition1.transition-propertytransition-property主要用來指定發(fā)生過渡效果的CSS屬性，當指定的CSS屬性發(fā)生變化時，過渡效果開始。其語法格式如下：transition-property:none|all|property;其中：none：表示沒有屬性發(fā)生過渡效果all：表示所有屬性均發(fā)生過渡效果property：定義發(fā)生過渡效果的CSS屬性，多個屬性使用逗號隔開

一、過渡transition1.transition-propertytransition-property主要用來指定發(fā)生過渡效果的CSS屬性，當指定的CSS屬性發(fā)生變化時，過渡效果開始。其語法格式如下：transition-property:none|all|property;其中：none：表示沒有屬性發(fā)生過渡效果all：表示所有屬性均發(fā)生過渡效果property：定義發(fā)生過渡效果的CSS屬性，多個屬性使用逗號隔開

一、過渡transition【例6-1】盒子背景色變換

一、過渡transition2.transition-durationtransition-duration屬性用來設(shè)置過渡效果持續(xù)的時間，默認值為0，屬性值使用以秒（s）或毫秒（ms）為單位的時間值，其基本語法格式為：transition-duration:time;

一、過渡transition【例6-2】正方形變圓形效果圖是鼠標懸停狀態(tài)中，這樣當鼠標懸停和離開時均會出現(xiàn)過渡效果。

一、過渡transition3.transition-timing-functiontransition-timing-function用來指定過渡效果的速度曲線，即控制過渡變化的快慢。其基本語法格式如下：transition-timing-function:inear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);一、過渡transition其中：inear：勻速過渡，相當于cubic-bezier(0,0,1,1)；ease：以慢-快-慢的速度過渡，相當于cubic-bezier(0.25,0.1,0.25,1)；ease-in：以慢-快的速度過渡，相當于cubic-bezier(0.42,0,1,1)；ease-out：以快-慢的速度過渡，相當于cubic-bezier(0,0,0.58,1)；ease-in-out：以慢-快-慢的速度過渡，相當于cubic-bezier(0.42,0,0.58,1)cubic-bezier(n,n,n,n)：定義貝塞爾曲線控制過渡速度。一、過渡transition貝塞爾曲線如圖6.5所示，曲線由四個控制點確定曲線的樣式，P0(0,0)、P1(x1,y1)、P2(x2,y2)、P3(1,1)。其中P0和P3點的值是確定的，P1和P2的值是不確定的。因此，可以通過設(shè)置P1及P2點的坐標來確定貝塞爾曲線的樣式，即cubic-bezier(n,n,n,n)中的4個參數(shù)。一、過渡transition4.transition-delay

transition-delay用來指定過渡效果的延遲時間，即控制過渡變化何時開始。其屬性值是表示時間的參數(shù)，常用秒（s）或毫秒（ms）作為單位，基本語法格式如下：transition-timing-function:time;在例6-2的基礎(chǔ)上，增加transition-delay屬性，設(shè)置延遲時間可觀察到不同的過渡效果。二、變形transformCSS3變形屬性transform主要包括移動translate、縮放scale、旋轉(zhuǎn)rotate、扭曲skew、和以及矩陣變形matrix。transform還可以實現(xiàn)2D和3D兩種情況下的變形效果。其基本語法格式如下：transform:none|transform-functions;其中：none：默認值，表示不變形。transform-functions：變形函數(shù)，包括translate()、scale()、rotate()、skew()、matrix()。

使用變形屬性需注意瀏覽器的支持情況，InternetExplorer10、Firefox、Opera支持transform屬性；InternetExplorer9支持替代的-ms-transform屬性（僅適用于2D轉(zhuǎn)換）；Safari和Chrome支持替代的-webkit-transform屬性（3D和2D轉(zhuǎn)換）；Opera只支持2D轉(zhuǎn)換。。二、變形transform所有的變形屬性都基于元素的原點，元素的原點默認位置在盒子的中心點（50%，50%，0），即中線的交叉點。使用transform-orgin屬性可以更改元素原點的位置，語法格式如下：transform-origin:x-axisy-axisz-axis;

其中，x-axis，y-axis，z-axis分別為新原點相對于中心點在x、y、z軸上的偏移量。其取值可以是方位詞（left、right、center、top、bottom等）、像素值和百分比。。二、變形transform1.2D變形（1）translate()移動：translate()可以通過定義平移距離的方法，實現(xiàn)目標的平移。注意這里默認以盒子左上角為參照點進行移動，其語法格式如下：transform:translate(x-value,y-value);其中：x-value：目標在X軸方向上的平移距離，可以取像素值或百分比。y-value：目標在Y軸方向上的平移距離，可以取像素值或百分比。。二、變形transform1.2D變形（1）translate()移動：translate()可以通過定義平移距離的方法，實現(xiàn)目標的平移。注意這里默認以盒子左上角為參照點進行移動，其語法格式如下：transform:translate(x-value,y-value);其中：x-value：目標在X軸方向上的平移距離，可以取像素值或百分比。y-value：目標在Y軸方向上的平移距離，可以取像素值或百分比。。二、變形transform（2）scale()縮放：scale()方法可以用來縮放元素的大小。其語法格式如下：transform:scale(x-axis,y-axis);其中：x-axis：目標在X軸方向上的縮放系數(shù)。y-axis：目標在Y軸方向上的縮放系數(shù)。注意縮放系數(shù)可以取整數(shù)、負數(shù)或小數(shù)。縮放后，元素寬高=初始寬高×縮放系數(shù)。當|axis|<1時，元素按比例縮小；當|axis|>1時，元素按比例放大；當axis<0時，元素翻轉(zhuǎn)。二、變形transform（3）rotate()旋轉(zhuǎn)：rotate()方法可以使元素按照設(shè)置的角度旋轉(zhuǎn)。其語法格式如下：transform:rotate(angle);當angle>0時，元素按順時針方向旋轉(zhuǎn)；angle<0時元素按逆時針方向旋轉(zhuǎn)。二、變形transform（4）skew()傾斜：scale()方法可以用來設(shè)置元素的傾斜樣式。其語法格式如下：transform:skew(x-angle,y-angle);其中：x-angle：目標相對于X軸方向上的傾斜角度。y-angle：目標相對于X軸方向上的傾斜角度。二、變形transform（5）matrix()矩陣變形：2D坐標系中，matrix(a,b,c,d,e,f)有六個參數(shù)，用來表示元素的變換。這六個參數(shù)對應(yīng)到矩陣如下：在圖形學(xué)上，用齊次坐標矩陣和圖形的頂點相乘，就能得到變換后的新頂點的位置。ax+cy+e表示變換后的水平坐標，bx+dy+f表示變換后的垂直位置。二、變形transform2.3D變形元素的3D變形是建立在三維坐標系上的，如圖6.10所示。要使用CSS3的3D變形，首先要將變形類型設(shè)置為3D，其語法格式如下：transform-style：flat|preserve-3d其中flat為默認值，表示所有子元素在2D平面呈現(xiàn)；preserve-3d表示所有子元素在3D空間中呈現(xiàn)。在使用Preserve-3d時需要注意以下兩個問題：

ransform-style屬性需要設(shè)置在父元素中，并且高于任何嵌套的變形元素。當元素設(shè)置了transform-style值為preserve-3d，其overflow屬性不能設(shè)置為hidden，否則3D變形效果將無法顯示。二、變形transform（1）3D變形屬性在使用3D變形時，首先需要設(shè)置3D變形屬性，具體如下：

perspective屬性：在3D變換中，將人眼作為視點，屏幕作為成像面，如圖6.11所示。圖中d表示視點與成像面之間的距離，即perspective的值。perspective屬性的語法格式如下所示：perspective：none|像素值;二、變形transformperspective屬性值≤0時，不產(chǎn)生透視效果；perspective屬性值＞0時，屬性值越小透視效果越明顯，屬性值越大透視效果越不明顯。perspective屬性還可以和translateZ(z)函數(shù)一起使用，如圖6.15所示物體與成像面之間的距離z就是我們通常所設(shè)置的z軸方向的偏移量translateZ(z)。在d值確定的情況下，當z>0時，物體在成像面和視點之間，物體成像>物體實際大?。划攝<0時，物體在成像面之后，物體成像<物體實際大小。在3D變形中，當給元素設(shè)置perspective屬性時，可以激活一個3D空間。除此之外，在3D變形的函數(shù)中的perspective()也可以激活3D空間。兩者的區(qū)別是，perspective屬性應(yīng)用在所有變形元素的父對象上；perspective（）函數(shù)應(yīng)用在當前變形的元素上，可以與其他tansform函數(shù)一起使用。二、變形transform二、變形transformperspective-origin屬性：perspective-origin屬性用來設(shè)置視點投射在成像面平面上的位置，如圖6.12所示，其語法格式如下所示：perspective-origin:x-axisy-axis;其中x-axis和y-axis分別用來設(shè)置視點在x軸和y軸上的位置，其屬性值可以是像素值、百分比或表示方位的詞（left、right、center、top、bottom），其默認值為50%，即其父對象的中心點。perspective-origin屬性需要與perspective屬性結(jié)合起來使用，應(yīng)用在其父對象上，以便將視點移至元素的中心以外位置。當視點位置變換時，投影位置也隨之變換。二、變形transformbackface-visibility屬性backface-visibility屬性用來設(shè)置元素背面是否可見。其語法格式如下：backface-visibility:visible|hidden;其中visible表示元素背面可見，是backface-visibility的默認值；hidden表示反面不可見。二、變形transform方法描述matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定義3D轉(zhuǎn)換，使用16個值的4x4矩陣。translate3d(x,y,z)定義3D移動translateX(x)定義3D轉(zhuǎn)換，僅用于設(shè)置X軸的偏移量translateY(y)定義3D轉(zhuǎn)換，僅用于設(shè)置Y軸的偏移量translateZ(z)定義3D轉(zhuǎn)換，僅用于設(shè)置Z軸的偏移量scale3d(x,y,z)定義3D縮放scaleX(x)定義3D轉(zhuǎn)換，僅用于設(shè)置X軸的縮放比例scaleY(y)定義3D轉(zhuǎn)換，僅用于設(shè)置Y軸的縮放比例scaleZ(z)定義3D轉(zhuǎn)換，僅用于設(shè)置Z軸的縮放比例rotate3d(x,y,z)定義3D旋轉(zhuǎn)rotateX(x)定義3D轉(zhuǎn)換，僅用于設(shè)置X軸的旋轉(zhuǎn)角度rotateY(y)定義3D轉(zhuǎn)換，僅用于設(shè)置Y軸的旋轉(zhuǎn)角度rotateZ(z)定義3D轉(zhuǎn)換，僅用于設(shè)置Z軸的旋轉(zhuǎn)角度perspective()定義3D視距（2）3D變形方法

3D變形的方法與2D變形的方法類似，如下表所示：表6-13D變形的方法二、變形transform例6-7撲克牌翻轉(zhuǎn)總結(jié)提升PART04總結(jié)提升：動畫animation

CSS3不僅可以支持過渡transition和變形transform，還提供了animation屬性支持動畫。相對于過渡和變形，animation動畫可以重復(fù)使用，制作復(fù)雜的動畫效果，還可以將動畫應(yīng)用在不同的元素之上。使用Animation屬性的一般流程主要包括2個步驟：定義關(guān)鍵幀、設(shè)置動畫屬性。總結(jié)提升：動畫animation

1、關(guān)鍵幀@keyframes@keyframes規(guī)則用于創(chuàng)建動畫關(guān)鍵幀。@keyframes的實質(zhì)就是設(shè)定某個時間點的CSS樣式。@keyframes規(guī)則語法格式如下@keyframesidentifier{0%{/*CSS樣式*/}