HTML5 CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）課件 第10章 過(guò)渡、變形和動(dòng)畫

第10章過(guò)渡、變形和動(dòng)畫《HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作（第2版）》學(xué)習(xí)目標(biāo)/Target

掌握變形相關(guān)屬性的用法，能夠制作2D變形和3D變形效果

掌握過(guò)渡相關(guān)屬性的用法，能夠?yàn)榫W(wǎng)頁(yè)中的元素添加過(guò)渡效果

掌握動(dòng)畫相關(guān)屬性的用法，能夠?yàn)榫W(wǎng)頁(yè)中的元素添加動(dòng)畫效果章節(jié)概述/Summary在傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)中，要想實(shí)現(xiàn)動(dòng)態(tài)效果通常需要使用JavaScript或者Flash。然而，CSS3新增了過(guò)渡、變形和動(dòng)畫屬性，使得實(shí)現(xiàn)動(dòng)態(tài)效果變得更加簡(jiǎn)單。過(guò)渡、變形和動(dòng)畫屬性是CSS3中實(shí)現(xiàn)網(wǎng)頁(yè)動(dòng)態(tài)效果的重要工具。它們的靈活性和強(qiáng)大的功能使開發(fā)者能夠以更簡(jiǎn)單、更直觀的方式實(shí)現(xiàn)各種精美的動(dòng)畫和特效。本章將對(duì)CSS3中的過(guò)渡、變形和動(dòng)畫屬性進(jìn)行詳細(xì)講解。目錄/Contents010203過(guò)渡變形動(dòng)畫04階段案例——制作表情動(dòng)畫過(guò)渡10.110.1.1transition-property屬性transition-property屬性用于指定產(chǎn)生過(guò)渡效果的CSS屬性。基本語(yǔ)法格式transition-property:none|all|CSS屬性;屬性值描述none沒(méi)有屬性會(huì)獲得過(guò)渡效果all所有屬性都會(huì)獲得過(guò)渡效果CSS屬性設(shè)置應(yīng)用過(guò)渡效果的CSS屬性，多個(gè)屬性之間用英文逗號(hào)分隔10.1.2transition-duration屬性transition-duration屬性用于設(shè)置CSS過(guò)渡效果的持續(xù)時(shí)間，通常需要設(shè)置以秒（s）或者毫秒（ms）為單位的時(shí)間，不能為負(fù)數(shù)?；菊Z(yǔ)法格式transition-duration:時(shí)間;10.1.3transition-timing-function屬性transition-timing-function屬性用于設(shè)置過(guò)渡效果的速度變化?；菊Z(yǔ)法格式transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);10.1.3transition-timing-function屬性transition-timing-function屬性值及描述屬性值描述linear用于設(shè)置勻速過(guò)渡效果，等同于cubic-bezier(0,0,1,1)ease用于設(shè)置慢速開始、然后加快速度、最后慢速結(jié)束的過(guò)渡效果，等同于cubic-bezier(0.25,0.1,0.25,1)ease-in用于設(shè)置慢速開始然后逐漸加快速度的過(guò)渡效果，等同于cubic-bezier(0.42,0,1,1)ease-out用于設(shè)置慢速結(jié)束的過(guò)渡效果，等同于cubic-bezier(0,0,0.58,1)ease-in-out用于設(shè)置慢速開始和結(jié)束的過(guò)渡效果，等同于cubic-bezier(0.42,0,0.58,1)cubic-bezier(n,n,n,n)用于設(shè)置加速或者減速的貝塞爾曲線，其中n的值為0~110.1.4transition-delay屬性transition-delay屬性用于設(shè)置過(guò)渡效果的開始時(shí)間，默認(rèn)值為0，表示過(guò)渡效果立即開始。常用單位是秒（s）或者毫秒（ms）。基本語(yǔ)法格式transition-delay:時(shí)間;正數(shù)：過(guò)渡效果會(huì)延遲。負(fù)數(shù)：該時(shí)間之前的過(guò)渡效果將被截?cái)唷?0.1.5transition屬性transition屬性是一個(gè)復(fù)合屬性，用于在一個(gè)屬性中設(shè)置transition-property、transition-duration、transition-timing-function、transition-delay這4個(gè)過(guò)渡屬性的值。基本語(yǔ)法格式transition:propertydurationtiming-functiondelay;transition屬性可以同時(shí)設(shè)置多個(gè)過(guò)渡屬性的值。其中前兩個(gè)屬性值是必需的，不能省略；后兩個(gè)屬性值是可選的，可根據(jù)需要進(jìn)行選擇。然而，這些值必須按照語(yǔ)法格式的指定順序進(jìn)行設(shè)置，不能顛倒。變形10.210.2.1認(rèn)識(shí)transform

