《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第16課 CSS與CSS3（七）_第1頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第16課 CSS與CSS3（七）_第2頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第16課 CSS與CSS3（七）_第3頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第16課 CSS與CSS3（七）_第4頁
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第16課 CSS與CSS3（七）_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

課題第16課CSS與CSS3（七）課時2課時（90min）教學(xué)目標知識技能目標：掌握CSS的2D/3D轉(zhuǎn)換與動畫控制素質(zhì)目標：掌握CSS的相關(guān)知識，加深學(xué)生對網(wǎng)頁制作的進一步了解，提升學(xué)生的知識儲備教學(xué)重難點教學(xué)重點：2D或3D轉(zhuǎn)換、動畫控制教學(xué)難點：動畫控制教學(xué)方法問答法、討論法、講授法、實踐練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂APP教學(xué)設(shè)計第1節(jié)課：→→→傳授新知（28min）→頭腦風(fēng)暴（10min）第2節(jié)課：→傳授新知（27min）→上機操作（10min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)請大家了解2D/3D轉(zhuǎn)換與動畫控制的相關(guān)內(nèi)容。【學(xué)生】完成課前任務(wù)通過課前任務(wù)，使學(xué)生了解本次課的主要內(nèi)容，增加學(xué)生的學(xué)習(xí)興趣考勤

（2min）【教師】使用文旌課堂APP進行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀律性，掌握學(xué)生的出勤情況問題導(dǎo)入（5min）【教師】提出以下問題在CSS中，如何實現(xiàn)元素2D或3D的轉(zhuǎn)換？【學(xué)生】思考、舉手回答【教師】通過學(xué)生的回答引入要講的知識通過問題導(dǎo)入的方法，引導(dǎo)學(xué)生主動思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知

