網頁設計與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例16圖片遮罩效果_第1頁
網頁設計與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例16圖片遮罩效果_第2頁
網頁設計與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例16圖片遮罩效果_第3頁
網頁設計與制作案例教程（HTML5 CSS3 JavaScript）（微課版）（第2版） 教案 案例16圖片遮罩效果_第4頁
全文預覽已結束

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

模塊四使用CSS3實現動畫效果本模塊通過4個案例的實現，介紹CSS的過渡、遮罩、變形、翻轉等動畫效果，幫助讀者提升更好的網頁瀏覽與交互體驗。知識目標：掌握transition屬性實現過渡動畫的方法；掌握遮罩動畫的實現方法；掌握transform屬性實現變形動畫的方法；掌握3D變形屬性實現翻轉動畫的實現方法；掌握animation屬性創建動畫的實現方法。能力目標：能實現過渡動畫的制作；能實現遮罩動畫的制作；能實現變形動畫的制作；能實現翻轉動畫的制作。素質目標：引導學生增強對傳統文化的認同感和自信心；在代碼編寫中養成良好的職業規范；引導學生了解問題，培養發現問題和解決問題的能力；引導學生樹立集體主義精神，培養團結協作的能力。教案16案例16圖片遮罩效果計劃學時2學時知識目標理解遮罩動畫的原理掌握過渡屬性的使用方法能力目標能夠利用transition屬性實現圖片的遮罩效果素質目標引導學生增強對傳統文化的認同感和自信心在代碼編寫中養成良好的職業規范教學重點transition屬性教學難點遮罩動畫的實現原理教學模式教學做一體化線上+線下混合式教學教學活動及主要環節素質培養第1學時（導入新課、案例分析與實現）=1\*ROMANI.導入新課：（5分鐘）互動提問——如何在網頁中添加動畫效果？（教師總結）在傳統的網頁設計中，當網頁中需要顯示動畫或特效時，需要使用JavaScript腳本或者Flash來實現。在CSS3中，提供了對動畫的強大支持，在網頁中可以實現旋轉、縮放、移動和過渡等效果。=2\*ROMANII.案例分析與實現：（40分鐘）一、案例描述創建圖片遮罩動畫效果，當鼠標移動到圖片上面時，從圖片上方下拉出一個半透明的遮罩，遮罩上面顯示放大鏡圖片和查看相冊按鈕，網頁瀏覽效果如圖16-1、16-2所示。二、案例分析與實現1．案例分析結構分析：樣式分析：2．案例實現學生同步操作，做學教一體略。第2學時（相關知識點）transition屬性（35分鐘）教師講解transition屬性作用及含義。完成例16-1使用transition的子屬性設置過渡效果。學生同步操作，做學教一體講解transition屬性進行綜合設置的方法。完成例16-2使用transition屬性設置塊元素的多個屬性過渡效果。完成例16-3使用transition屬性設置圖像的過渡效果。遮罩動畫原理（5分鐘）學生分組討論遮罩動畫實現的原理，教師進行總結。三、小結（5分鐘）掌握transition屬性作用及含義、理解遮罩動畫實現原理，能夠利用transition屬性實現圖片的遮罩效果。作業1：課本課后習題與實訓。作業2：掃碼觀看案例17中的微課，學習圖片變形效果。三孔（孔廟、孔林、孔府）是中國古代文化的重要遺產，代表著中國傳統文化和歷史的獨特魅力

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論