《網(wǎng)頁設計與Web前端開發(fā)》電子教案（第8周）一、教學基本信息??課程名稱??：網(wǎng)頁設計與Web前端開發(fā)??教學課時??：理論2學時+實踐1學時??授課對象??：計算機相關專業(yè)學生/Web前端開發(fā)初學者??教材章節(jié)??：第5章HTML5+CSS3移動網(wǎng)站布局（5.3-5.4節(jié)）二、教學目標（一）知識目標掌握CSS3變形（transform）的常用方法：平移（translate）、縮放（scale）、旋轉（rotate）、傾斜（skew）及復合使用。理解過渡（transition）的觸發(fā)機制，掌握transition-property、transition-duration等屬性的用法。掌握動畫（animation）的定義（@keyframes）與應用，熟悉animation-iteration-count、animation-direction等屬性。掌握CSS3新增背景屬性（background-clip、background-origin、background-size）及多重背景的設置。了解顏色漸變（線性漸變linear-gradient、徑向漸變radial-gradient）、倒影（-webkit-box-reflect）和遮罩（mask）的基本應用。（二）思政目標通過變形、過渡與動畫的組合應用，培養(yǎng)創(chuàng)新設計思維，理解“技術服務體驗”的前端開發(fā)理念。結合屬性參數(shù)的精確設置（如漸變角度、動畫時長），培養(yǎng)嚴謹細致的工匠精神。在實踐中體會代碼復用與優(yōu)化的重要性，樹立高效開發(fā)意識。三、教學重難點（一）教學重點變形函數(shù)的復合使用（如transform:rotate(30deg)translate(50px)）。過渡效果的觸發(fā)條件（如hover）及屬性配置。動畫關鍵幀（@keyframes）的定義與動畫屬性的簡寫。background-size的cover與contain值的區(qū)別及應用。線性漸變的方向控制與顏色節(jié)點設置。（二）教學難點變形基準點（transform-origin）對變形效果的影響。過渡與動畫的區(qū)別（觸發(fā)方式、重復次數(shù)）。漸變角度與顏色分布的精確控制。倒影與遮罩的瀏覽器兼容性處理（如-webkit-前綴）。四、教學方法演示法：實時演示變形、過渡、動畫效果，對比參數(shù)變化對結果的影響。案例分析法：以“圖片hover動效”“進度條動畫”為例，解析技術原理。任務驅動法：實踐課通過“產品卡片交互效果”任務，綜合應用所學技術。小組討論法：針對“過渡與動畫的適用場景”展開討論，加深理解。五、教學過程（一）第一學時：CSS3變形、過渡及動畫（40分鐘）導入（5分鐘）展示兩張圖片：靜態(tài)圖片與添加hover旋轉+縮放效果的圖片，提問：“如何用CSS實現(xiàn)元素的動態(tài)變換？”引出本節(jié)核心：變形（靜態(tài)變換）、過渡（狀態(tài)銜接）、動畫（自動循環(huán)）。CSS3變形（12分鐘）基本變形函數(shù)：平移：translate(x,y)（translateX/translateY單獨控制方向）?？s放：scale(x,y)（大于1放大，小于1縮小）。旋轉：rotate(angle)（單位deg，正值順時針）。傾斜：skew(x-angle,y-angle)（沿X/Y軸傾斜）。復合變形：多個函數(shù)空格分隔，順序影響結果（如先旋轉再平移≠先平移再旋轉）?；鶞庶c設置：transform-origin:rightbottom（默認中心，可設像素、百分比或關鍵詞）。演示：用教材例5-16對比不同基準點的旋轉效果。CSS3過渡（13分鐘）核心屬性：transition-property：指定過渡的屬性（如width、all）。transition-duration：過渡時長（必需，如0.5s）。transition-timing-function：速率曲線（ease、linear等）。transition-delay：延遲時間（如0.2s）。簡寫形式：transition:propertydurationtiming-functiondelay。觸發(fā)條件：需通過hover、focus等事件觸發(fā)狀態(tài)變化。案例：實現(xiàn)按鈕hover時寬度從100px過渡到300px（教材例5-17）。CSS3動畫（7分鐘）定義關鍵幀：應用動畫：animation:move2sinfinitealternate（名稱、時長、循環(huán)次數(shù)、方向）。對比過渡：動畫可自動觸發(fā)、重復執(zhí)行，過渡需事件觸發(fā)且單次執(zhí)行。小結（3分鐘）變形是基礎，過渡是狀態(tài)銜接，動畫是復雜時序控制。布置思考：“如何實現(xiàn)一個無限循環(huán)的呼吸燈效果？”（二）第二學時：CSS3新增屬性（40分鐘）復習導入（5分鐘）抽查學生對過渡簡寫屬性的掌握：“實現(xiàn)鼠標懸停時元素在1秒內完成顏色與尺寸的過渡，寫出簡寫代碼。”引出本節(jié)內容：通過新增背景與顏色屬性豐富視覺效果。新增背景屬性（12分鐘）background-clip：控制背景繪制區(qū)域（border-box/padding-box/content-box）。background-origin：背景圖片定位基準（同background-clip取值）。background-size：背景圖尺寸（cover填充容器、contain適應容器、具體尺寸）。多重背景：用逗號分隔多個背景圖，前層覆蓋后層。顏色漸變與特殊效果（18分鐘）線性漸變：linear-gradient(方向,顏色1,顏色2...)。徑向漸變：radial-gradient(形狀,顏色1,顏色2...)。倒影：-webkit-box-reflect:below10px（僅WebKit內核支持）。遮罩：mask-image:url(mask.png)（用透明圖片控制顯示區(qū)域）。演示：用教材例5-25及例5-26對比線性漸變與徑向漸變效果。小結（5分鐘）背景屬性增強了圖片控制靈活性，漸變減少了對圖片的依賴。強調：倒影與遮罩需注意瀏覽器兼容性，優(yōu)先使用前綴。（三）實踐學時：綜合案例實戰(zhàn)（40分鐘）任務布置（5分鐘）目標：制作“互動產品卡片”，要求：卡片hover時應用變形（scale(1.05)rotate(2deg)），過渡時長0.3s?？ㄆ尘坝镁€性漸變（從淺藍到淺紫），添加10px白色內邊距（background-clip:content-box）?？ㄆ撞刻砑訄D片倒影（-webkit-box-reflect:below5px）。定義一個“心跳”動畫（@keyframes控制縮放），持續(xù)1s，無限循環(huán)。學生實踐（30分鐘）教師巡