《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第19課 變形與過渡效果

1931第1931第課變形與過渡效果的基基本本PAGE121932119321變形與過渡效果第課PAGE13192912變形與過渡效果192912變形與過渡效果第課PAGE1

課題變形與過渡效果課時2課時（90min）教學(xué)目標(biāo)知識技能目標(biāo)：（1）了解變形和過渡屬性（2）掌握使用CSS3設(shè)置2D和3D變形的方法（3）掌握使用CSS3設(shè)置過渡效果的方法思政育人目標(biāo)：（1）培養(yǎng)學(xué)生一絲不茍，嚴(yán)謹(jǐn)、認(rèn)真的工作態(tài)度（2）在學(xué)習(xí)中拓展自己的視野，開闊自己的眼界教學(xué)重難點教學(xué)重點：變形和過渡的相關(guān)屬性教學(xué)難點：CSS3語言在網(wǎng)頁中實現(xiàn)變形和過渡效果教學(xué)方法講授法、啟發(fā)法、問答法、演示法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計第1節(jié)課：知識講解（25min）第2節(jié)課：互動交流（4min）知識講解（22min）

編寫比賽（15min）

課堂小結(jié)（2min）作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計意圖第一節(jié)課考勤

（2min）【教師】清點上課人數(shù)，記錄好考勤【學(xué)生】班干部報請假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況導(dǎo)入新知

（4min）【教師】通過類比，引出本節(jié)課內(nèi)容在之前的學(xué)習(xí)中，其他編程語言可以實現(xiàn)變形和過渡效果，同樣的，在HTML5網(wǎng)頁中，也可以通過使用CSS3新增的知識實現(xiàn)變形和過渡的效果【學(xué)生】思考、發(fā)言【教師】總結(jié)學(xué)生發(fā)言使用CSS3新增的變形屬性能夠?qū)崿F(xiàn)元素的平移、縮放與旋轉(zhuǎn)等效果通過類比生活案例，讓學(xué)生主動思考，如何網(wǎng)頁中實現(xiàn)變形和過渡，引起學(xué)生的學(xué)習(xí)興趣知識講解

