web前端技術(shù)應(yīng)用 教案 項(xiàng)目三 任務(wù)二 美化網(wǎng)頁(yè)其他區(qū)域_第1頁(yè)
web前端技術(shù)應(yīng)用 教案 項(xiàng)目三 任務(wù)二 美化網(wǎng)頁(yè)其他區(qū)域_第2頁(yè)
web前端技術(shù)應(yīng)用 教案 項(xiàng)目三 任務(wù)二 美化網(wǎng)頁(yè)其他區(qū)域_第3頁(yè)
web前端技術(shù)應(yīng)用 教案 項(xiàng)目三 任務(wù)二 美化網(wǎng)頁(yè)其他區(qū)域_第4頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

課程名稱：動(dòng)畫課題動(dòng)畫的制作班級(jí)教師課時(shí)2課時(shí)教學(xué)目標(biāo)知識(shí)1.動(dòng)畫的概念2.如何聲明和設(shè)置動(dòng)畫技能3.靈活的按照動(dòng)畫設(shè)置步驟設(shè)置動(dòng)畫素養(yǎng)培養(yǎng)學(xué)生主動(dòng)觀察，主動(dòng)分析，敢于探索的能力教學(xué)重點(diǎn)根據(jù)情況聲明動(dòng)畫，并且正確使用教學(xué)難點(diǎn)不同效果的動(dòng)畫的設(shè)置方式教學(xué)方法講述法+實(shí)際操作教學(xué)環(huán)境機(jī)房

教學(xué)過(guò)程教學(xué)環(huán)節(jié)教師活動(dòng)學(xué)生活動(dòng)課程引入展示一個(gè)具有動(dòng)畫的網(wǎng)頁(yè)讓同學(xué)們欣賞，動(dòng)畫可以增加網(wǎng)頁(yè)的趣味性。明確本堂課的任務(wù)要求：選擇器的學(xué)習(xí)。展示學(xué)習(xí)目標(biāo)用ppt展示本堂課的學(xué)習(xí)目標(biāo)明確學(xué)習(xí)內(nèi)容，有目標(biāo)的學(xué)習(xí)講解新課課堂導(dǎo)入：讓我們來(lái)看看如實(shí)現(xiàn)動(dòng)畫，首先需要對(duì)動(dòng)畫效果進(jìn)行聲明，以此描述動(dòng)畫的具體效果。然后使用動(dòng)畫。1、聲明動(dòng)畫提問(wèn)：什么是動(dòng)畫？動(dòng)畫是使元素從一種樣式逐漸變化為另一種樣式的效果。展示一組動(dòng)畫效果（將<div>元素的背景顏色從"red"逐漸改為"yellow"）以及代碼。/*動(dòng)畫代碼*/@keyframesexample{from{background-color:red;}to{background-color:yellow;}}/*向此元素應(yīng)用動(dòng)畫效果*/div{width:100px;height:100px;background-color:red;animation-name:example;animation-duration:4s;您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。請(qǐng)用百分比來(lái)規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞"from"和"to"，等同于0%和100%。0%是動(dòng)畫的開(kāi)始，100%是動(dòng)畫的完成。動(dòng)畫的組成一組定義的動(dòng)畫關(guān)鍵幀描述該動(dòng)畫的CSS聲明（3）動(dòng)畫關(guān)鍵幀@keyframes屬性可以設(shè)置多個(gè)關(guān)鍵幀，每個(gè)關(guān)鍵幀表示動(dòng)畫過(guò)程中的一個(gè)狀態(tài)，多個(gè)關(guān)鍵幀就可以使動(dòng)畫十分豐富。基本語(yǔ)法格式如下：@keyframesanimationname{keyframes-selector{css-styles}}@keyframes規(guī)則中的animationname是當(dāng)前動(dòng)畫的名稱；keyframes-selector是關(guān)鍵幀選擇器；css-styles當(dāng)前關(guān)鍵幀的動(dòng)畫狀態(tài)。（4）動(dòng)畫的聲明animation屬性用于描述動(dòng)畫的CSS聲明，它是一個(gè)復(fù)合屬性，包括指定具體動(dòng)畫以及動(dòng)畫時(shí)長(zhǎng)等行為?；菊Z(yǔ)法格式：animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state說(shuō)明：animation-name規(guī)定@keyframes動(dòng)畫的名稱。animation-duration規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)時(shí)間。animation-timing-function規(guī)定動(dòng)畫的速度曲線，值如下：linear動(dòng)畫從頭到尾的速度是相同的ease默認(rèn)值。動(dòng)畫以低速開(kāi)始，然后加快，在結(jié)束前變慢ease-in動(dòng)畫以低速開(kāi)始ease-out動(dòng)畫以低速結(jié)束ease-in-out動(dòng)畫以低速開(kāi)始和結(jié)束cubic-bezier(n,n,n,n)在cubic-bezier函數(shù)中自己的值。可能的值是從0到1的數(shù)值animation-delay規(guī)定動(dòng)畫開(kāi)始前的延遲，可選。animation-iteration-count規(guī)定動(dòng)畫被播放的次數(shù)animation-play-state規(guī)定動(dòng)畫是否正在運(yùn)行或暫停animation-fill-mode規(guī)定對(duì)象動(dòng)畫時(shí)間之外的狀態(tài)例：制作如下動(dòng)畫過(guò)程效果：步驟1<body><div></div></body>步驟2<head><style>div{width:100px;height:100px;background-color:red;animation-name:example;animation-duration:4s;}@keyframesexample{0%{background-color:red;}25%{background-color:yellow;}50%{background-color:blue;}100%{background-color:green;}}</style></head>認(rèn)真做好筆記觀看老師的操作，思考并且回答問(wèn)題學(xué)生思考，教師在關(guān)鍵節(jié)點(diǎn)進(jìn)行點(diǎn)撥啟發(fā)。課堂練習(xí)讓同學(xué)們根據(jù)所學(xué)知識(shí)制作一個(gè)簡(jiǎn)單動(dòng)畫，要求包括四種狀態(tài)的轉(zhuǎn)換。學(xué)生們先回憶所學(xué)選擇器內(nèi)容，分組討論，共同完成。課堂評(píng)價(jià)1．教師下位去檢查各個(gè)小組

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論