HTML5 CSS3Web前端開發(fā)技術(shù)（任務(wù)式）（微課版）（于麗娜第2版） 教案10 《利用CSS3動畫美化頁面》

《》教案20-20學(xué)年第學(xué)期課程名稱：授課教師：職稱：開課部門：年月日

《》教案首頁課程名稱授課專業(yè)班級授課教師職稱部門課程類型學(xué)位課□公共必修課□專業(yè)必修課□素質(zhì)拓展必修課□公共選修課□專業(yè)選修課□素質(zhì)拓展選修課非學(xué)位課□公共必修課專業(yè)必修課□素質(zhì)拓展必修課□公共選修課□專業(yè)選修課□素質(zhì)拓展選修課課程性質(zhì)□理論□實(shí)踐理論+實(shí)踐考核方式考試□考查課程教學(xué)總學(xué)時數(shù)64學(xué)分3.5學(xué)情分析大*年級的學(xué)生首次正式接觸WEB的相關(guān)概念，但是在之前的基礎(chǔ)課程中學(xué)過***（操作系統(tǒng)、計(jì)算機(jī)原理、Python編程、C語言編程）等相關(guān)專業(yè)方面基礎(chǔ)知識，具備有一定的計(jì)算機(jī)操作能力，與基礎(chǔ)應(yīng)用知識；并且在日常中大量使用電腦與手機(jī)等計(jì)算機(jī)設(shè)備，其中日常生活中也對于網(wǎng)頁的使用更是頗多。但對于WEB方面的專業(yè)知識沒有一個準(zhǔn)確、完整的知識體系構(gòu)建。教學(xué)方法談?wù)摲?、講授法、演示法、練習(xí)法、抽象法教材名稱《HTML5+CSS3Web前端開發(fā)技術(shù)》作者于麗娜出版社及出版時間人民郵電出版社2021.09參考書目作者出版社及出版時間教研室意見教研室主任簽字：年月日注：表中□選項(xiàng)請打“√”。每門課程只需填寫一次本表。

《》教案授課教師班級學(xué)時6授課日期教學(xué)任務(wù)《利用CSS3動畫美化頁面》授課方式講授實(shí)踐授課地點(diǎn)多媒體教室實(shí)驗(yàn)/實(shí)訓(xùn)室□企業(yè)主要參考資料教學(xué)PPT、微課、動畫、思維導(dǎo)圖課程思政視頻習(xí)題等教學(xué)目標(biāo)素質(zhì)目標(biāo)：1.培養(yǎng)學(xué)生團(tuán)隊(duì)合作精神；2.培養(yǎng)學(xué)生獨(dú)立思考能力和崗位意識。知識目標(biāo)：1.了解transform2D變形；了解transition過渡動畫；理解animation網(wǎng)頁動畫實(shí)現(xiàn)過程；能力目標(biāo)：1.熟練使用變形與過渡制作常見的鼠標(biāo)交互特效；2.掌握使用動畫制作簡單的循環(huán)特效。教學(xué)內(nèi)容CSS3形變CSS3過渡CSS3動畫重點(diǎn)難點(diǎn)教學(xué)重點(diǎn)：CSS3形變CSS3過渡CSS3動畫教學(xué)難點(diǎn)：CSS3動畫教學(xué)方法談?wù)摲?、講授法、演示法、練習(xí)法素材資源R文本素材R實(shí)物展示RPPT幻燈片□音頻素材R視頻素材R動畫素材R圖形/圖像素材□網(wǎng)絡(luò)資源□其他課后作業(yè)任務(wù)一：總結(jié)提升任務(wù)二：能力進(jìn)階教學(xué)反思注：教案按授課次數(shù)填寫，每次授課均應(yīng)填寫一份本表。重復(fù)班授課可不另填寫教案。?

