HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運(yùn)用CSS知識，提升網(wǎng)頁布局能力和動態(tài)表現(xiàn)效果。27.4CSS過渡與動畫該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對網(wǎng)頁相關(guān)概念及技術(shù)有一些簡單的了解。知識目標(biāo)：（1）理解CSS過渡與動畫的意義。（2）掌握transition屬性的書寫格式，理解速度曲線過渡參數(shù)。（3）掌握@keyframes規(guī)則的創(chuàng)建與應(yīng)用。能力目標(biāo)：（1）具備使用css過渡完成級聯(lián)菜單的交互效果的能力。（2）具備創(chuàng)建@keyframes規(guī)則完成級聯(lián)菜單動態(tài)效果的能力。素養(yǎng)目標(biāo)：（1）了解本章成語的出處，理解成語含義與知識點(diǎn)理解的結(jié)合。（2）鼓勵學(xué)生使用@keyframes規(guī)則創(chuàng)建獨(dú)特的動態(tài)效果，培養(yǎng)他們的創(chuàng)新意識和創(chuàng)造力。過渡效果和@keyframes規(guī)則的應(yīng)用transition屬性的應(yīng)用，@keyframes規(guī)則的應(yīng)用。講解CSS過渡與動畫的意義，演示動畫效果，激發(fā)學(xué)生學(xué)習(xí)興趣。速度曲線屬性，@keyframes規(guī)則的定義。通過逐幀動畫效果加強(qiáng)對@keyframes規(guī)則的認(rèn)識。運(yùn)用實(shí)例演示法，通過實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動教學(xué)，鼓勵學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問題解決能力。利用在線實(shí)訓(xùn)平臺，提供個性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過提問或講授的形式回顧之前的知識點(diǎn)，引入本次課的相關(guān)知識點(diǎn)的背景知識，然后講授具體的知識要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評價或小組評價完成任務(wù)的檢測，教師最終進(jìn)行點(diǎn)評及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評價或小組評價是否正確、無誤達(dá)到任務(wù)要求復(fù)習(xí)偽元素選擇器在頁面裝飾上起到的意義。::before偽元素中，能否不寫content屬性，倘若無內(nèi)容的情況先，應(yīng)該如何設(shè)置content屬性值？回答問題教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識結(jié)構(gòu)。引入CSS過渡與動畫在網(wǎng)頁設(shè)計(jì)中扮演著至關(guān)重要的角色，它們?yōu)榫W(wǎng)頁增添了動態(tài)效果，提升了用戶體驗(yàn)，并使得網(wǎng)頁界面更加生動和吸引人。CSS過渡的意義：可以在用戶與網(wǎng)頁進(jìn)行交互時（如鼠標(biāo)懸停、點(diǎn)擊等）提供視覺上的反饋，使交互操作更加順滑和自然。使用CSS過渡可以簡化代碼，因?yàn)檫^渡效果是通過CSS屬性來控制的，而不需要使用JavaScript等編程語言來實(shí)現(xiàn)。CSS動畫的意義：可以包含多個步驟和關(guān)鍵幀。這使得網(wǎng)頁設(shè)計(jì)師能夠制作出更加生動和有趣的用戶界面。聽講講授，演示。任務(wù)驅(qū)動法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識講授7.4.1過渡效果transition transition:屬性過渡持續(xù)時間速度曲線延遲;但個別屬性是不允許有過渡過程的，比如期待一個元素從不可見到慢慢可見，采用了display:none;狀態(tài)轉(zhuǎn)入display:block;，這實(shí)際是無法生效的。我們換一下思路，可以采用不透明度opacity:0;狀態(tài)轉(zhuǎn)入opacity:1;，或者采用位置偏移、增加父容器去響應(yīng)等等的方式。1.速度曲線屬性transition-timing-function2.延遲時間transition-delay聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識點(diǎn)。實(shí)驗(yàn)法可以在講授過程中對個別難以理解的知識點(diǎn)有直觀的剖析。7.4.2@keyframes規(guī)則CSS3的?@keyframes規(guī)則用于創(chuàng)建動畫。允許你創(chuàng)建一個或多個關(guān)鍵幀，?每個關(guān)鍵幀可以設(shè)置不同的樣式，?從而在動畫過程中改變元素的樣式。animation屬性是一個簡寫屬性，用于設(shè)置六個動畫屬性，最簡潔的格式可以為：animation：keyframes規(guī)則的名稱+動畫一次所用時間+循環(huán)播放次數(shù)提問：為什么正方形在30%時間點(diǎn)上向右移動了400px，但是在本輪結(jié)束時能回到起點(diǎn)？換個角度思考，在0%時間點(diǎn)上，實(shí)際隱藏了一個什么屬性？按上個問題思路，為什么正方形在本輪結(jié)束時與下一輪開始時，有個從圓形生硬切換到正方形的動畫缺陷？聽講、回答問題教師演示案例10代碼。任務(wù)實(shí)施【案例9】為如圖7-23所示的子菜單出現(xiàn)過程設(shè)置過渡效果。（1）編寫相應(yīng)的HTML代碼，如圖7-24所示。（2）編寫對應(yīng)的CSS代碼，如圖7-25所示。（3）保存文件并預(yù)覽網(wǎng)頁，不斷調(diào)整過渡時間、速度曲線以達(dá)到最優(yōu)視覺效果。【案例11】打開“第7章過渡效果.html”，給子菜單添加下拉過程動畫的效果。對應(yīng)的HTML與CSS代碼如圖7-27所示。上機(jī)操作巡堂指導(dǎo)，提醒易出錯的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測被考評人（組）：考評人：日期：評分項(xiàng)目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10案例9Html結(jié)構(gòu)正確，容器命名合理。20過渡效果相關(guān)屬性正確，運(yùn)行效果達(dá)到預(yù)期。20案例11Html結(jié)構(gòu)正確，容器命名合理。20動畫效果相關(guān)屬性正確，關(guān)鍵幀狀態(tài)定義合理，運(yùn)行效果達(dá)到預(yù)期。30總分說明：評分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)評作業(yè)抽樣點(diǎn)評分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力。總結(jié)通過本課的學(xué)習(xí)：（1）理解CSS過渡與動畫的意義。（2）掌握transition屬性的書寫格式，理解速度曲線過渡參數(shù)。（3）掌握@keyframes規(guī)則的創(chuàng)建與應(yīng)用。（4）使用css過渡，