（25min）【教師】講解變形屬性變形屬性在之前的CSS版本中，僅靠樣式表文件無法制作變形效果，只能依賴于JavaScript腳本。在CSS3中，使用transform屬性即可實現(xiàn)元素的平移、縮放與旋轉(zhuǎn)等效果，具體格式為：transform:none|transform-functions;其中，none是默認(rèn)值，表示無變形效果；transform-functions表示變形方法，可以設(shè)置多個，不同的變形方法用空格隔開。變形方法有如下幾種。（1）translate()，平移方法，用于重新設(shè)置元素的位置。（2）scale()，縮放方法，用于改變元素的尺寸。（3）rotate()，旋轉(zhuǎn)方法，用于使元素旋轉(zhuǎn)一個角度。（4）skew()，傾斜方法，用于使元素傾斜一個角度。使用這些變形方法能夠制作出元素的變形效果，下面分別對它們進(jìn)行介紹?！窘處煛恐v解設(shè)置2D變形的方法2D變形以元素中心為原點創(chuàng)建一個二維坐標(biāo)系，如圖10-1所示。沿坐標(biāo)系中的x軸或y軸對元素進(jìn)行調(diào)節(jié)產(chǎn)生的變形效果稱為2D變形。圖10-1以元素中心為原點創(chuàng)建二維坐標(biāo)系1．平移translate()方法可以重新定義元素在二維坐標(biāo)系中的坐標(biāo)，實現(xiàn)平移變形，具體格式為：transform:translate(length-x,length-y);其中，length-x與length-y分別表示元素在x軸與y軸方向上移動的距離，參數(shù)值為數(shù)值與單位或者百分比，可以為負(fù)值。如果只設(shè)置一個參數(shù)值，則第二個參數(shù)值默認(rèn)為0?！窘處煛垦菔尽纠?0-1】操作流程，實現(xiàn)圖10-2和10-3的效果平移變形的演示。（1）在DW中打開本書配套素材“項目10”→“translate.html”文檔，該文檔中已經(jīng)創(chuàng)建好div元素，并設(shè)置了簡單的樣式，頁面效果如圖10-2所示。（2）在.d2{…}中添加以下代碼，使子元素同時向x軸和y軸方向移動50px，頁面效果如圖10-3所示。transform:translate(50px,50px);圖10-2子元素平移變形后的頁面效果圖10-3子元素平移變形前的頁面效果2．縮放scale()方法能夠使元素的寬度與高度按比例放大或縮小，實現(xiàn)縮放變形，具體格式為：transform:scale(times-x,times-y);其中，times-x與times-y分別表示元素寬度與高度的縮放倍數(shù)，參數(shù)值大于1表示按比例放大，參數(shù)值小于1則表示按比例縮小。如果只設(shè)置一個參數(shù)值，則表示同時設(shè)置寬度與高度的縮放比例。當(dāng)參數(shù)值為負(fù)數(shù)時，會將元素翻轉(zhuǎn)顯示。例如，當(dāng)times-x設(shè)置為負(fù)數(shù)時，縮放后的元素將以y軸為基準(zhǔn)水平翻轉(zhuǎn)?！窘處煛垦菔尽纠?0-2】操作流程，實現(xiàn)圖10-4和10-5的效果縮放變形的演示。（1）在DW中打開本書配套素材“項目10”→“scale.html”文檔，該文檔中有一個設(shè)置了邊框樣式的圖像，頁面效果如圖10-4所示。（2）在img{…}中添加以下代碼，使圖像元素的寬度放大五分之一、高度縮小五分之一后再水平翻轉(zhuǎn)，頁面效果如圖10-5所示。transform:scale(-1.2,0.8);圖10-4圖像元素縮放變形前的頁面效果圖10-5圖像元素縮放變形后的頁面效果3．旋轉(zhuǎn)rotate()方法能夠使元素以原點為中心順時針或逆時針轉(zhuǎn)動一定角度，實現(xiàn)旋轉(zhuǎn)變形，具體格式為：transform:rotate(angle);其中，angle表示旋轉(zhuǎn)的角度，如30deg。deg為角度的單位，表示度。當(dāng)參數(shù)值為正值時，元素按順時針旋轉(zhuǎn)，反之則按逆時針旋轉(zhuǎn)?！窘處煛垦菔尽纠?0-3】操作流程，實現(xiàn)圖10-6和10-7的效果（1）在DW中打開本書配套素材“項目10”→“rotate.html”文檔，該文檔中有一個設(shè)置了外邊距的圖像，頁面效果如圖10-6所示。（2）在img{…}中添加以下代碼，使圖像元素順時針旋轉(zhuǎn)45度，頁面效果如圖10-7所示。transform:rotate(45deg);圖10-6圖像元素旋轉(zhuǎn)變形前的頁面效果圖10-7圖像元素旋轉(zhuǎn)變形后的頁面效果4．傾斜skew()方法能夠使元素以y軸或x軸為基準(zhǔn)偏移一定角度，實現(xiàn)傾斜效果，如圖10-8所示圖10-8傾斜變形示意圖具體格式為：transform:skew(angle-y,angle-x);其中，angle-y與angle-x分別表示元素相對于y軸與x軸的傾斜角度，設(shè)置方法與rotate()相同，但是不同的是，當(dāng)參數(shù)值為正數(shù)時表示逆時針傾斜，反之表示順時針傾斜。當(dāng)只設(shè)置一個參數(shù)值時，第二個參數(shù)值默認(rèn)為0。【教師】演示【例10-4】操作流程，實現(xiàn)圖10-9與圖10-10效果傾斜變形的演示。（1）在DW中打開本書配套素材“項目10”→“skew.html”文檔，該文檔中已經(jīng)創(chuàng)建好div元素，并設(shè)置了簡單的樣式，頁面效果如圖10-9所示。（2）在div{…}中添加以下代碼，使div元素相對y軸順時針傾斜20度，頁面效果如圖10-10所示。transform:skew(-20deg);圖10-9div元素傾斜變形前的頁面效果圖10-10div元素傾斜變形后的頁面效果【學(xué)生】聆聽、記錄、思考【教師】講解3D變形的設(shè)置方法3D變形以元素中心為原點，創(chuàng)建一個三維坐標(biāo)系，如圖10-11所示。沿坐標(biāo)系中的x軸、y軸和z軸對元素進(jìn)行調(diào)節(jié)產(chǎn)生的變形效果稱為3D變形。圖10-11以元素中心為原點創(chuàng)建三維坐標(biāo)系3D變形需使用rotateX()、rotateY()與rotateZ()方法實現(xiàn)，具體格式為：transform:rotateX|rotateY|rotateZ(angle);其中，angle表示旋轉(zhuǎn)的角度值，設(shè)置方法與rotate()相同。【教師】演示【例10-5】操作流程，實現(xiàn)圖10-12與10-13的效果3D變形的演示。（1）在DW中打開本書配套素材“項目10”→“rotateX_Y.html”文檔，該文檔中創(chuàng)建了4個div元素，并設(shè)置了簡單的樣式，頁面效果如圖10-12所示。（2）在<style>標(biāo)簽中添加以下代碼，使嵌套的兩個div元素分別繞x軸與y軸旋轉(zhuǎn)，頁面效果如圖10-13所示。.d2{transform:rotateX(45deg);} /*繞x軸順時針旋轉(zhuǎn)45度*/.d3{transform:rotateY(45deg);} /*繞y軸順時針旋轉(zhuǎn)45度*/圖10-12div元素旋轉(zhuǎn)變形前的頁面效果圖10-13div元素旋轉(zhuǎn)變形后的頁面效果【教師】提出問題，讓學(xué)生思考2D變形和3D變形的各自優(yōu)缺點在哪里呢？如何準(zhǔn)確的判斷出在哪種場合下使用2D變形，在何時使用3D變形【學(xué)生】思考、討論、交流通過講解知識點，讓學(xué)生進(jìn)一步了解網(wǎng)頁中的變形效果的編寫，為以后的學(xué)習(xí)打下基礎(chǔ)課堂練習(xí)