在CSS3中，變形通過(guò)transform屬性實(shí)現(xiàn)。使用transform屬性實(shí)現(xiàn)的變形效果無(wú)須加載額外文件，可以極大提高網(wǎng)頁(yè)開發(fā)者的工作效率和網(wǎng)頁(yè)的響應(yīng)速度?；菊Z(yǔ)法格式transform：none|變形效果;transform屬性的默認(rèn)值為none，適用于行內(nèi)元素和塊元素，表示元素未變形。translate()：用于移動(dòng)元素對(duì)象，即基于x軸坐標(biāo)和y軸坐標(biāo)重新定位元素。scale()：用于縮放元素對(duì)象。skew()：用于傾斜元素對(duì)象。rotate()：用于旋轉(zhuǎn)元素對(duì)象10.2.22D變形

平移是指元素發(fā)生位置的變化，包括水平移動(dòng)和垂直移動(dòng)。在CSS3中，使用translate()可以實(shí)現(xiàn)元素的平移效果。平移基本語(yǔ)法格式transform:translate(x,y);參數(shù)x和y分別用于設(shè)置水平（x軸）和垂直（y軸）方向上的坐標(biāo)。參數(shù)值常用的單位為px和%。參數(shù)值可以為0、正數(shù)和負(fù)數(shù)，其中0為默認(rèn)值，可以省略。正數(shù)表示元素向右或向下移動(dòng)，負(fù)數(shù)表示元素向左或向上移動(dòng)。如果省略參數(shù)y，則取默認(rèn)值0，表示在該方向上不移動(dòng)。10.2.22D變形

平移坐標(biāo)移動(dòng)的效果10.2.22D變形

縮放縮放是指元素大小的變化。在CSS3中，使用scale()可以實(shí)現(xiàn)元素的縮放效果?；菊Z(yǔ)法格式transform:scale(x,y);

參數(shù)x和y分別用于定義水平（x軸）和垂直（y軸）方向上的縮放倍數(shù)。參數(shù)值可以為正數(shù)、負(fù)數(shù)，無(wú)須添加單位。設(shè)置的參數(shù)值不同，產(chǎn)生的效果也不同。正數(shù)：用于進(jìn)行正?？s放操作。當(dāng)參數(shù)值大于1時(shí)，元素將被放大；當(dāng)參數(shù)值小于1時(shí)，元素將被縮小。負(fù)數(shù)：用于進(jìn)行翻轉(zhuǎn)縮放操作。當(dāng)參數(shù)值大于-1時(shí)，元素將被翻轉(zhuǎn)縮?。划?dāng)參數(shù)值小于-1時(shí)，元素將被翻轉(zhuǎn)放大。10.2.22D變形

縮放使用scale()縮放元素的效果10.2.22D變形

傾斜在CSS3中，使用skew()可以實(shí)現(xiàn)元素的傾斜效果?；菊Z(yǔ)法格式transform:skew(x,y);參數(shù)x和y分別用于設(shè)置水平（x軸）和垂直（y軸）方向上的傾斜角度。參數(shù)值可以設(shè)置為任意角度值，單位為deg。如果指定的角度值為正數(shù)，則元素水平向左、垂直向上傾斜；如果指定的角度值為負(fù)數(shù)，則元素水平向右、垂直向上傾斜。此外若省略第2個(gè)參數(shù)y，則取默認(rèn)值0，此時(shí)元素僅在水平方向上進(jìn)行傾斜。10.2.22D變形

傾斜使用skew()實(shí)現(xiàn)的傾斜效果10.2.22D變形

旋轉(zhuǎn)在CSS3中，使用rotate()可以實(shí)現(xiàn)元素的旋轉(zhuǎn)效果。基本語(yǔ)法格式transform:rotate(x,y);參數(shù)angle用于設(shè)置元素的旋轉(zhuǎn)角度，參數(shù)值可以為任意角度值，單位為deg。當(dāng)角度值為正數(shù)時(shí)，元素沿順時(shí)針?lè)较蛐D(zhuǎn)；當(dāng)角度值為負(fù)數(shù)時(shí)，元素沿逆時(shí)針旋轉(zhuǎn)；默認(rèn)情況下不旋轉(zhuǎn)，即角度值為0。10.2.22D變形

旋轉(zhuǎn)使用rotate()實(shí)現(xiàn)的旋轉(zhuǎn)效果10.2.22D變形

多學(xué)一招：添加多種變形效果如果一個(gè)元素需要添加多種變形效果，可以使用空格把多個(gè)變形屬性值隔開。例如，為元素同時(shí)添加縮放、傾斜和旋轉(zhuǎn)效果，代碼如下。div{

width:200px;

height:80px;

margin:80pxauto;

background-color:#ccc;

border:1pxsolid#000;

transform:scale(2)skew(-30deg,-20deg)rotate(20deg);}10.2.22D變形

