《HTML5+CSS3網(wǎng)頁設(shè)計(jì)技術(shù)》授課教案授課教案學(xué)校******大學(xué)（學(xué)院）任課教師***授課題目模塊九轉(zhuǎn)換、過渡和動(dòng)畫授課時(shí)間長度8學(xué)時(shí)所用教材HTM5+CSS3網(wǎng)頁設(shè)計(jì)技術(shù)，黃玉春主編；中國科學(xué)技術(shù)出版社教學(xué)目標(biāo)｜知識(shí)目標(biāo)｜（1）理解CSS32D轉(zhuǎn)換，并掌握常用的2D轉(zhuǎn)換。（2）理解CSS33D轉(zhuǎn)換，并掌握常用的3D轉(zhuǎn)換。（3）能夠掌握CSS3的過渡效果，實(shí)現(xiàn)一些簡單的動(dòng)態(tài)效果。（4）理解過渡與動(dòng)畫的區(qū)別，并能制作簡單動(dòng)畫，將其應(yīng)用于網(wǎng)頁。｜能力目標(biāo)｜（1）能夠理解各種網(wǎng)頁特效的本質(zhì)。（2）能夠正確選擇相應(yīng)技術(shù)制作相應(yīng)特效。｜素質(zhì)目標(biāo)｜（1）通過學(xué)習(xí)各種實(shí)例解析，培養(yǎng)分析問題和解決問題的能力。（2）通過動(dòng)態(tài)效果與動(dòng)畫案例的制作，培養(yǎng)嚴(yán)密的邏輯思維能力。教學(xué)重點(diǎn)（1）CSS32D轉(zhuǎn)換。（2）掌握CSS3的過渡效果，實(shí)現(xiàn)一些簡單的動(dòng)態(tài)效果。教學(xué)難點(diǎn)CSS33D轉(zhuǎn)換。教學(xué)方法任務(wù)引入法、課堂討論、理論講解、實(shí)操訓(xùn)練教學(xué)用具多媒體教學(xué)設(shè)備、教材、課件、實(shí)訓(xùn)素材教學(xué)過程主要教學(xué)內(nèi)容及步驟考勤教師使用App或者點(diǎn)名等方式進(jìn)行簽到；學(xué)生按照老師要求簽到任務(wù)導(dǎo)入打開一個(gè)有動(dòng)畫特效的網(wǎng)頁，查看網(wǎng)頁上的動(dòng)畫效果元素，引出本任務(wù)教學(xué)內(nèi)容。教學(xué)內(nèi)容任務(wù)一CSS32D轉(zhuǎn)換CSS中的2D轉(zhuǎn)換允許在二維空間中執(zhí)行一些基本的變換操作，例如移動(dòng)、旋轉(zhuǎn)、縮放或扭曲等。變換后的元素與絕對定位的元素類似，不會(huì)影響周圍的元素，但可以和周圍的元素重疊，不同的是，轉(zhuǎn)換后的元素仍處于文檔流（在頁面中仍然會(huì)占用為轉(zhuǎn)換之前的空間）。一、轉(zhuǎn)換中的二維坐標(biāo)系在正確理解和運(yùn)用CSS32D轉(zhuǎn)換之前一定要理解其所使用的坐標(biāo)系，如圖9-1所示。圖9-1CSS32D轉(zhuǎn)換坐標(biāo)系轉(zhuǎn)換元素的左上角是坐標(biāo)原點(diǎn)，向右為x軸的正方向，向下是y軸的正方向。二、2D位移2D位移可以改變元素的位置?？梢酝ㄟ^transform屬性translate()方法來實(shí)現(xiàn)?；菊Z法格式如下：transform:translate(x,y);在上面的語法中，參數(shù)x，y分別表示水平方向（x）和垂直方向（y）的位移量。在實(shí)際開發(fā)中，如果只希望元素水平方向或垂直方向上的移動(dòng)，還可以通過transform屬性translateX()方法或translateY()方法來實(shí)現(xiàn)。三、2D縮放2D縮放可以實(shí)現(xiàn)元素的放大或縮小?？梢酝ㄟ^transform屬性scale()方法來實(shí)現(xiàn)?；菊Z法格式如下：transform:scale(x,y);在上面的語法中，參數(shù)x，y分別表示水平方向（x）和垂直方向（y）的縮放倍數(shù)。參數(shù)可以是正數(shù)或負(fù)數(shù)，不需要加單位。其中，正數(shù)用于縮放大元素（大于1放大，小于1縮小），負(fù)數(shù)用于翻轉(zhuǎn)縮放元素。當(dāng)?shù)?個(gè)參數(shù)值省略，則第2個(gè)參數(shù)值默認(rèn)等于第1個(gè)參數(shù)值?？s放元素是以元素的中心點(diǎn)為參考點(diǎn)。四、2D旋轉(zhuǎn)2D旋轉(zhuǎn)可以讓元素在二維平面內(nèi)（沿Z軸，Z軸方向是由屏幕垂直指向讀者），順時(shí)針旋轉(zhuǎn)或逆時(shí)針旋轉(zhuǎn)?？梢酝ㄟ^transform屬性rotate()方法來實(shí)現(xiàn)?；菊Z法格式如下：transform:rotate(angle);在上面的語法中，參數(shù)angle表示旋轉(zhuǎn)的角度值，單位是deg。角度值為正值表示順時(shí)針旋轉(zhuǎn)，負(fù)值表示逆時(shí)針旋轉(zhuǎn)。旋轉(zhuǎn)參考點(diǎn)為元素的中心點(diǎn)。五、變換原點(diǎn)元素變換時(shí)，默認(rèn)的原點(diǎn)是元素的中心（50%50%），使用transform-origin可以設(shè)置變換的原點(diǎn)。修改變換原點(diǎn)對位移沒有影響，對旋轉(zhuǎn)、縮放和扭曲會(huì)產(chǎn)生影響?；菊Z法格式如下：transform-origin:x-axisy-axisz-axis;在上面的語法中，參數(shù)含義如下：（1）x-axis：定義原點(diǎn)X軸方向位于元素的位置（默認(rèn)值50%，即中間）?？赡艿闹担簂eft|center|right|length|%。（2）y-axis：定義原點(diǎn)Y軸方向位于元素的位置（默認(rèn)值50%，即中間）?？赡艿闹担簍op|center|bottom|length|%。（3）z-axis：定義原點(diǎn)Z軸方向位于元素的位置（默認(rèn)值0，即XY平面）。只能定義值：length。【例9-5】變換原點(diǎn)旋轉(zhuǎn)。<style>/*變換原點(diǎn)后的2D旋轉(zhuǎn)30度*/.one{transform:rotate(30deg);}/*變換原點(diǎn)左上角后的2D旋轉(zhuǎn)30度*/.two{transform-origin:0px0px;transform:rotate(30deg);}</style>文件在瀏覽器中的預(yù)覽效果如圖9-6所示。圖9-6變換原點(diǎn)旋轉(zhuǎn)的效果六、matrix()方法matrix()方法可以看作是skew()、scale()和translate()幾個(gè)方法的縮寫形式，通過matrix()方法可以同時(shí)定義2D扭曲、縮放和位移操作?；菊Z法格式如下：transform:matrix(a,b,c,d,tx,ty);matrix()方法使用起來比較復(fù)雜，不容易理解，建議用多重變換。即多個(gè)變換，可以同時(shí)使用一個(gè)transform來編寫。例如：transform:translate(-50%,-50%)rotate(45deg);注意：多重變換時(shí)，建議最后寫旋轉(zhuǎn)變換。任務(wù)二CSS33D轉(zhuǎn)換（選學(xué)）在CSS中，除了可以對頁面中的元素進(jìn)行2D轉(zhuǎn)換外，還可以對象元素進(jìn)行3D轉(zhuǎn)換（將頁面看作是一個(gè)三維空間來對頁面中的元素進(jìn)行移動(dòng)、旋轉(zhuǎn)、縮放和傾斜等操作）。一、開啟3D空間元素進(jìn)行3D變換的首要操作需要將父元素開啟3D空間。使用transform-style開啟3D空間?；菊Z法格式如下：transform-style:flat|preserve-3d;在上面的語法中，參數(shù)可選值如下。（1）flat：讓子元素位于此元素的二維平面內(nèi)（2D空間），此為默認(rèn)值。（2）preserve-3d：讓子元素位于此元素的三維空間內(nèi)（3D空間）。二、設(shè)置景深何為景深？指定觀察者與z=0平面（可理解為屏幕）的距離，能讓發(fā)生3D變換的元素，產(chǎn)生透視效果，看來更加立體。使用perspective設(shè)置景深。基本語法格式如下：perspective:none|value;在上面的語法中，參數(shù)可選值如下：（1）none：不指定透視（默認(rèn)值）（2）value：長度值。指定觀察者距離z=0平面的距離（一般距離設(shè)置在500px-1000px），不允許負(fù)值。注意：perspective設(shè)置在發(fā)生3D變換元素的父元素。三、透視點(diǎn)位置所謂透視點(diǎn)位置，就是觀察者位置，默認(rèn)的透視點(diǎn)處于轉(zhuǎn)換元素的中心。使用perspective-origin設(shè)置觀察者位置（透視點(diǎn)的位置）?；菊Z法格式如下：perspective-origin:x-axis,y-axis,z-axis;在上面的語法中，參數(shù)含義如下。（1）x-axis：定義視圖被置于X軸的何處。可能的值：left|center|right|length|%。（2）y-axis：定義視圖被置于Y軸的何處。可能的值：top|center|bottom|length|%。（3）z-axis：定義視圖被置于Z軸的何處?？赡艿闹担簂ength。默認(rèn)值為50%50%0，表示透視點(diǎn)位置在元素的中心位置。例如：perspective-origin:400px300px;上面的代碼設(shè)置了相對轉(zhuǎn)換坐標(biāo)原點(diǎn)往右偏移400px，往下偏移300px（相當(dāng)于人蹲下300像素，然后向右移動(dòng)400像素看元素）。注意：通常情況下，不需要調(diào)整透視點(diǎn)位置。四、3D旋轉(zhuǎn)3D旋轉(zhuǎn)主要是讓元素沿x軸和y軸旋轉(zhuǎn)，具體使用方式如下。（1）先給元素添加轉(zhuǎn)換屬性transform。（2）編寫transform的具體值如下：rotateX(angle)：設(shè)置x軸旋轉(zhuǎn)角度，需指定一個(gè)角度值（deg），面對x軸正方向：正值順時(shí)針，負(fù)值逆時(shí)針。rotateY(angle)：設(shè)置y軸旋轉(zhuǎn)角度，需指定一個(gè)角度值（deg），面對y軸正方向：正值順時(shí)針，負(fù)值逆時(shí)針。rotate3d(x,y,z,angle)：前3個(gè)參數(shù)分別表示坐標(biāo)軸：x、y、z，第4個(gè)參數(shù)表示旋轉(zhuǎn)的角度，參數(shù)不允許省略。例如：transform:rotate3d(1,1,1,30deg)的意思是x、y、z分別旋轉(zhuǎn)30度。五、3D位移2D位移是讓元素沿x、y軸位移，3D位移是讓元素沿z軸位移。3D位移相關(guān)方法如下：translateZ(z)：設(shè)置z軸位移，需指定長度值，正值向屏幕外，負(fù)值向屏幕里，且不能寫百分比。ranslate3d(x,y,z)：第1個(gè)參數(shù)對應(yīng)x軸，第2個(gè)參數(shù)對應(yīng)y軸，第3個(gè)參數(shù)對應(yīng)z軸，且均不能省略。六、3D縮放3D縮放是讓元素沿z軸縮放。3D縮放相關(guān)方法如下：scaleZ(z)：設(shè)置z軸方向的縮放比例，值為一個(gè)數(shù)字，1表示不縮放，大于1放大，小于1縮小。scale3d(x,y,z)：第1個(gè)參數(shù)對應(yīng)x軸，第2個(gè)參數(shù)對應(yīng)y軸，第3個(gè)參數(shù)對應(yīng)z軸，參數(shù)不允許省略。任務(wù)三利用CSS過渡效果CSS提供了強(qiáng)大的過渡屬性，使用此屬性可以在不使用Flash動(dòng)畫或JavaScript腳本的情況下，為元素從一種形式轉(zhuǎn)變?yōu)榱硗庖环N形式添加效果。一、過渡屬性CSS3過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。transition-property屬性設(shè)置應(yīng)用過渡的CSS屬性。其語基本法格式如下：選擇器{transition-property:none|all|property;…}其屬性取值有以下幾種。（1）none：沒有屬性獲得過渡效果（默認(rèn)值）。（2）all：所有屬性都將獲得過渡效果。（3）property：定義過渡效果的CSS屬性名稱，多個(gè)屬性之間用逗號分隔?！纠?-10】transition-property屬性使用演示。當(dāng)鼠標(biāo)懸停在區(qū)塊上，區(qū)塊大小改變。<style>div{width:100px;height:100px;background:red;transition-property:width,height;}div:hover{width:200px;height:200px;}</style>需要說明的是，CSS過渡效果需要一個(gè)觸發(fā)事件，例如，鼠標(biāo)懸停在有過渡效果的元素上。二、過渡持續(xù)時(shí)間屬性transition-duration屬性用于定義過渡屬性的持續(xù)時(shí)間。其語法格式如下：選擇器{transition-duration:time;}在上面的語法格式中，transition-duration屬性的默認(rèn)值是0。time取值為時(shí)間，可以是秒（m）或者毫秒（ms）。例如，將上例的樣式代碼修改如下：div{width:100px;height:100px;background:red;transition-property:width,height;transition-duration:2s;}在瀏覽器中運(yùn)行文件，當(dāng)鼠標(biāo)懸停在區(qū)塊上時(shí)，區(qū)塊從寬度和高度100px變化到寬度和高度200px，花費(fèi)2秒鐘完成效果切換。三、過渡速度曲線屬性transition-timing-function屬性規(guī)定了過渡效果的速度曲線。其基本語法格式如下：選擇器{transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);}在上面的語法格式中，transition-timing-function屬性值有l(wèi)inear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(參數(shù))等。具體說明如下。（1）linear：規(guī)定以相同速度開始至結(jié)束的過渡效果（等于cubic-bezier(0,0,1,1)）。（2）ease：默認(rèn)值。規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。（3）ease-in：規(guī)定以慢速開始的過渡效果（等于cubic-bezier(0.42,0,1,1)）。（4）ease-out：規(guī)定以慢速結(jié)束的過渡效果（等于cubic-bezier(0,0,0.58,1)）。（5）ease-in-out：規(guī)定以慢速開始和結(jié)束的過渡效果（等于cubic-bezier(0.42,0,0.58,1)）。（6）cubic-bezier(n,n,n,n)：在cubic-bezier（貝塞爾曲線）函數(shù)中定義自己的值。可能的值是0~1之間的數(shù)值。【例9-11】transition-timing-function屬性使用演示。當(dāng)鼠標(biāo)懸停在區(qū)塊上，區(qū)塊過渡效果的速度曲線變化。<style>.outer{width:800px;height:270px;margin:0auto;border:1pxsolidblack;}.outer:hover.box{width:800px;}.box{width:200px;height:30px;line-height:30px;/*讓所有能過渡的屬性，都過渡*/transition-property:all;/*設(shè)置一個(gè)時(shí)間，所有元素都用*/transition-duration:4s;/*過渡延遲*/transition-delay:1s;}.box1{background-color:skyblue;transition-timing-function:ease;}.box2{background-color:orange;transition-timing-function:linear;}.box3{background-color:gray;transition-timing-function:ease-in;}.box4{background-color:tomato;transition-timing-function:ease-out;}.box5{background-color:green;transition-timing-function:ease-in-out;}.box6{background-color:purple;transition-timing-function:step-start;}.box7{background-color:deepskyblue;transition-timing-function:step-end;}.box8{background-color:chocolate;transition-timing-function:steps(20,end);}.box9{background-color:gold;transition-timing-function:cubic-bezier(1,.35,.78,1.24);}</style>文件在瀏覽器中的預(yù)覽效果如圖9-14所示。圖9-14transition-timing-function屬性本例設(shè)置了過渡效果的速度曲線的幾種情況，當(dāng)鼠標(biāo)懸停在區(qū)塊上，各個(gè)子塊過渡效果的曲線變化情況的對比。四、過渡延遲時(shí)間屬性transition-delay屬性規(guī)定了過渡效果切換的延遲時(shí)間。其基本語法格式如下：選擇器{transition-delay:time;}在上面的語法格式中，transition-delay屬性的默認(rèn)值是0。time取值為時(shí)間，可以是秒（m）或者毫秒（ms）。例如，將上例的樣式代碼修改如下：div:hover{border-radius:50%;background:pink;transition-property:border-radius,background;transition-timing-function:ease-in-out;transition-duration:2s;transition-delay:200ms;}在瀏覽器中運(yùn)行文件。當(dāng)鼠標(biāo)懸停在區(qū)塊上，200毫秒后開始切換效果。切換需要花費(fèi)2秒的時(shí)間。經(jīng)過這樣處理，元素的切換效果更加平滑。五、過渡復(fù)合屬性transition屬性是一個(gè)復(fù)合屬性，用于在同一個(gè)屬性中設(shè)置transition-property、transition-duration、transition-timing-function和transition-delay等4個(gè)過渡屬性。其基本語法格式如下：選擇器{transition:propertydurationtiming-functiondelay;}使用transition-delay屬性設(shè)置過渡效果可以簡化代碼的書寫，但在定義時(shí)，它的各個(gè)參數(shù)必須按照順序進(jìn)行設(shè)置，不能顛倒。例如，代碼：div:hover{border-radius:50%;transition-property:border-radius,background;transition-duration:2s;transition-timing-function:ease-in-out;transition-delay:200ms;}可以簡寫為：div:hover{background:pink;transition:border-radius2sease-in-out200ms;}任務(wù)四CSS3動(dòng)畫制作利用transition屬性可以實(shí)現(xiàn)簡單的過渡動(dòng)畫，但過渡動(dòng)畫僅能指定開始和結(jié)束兩個(gè)狀態(tài)，整個(gè)過程都是由特定的方法來控制的，不是很靈活。本任務(wù)講解CSS3的動(dòng)畫與過渡的區(qū)別，以及CSS3動(dòng)畫制作方式。一、動(dòng)畫中的基本概念1．幀一段動(dòng)畫，從本質(zhì)上講就是一段時(shí)間內(nèi)連續(xù)播放的一定數(shù)量的畫面。每一幅畫面叫做“幀”。2．關(guān)鍵幀關(guān)鍵幀是指在構(gòu)成一段動(dòng)畫的若干幀中，起到?jīng)Q定性作用的2~3幀。如圖9-15所示。圖9-15關(guān)鍵幀二、過渡和動(dòng)畫的區(qū)別過渡和動(dòng)畫的主要區(qū)別在于：過渡需要觸發(fā)一個(gè)事件才會(huì)隨著時(shí)間改變其CSS屬性；而動(dòng)畫在不需要觸發(fā)任何事件的情況下，也可以顯式的隨時(shí)間變化來改變元素CSS屬性，達(dá)到一種動(dòng)畫的效果。（1）動(dòng)畫不需要事件觸發(fā)，過渡需要事件觸發(fā)。（2）過渡只有一組關(guān)鍵幀（開始-結(jié)束），動(dòng)畫可以設(shè)置多個(gè)關(guān)鍵幀。三、動(dòng)畫的基本使用1．定義關(guān)鍵幀（定義動(dòng)畫）要?jiǎng)?chuàng)建CSS動(dòng)畫，首先需要了解@keyframes規(guī)則，@keyframes規(guī)則用來定義動(dòng)畫各個(gè)階段（關(guān)鍵幀）的屬性值，語法格式如下：@keyframes動(dòng)畫名{from{properties:value;}/*percentage：定義動(dòng)畫的各個(gè)階段（關(guān)鍵幀），為百分比值，可以添加若干個(gè)*/percentage{properties:value;}to{properties:value;}}2．給元素應(yīng)用動(dòng)畫給元素應(yīng)用動(dòng)畫需要兩個(gè)必要的屬性。（1）animation-name：給元素指定具體的動(dòng)畫（指定要綁定到選擇器的關(guān)鍵幀的名稱）。（2）animation-duration：設(shè)置動(dòng)畫所需時(shí)間?！纠?-12】CSS動(dòng)畫。<style>@keyframesball{from{top:0px;left:0px;}/*也可以寫成0%{top:0px;left:0px;}*/25%{top:0px;left:350px;}50%{top:200px;left:350px;}75%{top:200px;left:0px;}to{top:0px;left:0px;}/*或：100%{top:0px;left:0px;}*/}div{width:100px;height:100px;border-radius:50%;background-color:red;position:relative;/*動(dòng)畫必要屬性*/animation-name:ball;animation-duration:2s;}</style>該例設(shè)置了一個(gè)小圓球從坐標(biāo)（0，0）經(jīng)過坐標(biāo)（0,350px）（200px,350px）(200px,0)，移動(dòng)到的坐標(biāo)（0,0）的一個(gè)動(dòng)畫。四、動(dòng)畫的屬性1．a(chǎn)nimation-delay屬性animation-delay屬性用于設(shè)置動(dòng)畫延遲，屬性值為數(shù)值，單位為s（秒）或ms（毫秒）。2．a(chǎn)nimation-timing-function屬性animation-timing-function屬性用于設(shè)置動(dòng)畫的類型（與過渡類似），常用值如下。（1）ease：平滑動(dòng)畫（默認(rèn)值）。（2）linear：線性過渡。（3）ease-in：慢→快。（4）ease-out：快→慢。（5）ease-in-out：慢→快→慢。（6）step-start：等同于steps(1,start)。（7）step-end：等同于steps(1,end)。（8）steps(integer,?)：