教學(xué)過程及內(nèi)容一、導(dǎo)入新課【約5分鐘】教師：通過前面知識的學(xué)習(xí)，可以制作出一個靜態(tài)的頁面?？墒俏覀儠诰W(wǎng)頁上看到有很多圖片或按鈕會伴隨有動畫的效果。在以往，這些效果都是設(shè)計(jì)師依賴動態(tài)圖片、Flash或JavaScript完成的。而CSS3將解決這一問題，借助CSS3可以輕松傾斜、縮放、移動及翻轉(zhuǎn)元素。本單元我們使用2D變形里的位移、旋轉(zhuǎn)、縮放，CSS3過渡，以及CSS3如何實(shí)現(xiàn)動畫效果。使用動畫來為已完成的頁面提高的視覺體驗(yàn)。應(yīng)用動畫樣式將首頁的靜態(tài)大圖改造成一個具有自動交替變換背景圖片輪播區(qū)域，為頁面中的靜態(tài)內(nèi)容增加鼠標(biāo)互動效果，提升頁面的友好度，希望通過反復(fù)優(yōu)化修改頁面的過程，提升精益求精的工匠精神。二、新知識點(diǎn)、技能點(diǎn)講解【約x分鐘】新課講解1：【約20分鐘】教師：CSS3變形是一些效果的集合，如平移、旋轉(zhuǎn)、縮放、傾斜效果，每個效果都可以稱為變形（transform)，它們可以操控元素發(fā)生平移、旋轉(zhuǎn)、縮放、傾斜等變化。這些效果在之前都是需要依賴動態(tài)圖片、Flash動畫、JavaScript才能完成的。現(xiàn)在可以使用純CSS來實(shí)現(xiàn)變形而不需要這些額外的文件，再一次提升了開發(fā)的效率，也提高了頁面的執(zhí)行效率。......函數(shù)功能translate()2D平移函數(shù)，基于X-Y坐標(biāo)重新定位元素的位置。rotate()2D旋轉(zhuǎn)函數(shù)，在可見平面上對元素進(jìn)行順時針旋轉(zhuǎn)，單位為度（deg）。scale()2D縮放函數(shù)，對元素在X軸水平方向，Y軸方向進(jìn)行縮小放大。Skew()2D傾斜函數(shù)，表示元素沿著X(Y)軸方向傾斜angleX(angleY)角度Matrix()2D組合函數(shù)，將所有2D變形函數(shù)（旋轉(zhuǎn)，縮放，移動及傾斜）組合在一起。（案例演示）新課講解2：【約15分鐘】教師：上面的是元素進(jìn)行形變，但是仍然還是靜態(tài)的，沒有動起來。那么我們?nèi)绾谓柚鶦SS讓頁面動起來？CSS3中過渡(transition)