改變中心點(diǎn)的位置對(duì)元素進(jìn)行平移、縮放、傾斜和旋轉(zhuǎn)等變形操作時(shí)，都是以元素的中心點(diǎn)作為參照的。默認(rèn)情況下，元素的中心點(diǎn)在x軸、y軸和z軸各50%的坐標(biāo)所形成的位置。如果需要改變中心點(diǎn)的位置，可以使用transform-origin屬性?；菊Z(yǔ)法格式transform-origin:xyz;參數(shù)取值x可以是以%、em、px為單位的數(shù)值，也可以是top、right、bottom、left或center等關(guān)鍵詞y和參數(shù)x的值相同z不能使用單位為%的數(shù)值，它會(huì)被視為無(wú)效值；一般使用以px為單位的數(shù)值10.2.33D變形

rotateX()rotateX()可以讓指定元素圍繞x軸旋轉(zhuǎn)。基本語(yǔ)法格式transform:rotateX(a);參數(shù)a用于定義旋轉(zhuǎn)的角度值，單位為deg，參數(shù)值可以是正數(shù)也可以是負(fù)數(shù)。如果為正，元素將圍繞x軸順時(shí)針旋轉(zhuǎn)；如果為負(fù)，元素將圍繞x軸逆時(shí)針旋轉(zhuǎn)。10.2.33D變形

rotateY()rotateY()可以讓指定元素圍繞y軸旋轉(zhuǎn)?；菊Z(yǔ)法格式transform:rotateY(a);參數(shù)a與rotateX(a)中的a含義相同，用于定義旋轉(zhuǎn)的角度。如果參數(shù)值為正，元素圍繞y軸順時(shí)針旋轉(zhuǎn)；如果參數(shù)值為負(fù)，元素圍繞y軸逆時(shí)針旋轉(zhuǎn)。10.2.33D變形

rotate3d()rotate3d()屬性是綜合了rotateX()、rotateY()和rotateZ()的復(fù)合屬性，可以設(shè)置多個(gè)軸的旋轉(zhuǎn)效果?；菊Z(yǔ)法格式rotate3d(x,y,z,angle);參數(shù)x、y、z的值可以為0或1，如果要沿著某個(gè)軸旋轉(zhuǎn)，就將該軸的參數(shù)值設(shè)置為1，否則設(shè)置為0。angle為要旋轉(zhuǎn)的角度，參數(shù)值是以deg為單位的數(shù)值。10.2.33D變形

常用的3D變形效果3D變形效果描述translate3d(x,y,z)用于設(shè)置3D移動(dòng)效果，沿x軸、y軸和z軸位移translateX(x)用于設(shè)置3D移動(dòng)效果，沿x軸位移translateY(y)用于設(shè)置3D移動(dòng)效果，沿y軸位移translateZ(z)用于設(shè)置3D移動(dòng)效果，沿z軸位移scale3d(x,y,z)用于設(shè)置3D縮放效果，沿x軸、y軸和z軸縮放scaleX(x)用于設(shè)置3D縮放效果，沿x軸縮放scaleY(y)用于設(shè)置3D縮放效果，沿y軸縮放scaleZ(z)用于設(shè)置3D縮放效果，沿z軸縮放10.2.33D變形

3D變形的相關(guān)屬性perspective屬性主要用于設(shè)置子元素的透視效果，透視效果可以影響元素進(jìn)行3D變形時(shí)的視覺(jué)效果，增強(qiáng)三維空間感?；菊Z(yǔ)法格式perspective:屬性值;perspective屬性值可以為none或者數(shù)值。其中none表示取消透視效果，而數(shù)值通常以像素為單位。元素3D旋轉(zhuǎn)的透視效果由屬性值的大小決定，屬性值越小，透視效果越明顯。10.2.33D變形

3D變形的相關(guān)屬性transform-style屬性用于為子元素創(chuàng)建三維空間，使三維空間中的子元素產(chǎn)生更加逼真的立體效果。transform-style屬性的取值有兩個(gè)——flat和preserve-3d，具體介紹如下。flat：默認(rèn)屬性，不創(chuàng)建三維空間，子元素默認(rèn)位于平面中。preserve-3d：創(chuàng)建三維空間，子元素位于三維空間中。10.2.33D變形

3D變形的相關(guān)屬性backface-visibility屬性用于設(shè)置元素進(jìn)行3D變形時(shí)，是否顯示背面。backface-visibility屬性的取值有兩個(gè)，visible和hidden，具體介紹如下。visible：默認(rèn)屬性，背面可見(jiàn)。hidden：背面不可見(jiàn)。動(dòng)畫10.310.3.1@keyframes規(guī)則