（28min）3.152D或3D轉(zhuǎn)換【教師】講解2D轉(zhuǎn)換時，transform屬性常用參數(shù)的應(yīng)用【課堂互動】?【教師】提問實現(xiàn)元素2D或3D轉(zhuǎn)換的主要屬性是什么？?【學(xué)生】聆聽、思考、回答在CSS中，用于實現(xiàn)元素2D或3D轉(zhuǎn)換的屬性主要是transform。利用該屬性可以定義元素的移動、旋轉(zhuǎn)、縮放或傾斜。其語法格式如下：transform:none|translate()|scale()|rotate()|skew();3.15.12D轉(zhuǎn)換1.平移參數(shù)translate參數(shù)作用：定義元素在水平和垂直兩個方向的平移量。對于水平方向，向右平移為正，向左平移為負；對于垂直方向，向下平移為正，向上平移為負。應(yīng)用格式：選擇器{transform:translate(translateX,translateY);}選擇器{transform:translateX(translateX);}選擇器{transform:translateY(translateY);}選擇器{transform:translateX(translateX)translateY(translateY);}【提示】（1）括號中translateX、translateY分別用于定義水平和垂直兩個方向的平移量。（2）translate之后的括號中只有一個參數(shù)時，表示水平平移量。【示例3-15-1】編輯HTML文檔<body>標簽的內(nèi)容，寫入兩個重疊的盒子，代碼如下：<divid="box1"> <divid="box2">2D轉(zhuǎn)換</div></div>在<style>標簽內(nèi)寫入CSS選擇器：div{width:300px; height:100px; background:red; color:#FFF; margin:100px;……（詳見教材）【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示“平移效果”圖片（詳見教材），并講解效果：當(dāng)鼠標指針懸停在藍色盒子上時，藍色的盒子用2s實現(xiàn)向右平移30px，向下平移30px。2.縮放參數(shù)scale【課堂互動】?【教師】提問縮放參數(shù)scale屬性有什么作用？?【學(xué)生】聆聽、思考、回答參數(shù)作用：定義元素在水平和垂直兩個方向的縮放比例。應(yīng)用格式：選擇器{transform:scale(scaleX,scaleY);}選擇器{transform:scaleX(scaleX);}選擇器{transform:scaleY(scaleY);}選擇器{transform:scaleX(scaleX)scaleY(scaleY);}【提示】（1）括號中的scaleX、scaleY分別用于定義元素在X軸和Y軸方向的縮放倍數(shù)，參數(shù)可以是正數(shù)、負數(shù)和小數(shù)。大于1為放大；小于1為縮小。負數(shù)表示翻轉(zhuǎn)。（3）如果scale之后的括號中只寫一個參數(shù)，表示X軸和Y軸兩個方向的值相同。【示例3-15-2】將【示例3-15-1】中的#box2:hover選擇器聲明改為以下代碼：#box2:hover{transform:scaleX(-0.8)scaleY(0.5);}效果：當(dāng)鼠標指針懸停在藍色盒子上時，藍色盒子用2s實現(xiàn)“以中心為基點，水平方向翻轉(zhuǎn)并縮小至0.8倍，垂直方向縮放0.5倍”的2D轉(zhuǎn)換。3.旋轉(zhuǎn)參數(shù)rotate參數(shù)作用：定義元素的旋轉(zhuǎn)角度。應(yīng)用格式：選擇器{transform:rotate(angle);}【提示】（1）angle表示要旋轉(zhuǎn)的角度，單位為deg。正值為順時針旋轉(zhuǎn)，負值為逆時針旋轉(zhuǎn)。（2）旋轉(zhuǎn)軸心默認為圖形中心。【示例3-15-3】將【示例3-15-1】中的#box2:hover選擇器聲明改為以下代碼：#box2:hover{transform:rotate(30deg);}【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示“旋轉(zhuǎn)效果”圖片（詳見教材），并講解效果：當(dāng)鼠標指針懸停在籃色盒子上時，藍色盒子以盒子中心為基點順時針旋轉(zhuǎn)30°。4.傾斜參數(shù)skew參數(shù)作用：定義元素的傾斜角度。應(yīng)用格式：選擇器{transform:skew(skewX,skewY);}選擇器{transform:skewX(skewX);}選擇器{transform:skewY(skewY);}選擇器{transform:skewX(skewX)slewY(skewY);}【提示】（1）括號中的skewX和skewY分別表示元素在X軸和Y軸方向上的傾斜角度，單位為deg。值可以是正值和負值，正值為逆時針方向，負值為順時針方向。（2）如果在skew之后的括號中只寫一個參數(shù)，表示X軸的傾斜角度。（3）默認軸心為圖形中心?！臼纠?-15-4】將【示例3-15-1】中的#box2:hover選擇器聲明改為以下代碼：#box2:hover{transform:skew(30deg,15deg);}【教師】ppt展示“雙向傾斜效果”圖片（詳見教材），并講解效果：當(dāng)鼠標指針懸停在藍色盒子上方時，藍色盒子以盒子中心為基點水平傾斜30度，垂直傾斜15°?！臼纠?-15-5】將【示例3-15-1】中的#box2:hover選擇器聲明改為以下代碼：#box2:hover{transform:skewX(30deg);}【教師】ppt展示“單向傾斜效果”圖片（詳見教材），并講解效果：當(dāng)鼠標指針懸停在藍色盒子上方時，藍色盒子以盒子中心為基點水平傾斜30°。5.2D轉(zhuǎn)換基點屬性transform-origin屬性作用：定義縮放、旋轉(zhuǎn)、傾斜的基點。屬性格式：選擇器{transform-origin:X,Y;}【提示】（1）X、Y默認值均為50%。（2）X的值可以是left、right、center、長度和百分比。（3）Y的值可以是top、bottom、center、長度和百分比?！臼纠?-15-6】為【示例3-15-5】中的#box2:hover選擇器添加以下聲明：transform-origin:leftbottom;【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示“transform-origin為左下角點的傾斜效果”圖片（詳見教材），并講解效果：。【學(xué)生】聆聽、記錄、理解3.15.23D轉(zhuǎn)換【教師】講解進行3D轉(zhuǎn)換時，常用屬性的應(yīng)用3D變形是CSS3新增的樣式，可以實現(xiàn)元素在三維空間的多種變形。1.3D透視距離perspective【課堂互動】?【教師】提問3D透視距離屬性有什么作用？?【學(xué)生】聆聽、思考、回答屬性名稱：perspective。屬性作用：設(shè)置3D透視距離，單位一般為px。進行3D轉(zhuǎn)換元素的父元素具有該屬性，才能在視覺上更直觀地感受到3D轉(zhuǎn)換?！臼纠?-15-7】編輯HTML文檔<body>標簽的內(nèi)容，在網(wǎng)頁中布局兩個重疊的盒子，以觀察3D轉(zhuǎn)換效果。代碼如下：<divid="box1"> <divid="box2">3D轉(zhuǎn)換</div></div>在<style>標簽內(nèi)寫入CSS選擇器：#box1{position:relative; height:150px; width:150px; margin:200px; padding:10px; border:1pxsolidblack;……（詳見教材）【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示“perspective屬性設(shè)置旋轉(zhuǎn)前后對比效果““未設(shè)置perspective屬性旋轉(zhuǎn)前后對比效果”圖片（詳見教材），并講解效果：為父元素box1設(shè)置了perspective屬性，當(dāng)鼠標指針懸停在box2上時，盒子圍繞x軸旋轉(zhuǎn)45°，并出現(xiàn)透視效果。若將代碼中的perspective:150px屬性刪除，此時當(dāng)鼠標懸停在box2上時，不能出現(xiàn)透視效果。2.透視中心perspective-origin【課堂互動】?【教師】提問透視中心perspective-origin屬性有什么作用？?【學(xué)生】聆聽、思考、回答屬性名稱：perspective-origin。屬性作用：定義3D元素的透視中心位置。應(yīng)用格式：perspective-origin:x-axisy-axis;【提示】perspective-origin屬性的默認值為“50%50%”。該屬性必須與perspective屬性一同使用，而且只影響3D轉(zhuǎn)換元素?！臼纠?-15-8】為【示例3-15-7】中的#box1選擇器添加以下聲明：perspective-origin:0%0%;【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示“設(shè)置透視中心旋轉(zhuǎn)前后對比效果”圖片（詳見教材），并講解效果：隨著透視中心位置發(fā)生改變，同一旋轉(zhuǎn)設(shè)置的視覺效果不同?！緦W(xué)生】聆聽、記錄、理解通過教師講解、課堂互動、演示操作等方式，使學(xué)生了解2D和3D轉(zhuǎn)換時transform屬性常用參數(shù)的應(yīng)用頭腦風(fēng)暴（10min）【教師】根據(jù)頭腦風(fēng)暴主題，組織學(xué)生分組開展討論根據(jù)各隊伍的網(wǎng)站主題，討論如何使用本節(jié)課中介紹的2D轉(zhuǎn)換。【學(xué)生】思考、討論通過頭腦風(fēng)暴的形式，活躍課堂氣氛，引發(fā)學(xué)生思考，培養(yǎng)學(xué)生的創(chuàng)新能力和團隊精神第二節(jié)課問題導(dǎo)入（3min）【教師】提出以下問題3D轉(zhuǎn)換還包括哪些常用屬性？【學(xué)生】思考、舉手回答通過提問引導(dǎo)學(xué)生思考本節(jié)課內(nèi)容傳授新知

（27min）3.15.23D轉(zhuǎn)換【教師】講解進行3D轉(zhuǎn)換時，常用屬性的應(yīng)用3.3D移動translate屬性名稱：transform。屬性的值：translate3d(水平方向偏移距離,垂直方向偏移距離,垂直于屏幕方向偏移距離)；translateX(水平方向偏移距離)；translateY(垂直方向偏移距離)；translateZ(垂直于屏幕方向偏移距離)。屬性作用：實現(xiàn)3D轉(zhuǎn)換的元素水平、垂直及垂直屏幕三個方向的偏移，其中水平和垂直方向同2D轉(zhuǎn)換。垂直于屏幕方向偏移距離的視覺效果由透視距離和透視中心決定。【示例3-15-9】修改【示例3-15-7】中#box2:hover選擇器的聲明，代碼如下：#box2:hover{transform:translateZ(-100px);}【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示“translateZ設(shè)置前后效果對比”圖片（詳見教材），并講解效果：4.3D縮放scale【課堂互動】?【教師】提問3D縮放scale屬性有哪些值？其有什么作用？?【學(xué)生】聆聽、思考、回答屬性名稱：transform。屬性的值：scale3d(水平方向縮放比例,垂直方向縮放比例,垂直于屏幕方向縮放比例)；scaleX(水平方向縮放比例)；scaleY(垂直方向縮放比例)；scaleZ(垂直于屏幕方向縮放比例)。屬性作用：實現(xiàn)3D轉(zhuǎn)換的元素水平、垂直及垂直屏幕三個方向的縮放比例。其中水平和垂直方向同2D轉(zhuǎn)換；垂直方向因為視覺角度，不能看出縮放效果。5.3D旋轉(zhuǎn)rotate屬性名稱：transform。屬性的值：rotate3d(x,y,z,angle)。前3個值表示繞X軸、Y軸、Z軸旋轉(zhuǎn)矢量值；rotateX(繞水平軸旋轉(zhuǎn)的角度)；rotateY(繞垂直軸旋轉(zhuǎn)的角度)；rotateZ(繞垂直于屏幕的軸旋轉(zhuǎn)的角度)。屬性作用：實現(xiàn)3D轉(zhuǎn)換的元素繞三個不同的軸的旋轉(zhuǎn)，其中繞垂直于屏幕的軸旋轉(zhuǎn)同2D轉(zhuǎn)換中的旋轉(zhuǎn)?！臼纠?-15-10】修改【示例3-15-7】中#box2:hover選擇器的聲明，代碼如下：#box2:hover{transform:rotateY(45deg);}【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示【教師】ppt展示“rotateY屬性設(shè)置前后效果對比”圖片（詳見教材），并講解效果：【示例3-15-11】修改【示例3-15-7】中#box2:hover選擇器的聲明，代碼如下：#box2:hover{transform:rotate3d(1,1,1,45deg);}【教師】ppt展示“rotate3D屬性設(shè)置前后效果對比”圖片（詳見教材），并講解效果：當(dāng)鼠標指針懸停在紅盒子上方時，紅盒子繞著X、Y、Z軸各自旋轉(zhuǎn)45°?！緦W(xué)生】聆聽、記錄、理解3.16CSS動畫控制【教師】講解動畫的變化規(guī)則及應(yīng)用動畫是CSS3中新增的屬性，它可以替代一部分Flash或JavaScript定義的動畫。創(chuàng)建CSS動畫需要使用@keyframes規(guī)則，在該規(guī)則中定義某CSS樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改變?yōu)樾聵邮降膭赢嫛?.16.1動畫變化規(guī)則@keyframes要定義CSS動畫，需要先使用@keyframes規(guī)則來聲明關(guān)鍵幀。還需要為動畫命名，便于后面引用。定義方法如下：方法1：@keyframes動畫名稱{from{聲明列表1}to{聲明列表2}}【示例3-16-1】編輯HTML文檔<body>標簽的內(nèi)容，代碼如下：<divid="box"></div>在<style>標簽內(nèi)寫入CSS選擇器：*{box-sizing:border-box;}#box{margin:50px; width:200px; height:100px; background:red;……（詳見教材）效果：方法2：@keyframes動畫名稱{0%{聲明列表1}}25%{聲明列表2}……100%{聲明列表n}}【示例3-16-2】將【示例3-16-1】中動畫aa的規(guī)則修改為以下代碼：@keyframesaa{ 0%{background:red;} 25%{background:yellow;} 50%{background:pink; 75%{background:blue;} 100%{background:black;}}效果：#box的背景色用5s由最初的紅色依次變?yōu)辄S色、粉色、藍色、黑色，最后快速變?yōu)榧t色。3.16.2動畫的應(yīng)用【課堂互動】?【教師】提問動畫的應(yīng)用涉及哪些屬性？?【學(xué)生】聆聽、思考、回答動畫的應(yīng)用涉及動畫名稱、花費時間、速度曲線、延遲時間、播放次數(shù)、輪流反向等屬性。1.動畫名稱animation-name屬性名稱：animation-name。屬性的值：動畫名稱。屬性作用：規(guī)定指定元素的動畫名稱，以便使用@keyframes規(guī)則定義動畫。2.動畫花費時間animation-duration屬性名稱：animation-duration。屬性的值：動畫花費時間。屬性作用：規(guī)定指定元素完成動畫的時間。3.動畫速度曲線animation-timing-function屬性名稱：animation-timing-function。屬性的值：動畫的速度曲線，值同過渡transition中的速度曲線屬性取值。屬性作用：規(guī)定指定元素完成動畫時的速度變化?！臼纠?-16-3】在【示例3-16-1】的#box選擇器中添加以下代碼：animation-timing-funciton:ease-in-out;改變aa動畫的規(guī)則聲明：@keyframesaa{ from{width:200px;} to{width:800px;}}【教師】組織學(xué)生分組上機完成上面的任務(wù)，并在各組中挑選一位學(xué)生進行演示，演示完成后教師進行點評【學(xué)生】聆聽、上機操作、演示效果：#box在5s之內(nèi)以低速開始和結(jié)束播放aa動畫，即寬度從200px變?yōu)?00px，播放一次，播放完之后快速恢復(fù)寬度200px。4.動畫開始前延遲時間animation-delay屬性名稱：animation-delay。屬性的值：動畫開始前等待的時間。屬性作用：規(guī)定指定元素完成動畫前等待的時間。【示例3-16-4】在【示例3-16-3】的#box選擇器中添加以下代碼：animation-delay:2s;效果：變?yōu)?00px，播放一次，播放完之后快速恢復(fù)寬度200px。5.動畫播放次數(shù)animation-iteration-count屬性名稱：animation-iteration-count。屬性的值：動畫播放次數(shù)。屬性的作用：規(guī)定指定元素播放動畫的次數(shù)?！臼纠?-16-5】在【示例3-16-4】的#box選擇器中添加以下代碼：animation-iteration-count:4;效果：變?yōu)?00px，連續(xù)播放四次，播放完之后快速恢復(fù)寬度200px。6.輪流反向播放動畫animation-direction屬性名稱：animation-direction。屬性的值：alternate。動畫播放允許輪流反向播放。屬性作用：規(guī)定指定元素動畫奇數(shù)次播放為正向播放，偶數(shù)次播放為反向播放?！臼纠?-16-6】在【示例3-16-5】的#box選擇器中添加以下代碼：animation-direction:alternate;效果：變?yōu)?00px，再從800px變?yōu)?0px，連續(xù)播放2次。7.動畫animation屬性名稱：animation。屬性作用：動畫的簡寫屬性，用于設(shè)置六個動畫屬性。屬性的值：animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction。其中animation-name和animation-duration屬性為必須設(shè)置，否則時長為0，就不會播放動畫了。其他屬性可以缺省。應(yīng)用格式：animation:namedurationtiming-functiondelayiteration-countdirection;【示例3-16-7】將【示

溫馨提示

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

評論

0/150

提交評論