和animations兩種方法都可以實(shí)現(xiàn)動畫效果。transition呈現(xiàn)的是一種過渡，是一種動畫轉(zhuǎn)換的過程，如漸現(xiàn)、漸弱、動畫快慢等。transition屬性和CSS3其他屬性一樣，離不開瀏覽器對它的支持，在早期使用時，需要帶上各瀏覽器的前綴，不過在線雖然主流瀏覽器已經(jīng)良好的支持過度了，但是最好還是養(yǎng)成添加瀏覽器前綴的習(xí)慣。屬性值（CSS樣式）說明transition-property指定過渡或動態(tài)模擬的CSS屬性transitin-duration指定完成過渡所需要的時間。transition-timing-function指定過渡函數(shù)。transition-delay指定過渡開始出現(xiàn)的延遲時間。transition聲明設(shè)置所有過渡屬性（案例演示）學(xué)生：（討論分析）教師：總結(jié)下相對定位的特點(diǎn)：設(shè)置相對定位的盒子會相對它原來的位置，通過指定偏移，到達(dá)新的位置。它對父級盒子和相鄰的盒子都沒有任何影響。設(shè)置相對定位的盒子原來的位置會被保留下來。新課講解3：【約15分鐘】教師：絕對定位同時需要配合top、left、bottom與right偏移量與參考依據(jù)來進(jìn)行定位，與相對定位所不同的是，絕對定位的依據(jù)是該定位元素的最近且具有定位屬性的祖先元素。（案例演示）學(xué)生：（討論分析）教師：使用了絕對定位的元素(第二個盒子)以它最近的一個已經(jīng)定位的“祖先”元素(#father)為基準(zhǔn)進(jìn)行偏移。絕對定位的元素從標(biāo)準(zhǔn)文檔流中脫離，這意味著它們對其他元素(第一個第三個盒子)的定位不會造成影響。進(jìn)行絕對定位的元素沒有沒有指定寬高的話，在定位之后會有類似浮動的包裹特性，即元的寬高由內(nèi)容的寬高決定。如果進(jìn)行絕對定位的元素，找不到最近的已經(jīng)定位的"祖先"元素，則將body元素作為定位的參考依據(jù)。這里的已定為指的是元素的定位置為relative、absolute或者fixed之一，通常是用relative與absolute進(jìn)行組合使用，因?yàn)榻o參考元素僅僅添加相對定位屬性而不提供偏移屬性的話，對與參考元素沒有任何影響?；仡櫳厦媸纠羞^渡動畫的過程，如果沒有鼠標(biāo)移入的效果去觸發(fā)過渡，其實(shí)div是不會發(fā)生任何變化的。偽類hover是觸發(fā)過渡機(jī)制中的一種。還有如下幾種。觸發(fā)類型說明偽類觸發(fā)hover、:active、:focus、:checked媒體查詢可以通過@media屬性判斷設(shè)備的尺寸，方向等。腳本觸發(fā)用JavaScript腳本觸發(fā)。新課講解4：【約45分鐘】教師：前面一節(jié)已經(jīng)詳細(xì)介紹了使用CSS3的transition屬性實(shí)現(xiàn)一些過渡的動畫效果。animation

實(shí)現(xiàn)動畫和transition實(shí)現(xiàn)動畫非常類似，都是通過改變元素的屬性值來實(shí)現(xiàn)動畫效果的。animation是通過類似Flash動畫的關(guān)鍵幀來聲明一個動畫；在animation屬性中調(diào)用關(guān)鍵幀聲明的動畫實(shí)現(xiàn)一個更為復(fù)雜的動畫效果，兩個步驟完成的。在CSS3中把@keyframes

稱為關(guān)鍵幀。幀的概念，簡單說就是我們看到的動畫并非連貫的的，而是在極小的時間間隔內(nèi)，進(jìn)行多張圖片的（幀）的依次切換得到的。也就是關(guān)鍵幀是組成動畫的圖片中的一張。在CSS中這個關(guān)鍵幀還可以實(shí)現(xiàn)設(shè)置多段屬性，而不是單一的起始與終止。@keyframes自定義組合名稱{from{/*第一幀的CSS樣式寫在這里*/}percentage{/*對應(yīng)百分比數(shù)的幀的CSS樣式寫在這里*/}to{/*最后一幀CSS樣式寫在這里*/}}代碼中的keyframes用來將多個幀進(jìn)行打包組合以便可以直接調(diào)用，自定義的組合名稱盡可能語義化，方便代碼閱讀，例如關(guān)于輪播圖的一組關(guān)鍵幀動畫組合名設(shè)定為loop-kf。在這個組合中可以使用from{}、to{}、百分比小數(shù){}的方式指定過程中的幀數(shù)以及每一個幀所對應(yīng)的樣式內(nèi)容。from幀相當(dāng)于0%幀，即動畫的第一幀，動畫的起始狀態(tài)；to幀對應(yīng)100%幀，即動畫最后一幀，動畫的結(jié)束狀態(tài)。@keyframes只是用來聲明一個動畫。如果不通過CSS樣式來調(diào)用這個動畫，是無任何效果的。因?yàn)檫@個時候我們僅僅定義了一套變化的過程，但是并沒有結(jié)合時間的概念，讓這個動畫的過程與時間結(jié)合。animation的調(diào)用語法如下：animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-mode;又是這樣復(fù)雜，我們來把它漢化一下：動畫調(diào)用：動畫組合名動畫持續(xù)時間動畫時間函數(shù)動畫延遲時間按動畫技術(shù)動畫播放方向動畫播放狀態(tài)動畫播放前后操作屬性值說明animation-name動畫組合名，要調(diào)用的動畫組合名，由@keyframes定義。animation-duration動畫持續(xù)時間，動畫一個完整過程的時間用時。animation-timing-function動畫時間函數(shù)，通過時間函數(shù)進(jìn)行動畫過程中的速率設(shè)定。animation-delay動畫播放延遲，在動畫播放前的等待時間按。animation-iteration-count動畫計(jì)數(shù)，設(shè)定動畫的播放次數(shù)。默認(rèn)值為1，可以設(shè)定為正整數(shù)表示對應(yīng)正整數(shù)次數(shù)，或者infinite表示無限循環(huán)。animation-direction動畫播放方向，設(shè)定動畫是按照keyframes設(shè)定的順序正序或者逆序播放。默認(rèn)值，narmal代表正序播放；alternate則表示逆序播放。animation-play-state動畫播放狀態(tài)，提供給Javascript進(jìn)行動畫播放狀態(tài)的管理。設(shè)定值為running時進(jìn)行播放；設(shè)定值為paused時暫停。animation-fill-mode規(guī)定動畫在播放之前或之后，其動畫效果是否可見。對于時間函數(shù)，主要有以下的5中預(yù)設(shè)模式。動畫時間函數(shù)預(yù)設(shè)值功能ease元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)時速度由快到慢，逐漸變慢(默認(rèn)值)。linear元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)時速度恒速(勻速運(yùn)動)。ease-in元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)時速度越來越快(漸顯效果)。ease-out元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)時速度越來越慢(漸隱效果)。ease-in-out元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)時速度先加速再減速(漸顯漸隱效果)。掌握了CSS3的過渡語法后，回憶一下前面示例中過渡動畫的過程，如果沒有鼠標(biāo)移入的效果去觸發(fā)過渡，其實(shí)div是不會發(fā)生任何變化的。偽類hover是觸發(fā)過渡機(jī)制中的一種。還有哪些觸發(fā)方法呢?這里總結(jié)了部分出發(fā)的方式。偽類觸發(fā)：:hover、:active、:focus、:checked等。其中最常用的方式還是使用:hover實(shí)現(xiàn)。媒體查詢:可以通過@media屬性判斷設(shè)備的尺寸，方向等。JavaScript觸發(fā):用JavaScript腳本觸發(fā)。下面來總結(jié)下使用transition實(shí)現(xiàn)過渡動畫的使用步驟:(1)在默認(rèn)樣式中聲明元素的初始狀態(tài)樣式。(2)聲明過渡元素最終狀態(tài)樣式，如懸浮狀態(tài)。(3)在默認(rèn)樣式中通過添加過渡函數(shù).添加一些不同的樣式。新課講解5：【約20分鐘】教師：演示操作上機(jī)任務(wù)-制