（15min）【教師】布置課堂練習(xí)為“書店簡介”頁面導(dǎo)航條設(shè)置變形效果【教師】分析課堂練習(xí)內(nèi)容本任務(wù)實施將通過為“書店簡介”頁面導(dǎo)航條設(shè)置變形效果，練習(xí)變形效果在實際網(wǎng)頁制作中的應(yīng)用在樣式文檔中的#head_nava:hover{…}內(nèi)添加以下代碼，設(shè)置當(dāng)鼠標(biāo)指針移動至導(dǎo)航條中超鏈接上時的變形效果transform:scale(1.3);/*設(shè)置鼠標(biāo)指針移動至導(dǎo)航條中超鏈接上時，超鏈接元素放大至原大小的1.3倍*/【學(xué)生】完成課堂練習(xí)【教師】點名學(xué)生，講解課堂練習(xí)【學(xué)生】講解課堂練習(xí)題【教師】總結(jié)學(xué)生發(fā)言通過課堂練習(xí)，鞏固理解本節(jié)課內(nèi)容，加深學(xué)生對變形效果的理解交流討論

（4min）【教師】安排組間討論，設(shè)置討論話題安排小組之間兩兩討論，分析2D變形和3D變形各自的特點，以及二者的相同之處和不同之處【學(xué)生】完成小組討論，記錄討論內(nèi)容讓學(xué)生有自我反省的意識，并且及時回顧學(xué)習(xí)的內(nèi)容第二節(jié)課互動交流

（4min）【教師】概述網(wǎng)頁中的過渡效果過渡效果能夠使元素樣式變化的過程更加平滑，通過人眼的視覺殘留，給用戶美觀和直接的感受【學(xué)生】聆聽、思考、討論通過概述網(wǎng)頁中的過渡效果，讓學(xué)生了解掌握實現(xiàn)過渡方法的必要性知識講解