@keyframes規(guī)則用于創(chuàng)建并定義動(dòng)畫的關(guān)鍵幀，通過(guò)@keyframes規(guī)則，我們可以精確地定義動(dòng)畫在不同時(shí)間點(diǎn)的樣式或變換效果?；菊Z(yǔ)法格式@keyframes關(guān)鍵幀名稱{

關(guān)鍵幀選擇器1{動(dòng)作狀態(tài)}

關(guān)鍵幀選擇器2{動(dòng)作狀態(tài)}

……

關(guān)鍵幀選擇器n{動(dòng)作狀態(tài)}}關(guān)鍵幀名稱：將被animation相關(guān)屬性引用，不能為空，可由用戶自行定義。關(guān)鍵幀選擇器：用于指定當(dāng)前關(guān)鍵幀要應(yīng)用到整個(gè)動(dòng)畫過(guò)程中的時(shí)間點(diǎn)，取值可以是百分?jǐn)?shù)、from或者to。其中from和0%效果相同，表示動(dòng)畫的開始，to和100%效果相同，表示動(dòng)畫的結(jié)束。動(dòng)作狀態(tài)：由CSS樣式控制，多個(gè)樣式之間用英文分號(hào)分隔，不能為空。注意：InternetExplorer9以及更早版本的瀏覽器不支持@keyframes規(guī)則或animation屬性。10.3.2animation-name屬性

animation-name屬性用于定義要應(yīng)用的動(dòng)畫名稱，該動(dòng)畫名稱會(huì)被@keyframes規(guī)則引用。基本語(yǔ)法格式animation-name:關(guān)鍵幀名稱|none;animation-name屬性初始值為none，適用于所有塊元素和行內(nèi)元素。關(guān)鍵幀名稱和@keyframes規(guī)則中定義的關(guān)鍵幀名稱相同。如果值為none，則表示不應(yīng)用任何動(dòng)畫。10.3.3animation-duration屬性

animation-duration屬性用于定義完成整個(gè)動(dòng)畫效果所需要的時(shí)間?；菊Z(yǔ)法格式animation-duration:時(shí)間;animation-duration屬性的值可以使用以秒（s）或毫秒（ms）作為單位的時(shí)間。默認(rèn)情況下，該屬性的值為0，表示不應(yīng)用任何動(dòng)畫效果。如果值為負(fù)，則會(huì)被視為0。10.3.4animation-timing-function屬性

animation-timing-function屬性用來(lái)設(shè)置動(dòng)畫播放速度的變化。基本語(yǔ)法格式animation-timing-function:inear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);屬性值描述linear用于設(shè)置動(dòng)畫勻速運(yùn)動(dòng)ease默認(rèn)屬性值。用于設(shè)置動(dòng)畫慢速開始，然后加快速度，最后慢速結(jié)束ease-in用于設(shè)置動(dòng)畫慢速開始ease-out用于設(shè)置動(dòng)畫慢速結(jié)束ease-in-out用于設(shè)置動(dòng)畫慢速開始和結(jié)束cubic-bezier(n,n,n,n)用于設(shè)置加速或者減速的貝塞爾曲線的形狀，其中n為0~110.3.5animation-delay屬性

animation-delay屬性用于設(shè)置動(dòng)畫的延遲時(shí)間，即規(guī)定動(dòng)畫什么時(shí)候開始。animation-delay屬性的值是以秒（s）或者毫秒（ms）為單位的時(shí)間。如果不設(shè)置animation-delay屬性的值，則默認(rèn)為0，即動(dòng)畫立即開始。需要注意的是，animation-delay屬性的值可以為負(fù)值。當(dāng)設(shè)置為負(fù)值時(shí)，動(dòng)畫會(huì)跳過(guò)該時(shí)間段，立即開始播放。基本語(yǔ)法格式animation-delay:時(shí)間;10.3.6animation-iteration-count屬性

animation-iteration-count屬性用于設(shè)置動(dòng)畫的播放次數(shù)。animation-iteration-count屬性的初始值為1，即動(dòng)畫播放1次。如果希望動(dòng)畫循環(huán)播放，可以將屬性值設(shè)置為infinite。基本語(yǔ)法格式animation-iteration-count:數(shù)字|infinite;10.3.7animation-direction屬性

animation-direction屬性用于設(shè)置當(dāng)前動(dòng)畫播放的方向，即動(dòng)畫播放完成后是否逆向交替循環(huán)。animation-direction屬性包括normal、alternate和reverse這3個(gè)屬性值：normal：默認(rèn)值，動(dòng)畫正常播放。reverse：動(dòng)畫逆向播放。alternate：動(dòng)畫在奇數(shù)次（如1、3、5）正常播放，而在偶數(shù)次（如2、4、6）逆向播放?；菊Z(yǔ)法格式a