（22min）【教師】講解過渡效果相關(guān)屬性1過渡效果相關(guān)屬性使用CSS3提供的過渡功能，能夠在不使用Flash與JavaScript的情況下實現(xiàn)元素樣式從一個狀態(tài)向另一個狀態(tài)緩緩變化的過程。下面對CSS3中的過渡效果相關(guān)屬性進(jìn)行介紹。1．應(yīng)用過渡效果在CSS3中，使用transition-property屬性設(shè)置應(yīng)用過渡效果的CSS屬性名稱，具體格式為：transition-property:none|all|property;其中，none是默認(rèn)值，表示不應(yīng)用過渡效果；all表示為所有屬性應(yīng)用過渡效果；property表示應(yīng)用過渡效果的屬性名稱，可以設(shè)置多個屬性。2．過渡時間在CSS3中，使用transition-duration屬性設(shè)置過渡效果的變化時間，具體格式為：transition-duration:time;其中，time為過渡效果變化的總時間，默認(rèn)值為0，單位一般為s（秒）或ms（毫秒）。如果不設(shè)置過渡時間，過渡效果將沒有過渡的過程，直接顯示結(jié)果?！窘處煛垦菔尽纠?0-6】操作流程，實現(xiàn)圖10-16效果過渡效果的演示。（1）在DW中打開本書配套素材“項目10”→“transition.html”文檔，該文檔中已經(jīng)創(chuàng)建好div元素，并設(shè)置了簡單的樣式，頁面效果如圖10-16所示。（2）在div:hover{}中輸入以下代碼，設(shè)置當(dāng)鼠標(biāo)指針移動至div元素時為其添加圓角樣式。border-radius:155px;（3）在div{…}中添加以下代碼，為div元素從直角向圓角變化添加時長5秒的過渡效果。鼠標(biāo)指針移動至div元素上時的頁面效果如圖10-17所示。transition-property:border-radius;transition-duration:5s;圖10-16設(shè)置過渡前的頁面效果圖10-17圓角樣式變化時的過渡效果3．過渡的速度曲線在CSS3中，使用transition-timing-function屬性設(shè)置過渡效果的速度曲線，具體格式為：transition-timing-function:cubiczier(n,n,n,n)|liner|ease|

ease-in|ease-out;各屬性值的說明如表10-1所示表10-1transition-timing-function屬性值及其說明屬性值說明貝塞爾曲線，用于精確設(shè)置過渡效果的速度曲線，n的取值范圍為0～1linear勻速顯示過渡效果，等同于cubiczier(0,0,1,1)ease默認(rèn)值，（相對于勻速）慢速開始、先加速再減速至結(jié)束的過渡效果，等同于cubiczier(0.25,0.1,0.25,1)ease-in（相對于勻速）慢速開始再逐漸加速的過渡效果，等同于cubiczier(0.42,0,1,1)ease-out（相對于勻速）快速開始慢速結(jié)束的過渡效果，等同于cubiczier(0,0,0.58,1)ease-in-out（相對于勻速）慢速開始慢速結(jié)束的過渡效果，等同于cubiczier(0.42,0,0.58,1)4．延遲時間在CSS3中，使用transition-delay屬性設(shè)置過渡效果開始之前需要等待的時間，具體格式為：transition-delay:time;設(shè)置方法與transition-duration屬性相同，默認(rèn)值為0，表示立即開始過渡效果；屬性值為正數(shù)時，過渡效果將等待設(shè)置的時間之后開始；屬性值為負(fù)數(shù)時，過渡效果會將該時間點之前的動作截斷。例如，有一個時長為5秒的過渡效果A，A的變化過程可看作一個時長為5秒的動畫片段，在此基礎(chǔ)上設(shè)置延遲時間為?2秒，則表示當(dāng)該過渡效果觸發(fā)時，A將直接從第2秒開始播放直至結(jié)束（默認(rèn)動畫片段自第0秒開始播放）。【學(xué)生】聆聽、思考、理解【教師】講解常見過渡效果應(yīng)用場景及觸發(fā)方式過渡效果通過鼠標(biāo)事件或元素樣式改變觸發(fā)，如單擊按鈕、鼠標(biāo)指針移過等。下面介紹幾種過渡效果的應(yīng)用場景及其觸發(fā)方式（1）使用:hover選擇器設(shè)置樣式，鼠標(biāo)指針經(jīng)過相應(yīng)元素時將觸發(fā)過渡效果（2）使用:active選擇器設(shè)置樣式，單擊相應(yīng)元素并按住鼠標(biāo)左鍵時將觸發(fā)過渡效果（3）使用:focus選擇器設(shè)置樣式，表單控件獲得焦點時將觸發(fā)過渡效果（4）使用:checked選擇器設(shè)置樣式，表單控件被選中時將觸發(fā)過渡效果此外，媒體查詢響應(yīng)時也能夠觸發(fā)過渡效果。例如，以下代碼表示當(dāng)屏幕最大寬度為420px時，div元素的寬度變?yōu)?00px，該過程應(yīng)用時長為1秒的過