HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：使用CSS動(dòng)畫制作下拉菜單

HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作使用CSS動(dòng)畫制作下拉菜單能夠敘述CSS3中的過渡屬性，并能夠制作過渡時(shí)間、動(dòng)畫快慢等常見過渡效果。能夠敘述CSS3中的變形屬性，并能夠制作各種轉(zhuǎn)換效果。能夠敘述CSS3中的動(dòng)畫屬性，并能夠制作網(wǎng)頁常見的動(dòng)畫效果。能夠綜合運(yùn)用過渡、變形和動(dòng)畫樣式屬性，制作D清單頁面的下拉菜單動(dòng)畫。任務(wù)目標(biāo)

使用CSS動(dòng)畫制作下拉菜單本次任務(wù)要求根據(jù)D清單網(wǎng)頁內(nèi)容，使用CSS樣式，在基礎(chǔ)上使用CSS動(dòng)畫制作D清單頁面的酷炫下拉菜單。完成后的效果圖如圖1-17所示。任務(wù)描述圖1-17使用CSS動(dòng)畫制作酷炫下拉菜單后的網(wǎng)頁效果圖

使用CSS動(dòng)畫制作下拉菜單在CSS3中，提供了對動(dòng)畫制作的支持，通過樣式的設(shè)置，我們可以實(shí)現(xiàn)動(dòng)畫的過渡、2D轉(zhuǎn)換、3D轉(zhuǎn)換、旋轉(zhuǎn)、縮放等效果。我們可以根據(jù)CSS3的動(dòng)畫樣式來制作酷炫下拉菜單。要使用CSS動(dòng)畫制作酷炫下拉菜單，需要：學(xué)習(xí)過渡屬性、變形屬性、動(dòng)畫屬性的使用；分析D清單頁面中的酷炫下拉菜單內(nèi)容，正確使用CSS樣式完成D清單網(wǎng)頁內(nèi)容制作。D清單酷炫下拉菜單CSS動(dòng)畫制作分析如圖1-17-1所示。任務(wù)分析

使用CSS動(dòng)畫制作下拉菜單任務(wù)分析圖1-17-1D清單酷炫下拉菜單CSS動(dòng)畫制作分析圖

使用CSS動(dòng)畫制作下拉菜單知識與技能準(zhǔn)備通過CSS3，我們可以在不使用Flash動(dòng)畫或JavaScript的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容：（1）規(guī)定希望把效果添加到哪個(gè)CSS屬性上（2）規(guī)定效果的時(shí)長1.1transition-property屬性transition-property屬性規(guī)定應(yīng)用過渡效果的CSS屬性的名稱。即當(dāng)指定的CSS屬性改變時(shí)，過渡效果將開始。1、過渡效果語法：transition-property：屬性值；表1-17-1transition-property屬性值知識與技能準(zhǔn)備1.2transition-durationtransition-duration屬性規(guī)定完成過渡效果需要花費(fèi)的時(shí)間（以秒或毫秒計(jì)）。說明：默認(rèn)值是0，表示不會(huì)有過渡效果。1、過渡效果語法：transition-duration:time;課堂練習(xí)1-17-1制作顏色區(qū)域的擴(kuò)展效果HTML代碼：CSS代碼：123<div></div><p>請把鼠標(biāo)指針移動(dòng)到紅色的div元素上，就可以看到過渡效果。</p>1234567891011121314151617div{width:100px;height:100px;background:#f00;transition-property:width;transition-duration:2s;-moz-transition-property:width;/*-moz-為兼容Firefox瀏覽器*/-moz-transition-duration:2s;-webkit-transition-property:width;/*-webkit-為兼容SafariandChrome瀏覽器*/-webkit-transition-duration:2s;-o-transition-property:width;/*-o-為兼容Opera瀏覽器*/-o-transition-duration:2s;}div:hover{width:300px;}課堂練習(xí)1-17-1制作顏色區(qū)域的擴(kuò)展效果顯示效果如圖1-17-2和圖1-17-3所示：圖1-17-2過渡效果-鼠標(biāo)未經(jīng)過紅色區(qū)域圖1-17-3過渡效果-鼠標(biāo)經(jīng)過紅色區(qū)域逐漸過渡課堂練習(xí)1-17-2制作顏色區(qū)域的顏色變化效果HTML代碼：CSS代碼：12345<div></div><p>請把鼠標(biāo)指針移動(dòng)到紅色的div元素上，就可以看到紅色到黃色的過渡效果。</p>1234567891011121314151617div{width:300px;height:100px;background:#f00;transition-property:background;transition-duration:2s;-moz-transition-property:background;/*-moz-為兼容Firefox瀏覽器*/-moz-transition-duration:2s;-webkit-transition-property:background;/*-webkit-為兼容SafariandChrome瀏覽器*/-webkit-transition-duration:2s;-o-transition-property:background;/*-o-為兼容Opera瀏覽器*/-o-transition-duration:2s;}div:hover{background:#ff0;} 課堂練習(xí)1-17-1制作顏色區(qū)域的擴(kuò)展效果顯示效果如圖1-17-4、圖1-17-5、圖1-17-6所示。圖1-17-4過渡效果-鼠標(biāo)未經(jīng)過紅色區(qū)域圖1-17-6過渡效果-鼠標(biāo)經(jīng)過紅色區(qū)域顏色最終過渡效果圖1-17-5過渡效果-鼠標(biāo)經(jīng)過紅色區(qū)域顏色過渡中知識與技能準(zhǔn)備1.3transition-timing-functiontransition-timing-function屬性規(guī)定過渡效果的速度曲線。語法：transition-timing-function:屬性值;1、過渡效果表1-17-2transition-timing-function屬性值語法：transition-timing-function:屬性值;課堂練習(xí)1-17-3制作區(qū)域的過渡速度效果HTML代碼：123456<divid="div1">設(shè)置屬性值linear</div><divid="div2">設(shè)置屬性值ease</div><divid="div3">設(shè)置屬性值ease-in</div><divid="div4">設(shè)置屬性值ease-out</div><divid="div5">設(shè)置屬性值ease-in-out</div><p>請把鼠標(biāo)指針移動(dòng)到紅色的div元素上，就可以看到過渡的不同速度效果。</p>課堂練習(xí)1-17-3制作區(qū)域的過渡速度效果CSS代碼：CSS代碼：12345678910111213141516171819202122div{width:100px;height:50px;margin:10px;background:blue;color:white;font-weight:bold;transition-property:width;-moz-transition-property:width;-webkit-transition-property:width;-o-transition-property:width;transition-duration:2s;-moz-transition-duration:2s;-webkit-transition-duration:2s;-o-transition-duration:2s;}#div1{transition-timing-function:linear;}#div2{transition-timing-function:ease;}#div3{transition-timing-function:ease-in;}#div4{transition-timing-function:ease-out;}#div5{transition-timing-function:ease-in-out;}2324252627282930313233343536373839404142/*-moz-為兼容Firefox瀏覽器*/#div1{-moz-transition-timing-function:linear;}#div2{-moz-transition-timing-function:ease;}#div3{-moz-transition-timing-function:ease-in;}#div4{-moz-transition-timing-function:ease-out;}#div5{-moz-transition-timing-function:ease-in-out;}/*-webkit-為兼容SafariandChrome瀏覽器*/#div1{-webkit-transition-timing-function:linear;}#div2{-webkit-transition-timing-function:ease;}#div3{-webkit-transition-timing-function:ease-in;}#div4{-webkit-transition-timing-function:ease-out;}#div5{-webkit-transition-timing-function:ease-in-out;}/*-o-為兼容Opera瀏覽器*/#div1{-o-transition-timing-function:linear;}#div2{-o-transition-timing-function:ease;}#div3{-o-transition-timing-function:ease-in;}#div4{-o-transition-timing-function:ease-out;}#div5{-o-transition-timing-function:ease-in-out;}div:hover{width:300px;}課堂練習(xí)1-17-3制作區(qū)域的過渡速度效果顯示效果如圖1-17-7、圖1-17-8所示。圖1-17-7過渡效果-鼠標(biāo)未經(jīng)過藍(lán)色區(qū)域圖1-17-8過渡效果-鼠標(biāo)經(jīng)過藍(lán)色區(qū)域體驗(yàn)不同過渡速度知識與技能準(zhǔn)備1.4transition-delaytransition-delay屬性規(guī)定過渡效果何時(shí)開始。transition-delay值以秒或毫秒計(jì)。1.5transitiontransition屬性是一個(gè)簡寫屬性，一般情況下，四個(gè)過渡屬性：transition-property、transition-duration、transition-timing-function、transition-delay經(jīng)常出現(xiàn)，為了避免代碼過于冗長，可以采用簡寫的形式。注意：（1）使用transition屬性設(shè)置多個(gè)過渡效果時(shí)，必須按照嚴(yán)格按照transition-property、transition-duration、transition-timing-function、transition-delay的順序進(jìn)行定義，順序不能互換。（2）務(wù)必始終設(shè)置transition-duration屬性，否則默認(rèn)時(shí)長為0，就不會(huì)產(chǎn)生過渡效果。（3）如果同時(shí)設(shè)置多個(gè)過渡效果，需要為每個(gè)過渡屬性集中指定所有的值，并且使用逗號隔開。1、過渡效果語法：transition-delay：time;語法：transition:propertydurationtiming-functiondelay;課堂練習(xí)1-17-4采用簡寫屬性制作過渡效果HTML代碼：1<div>效果3</div>CSS代碼：1234567891011121314div{transition:background-color2sease-in1ms,box-shadow2sease-in1ms,color2sease-in1ms;width:100px;height:20px;border-radius:10px;text-align:center;padding:5px0;border:5pxrgb(204,102,255)solid;background-color:rgba(204,102,255,1);box-shadow:0000rgba(204,102,255,1); color:#FFF;}div:hover{background-color:rgba(204,102,255,0);box-shadow:00010pxrgba(204,102,255,0);color:rgb(204,102,255);}顯示效果如圖1-17-9所示。圖1-17-9采用簡寫屬性制作過渡效果知識與技能準(zhǔn)備通過CSS3，我們可以在不使用Flash動(dòng)畫或JavaScript的情況下，對元素進(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長或拉伸，達(dá)到變形的效果。變形效果可以使用2D或3D轉(zhuǎn)換實(shí)現(xiàn)。2.12D轉(zhuǎn)換代碼格式：transform:變形方式(參數(shù));下面介紹各種變形方式：（1）平移translate通過translate（）方法，元素根據(jù)給定的left（x坐標(biāo)）和top（y坐標(biāo)）位置參數(shù)進(jìn)行移動(dòng)。（2）旋轉(zhuǎn)rotate旋轉(zhuǎn)變形可讓標(biāo)簽旋轉(zhuǎn)指定的角度，格式：rotate(角度)通過rotate()方法，元素順時(shí)針旋轉(zhuǎn)給定的角度。允許負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)。2、變形效果語法：transform:translate(x軸的參數(shù),y軸的參數(shù));語法：transform:rotate(角度)課堂練習(xí)1-17-4采用簡寫屬性制作過渡效果HTML代碼：1<div></div>CSS代碼：12345678910div{width:200px;height:200px;margin:50pxauto;background:#0F0;transition:all2s;}div:hover{transform:translate(-100px,200px);}顯示效果如圖1-17-10所示。圖1-17-10鼠標(biāo)經(jīng)過區(qū)域時(shí)，區(qū)域的平移效果課堂練習(xí)1-17-6設(shè)置區(qū)域的旋轉(zhuǎn)效果HTML代碼：1234<divid="main"><divclass="div1"></div><divclass="div2"></div><divclass="clear"></div>5678<divclass="div3"></div><divclass="div4"></div><divclass="clear"></div></div>CSS代碼：123456789101112#main{width:500px;margin:50pxauto;}.div1,.div2,.div3,.div4{height:200px;width:200px;background:#FF0;}.div1{transform:rotate(30deg);float:left;}.div2{transform:rotate(-30deg);float:right;}131415161718192021.clear{clear:both;}.div3{margin:100px000;transform:rotate(60deg);float:left;}.div4{margin:100px000;transform:rotate(-60deg);float:right;}課堂練習(xí)1-17-6設(shè)置區(qū)域的旋轉(zhuǎn)效果顯示效果如圖1-17-11所示。圖1-17-11設(shè)置區(qū)域的旋轉(zhuǎn)效果知識與技能準(zhǔn)備（3）縮放scale通過scale()方法，元素的尺寸會(huì)根據(jù)給定的寬度（X軸）和高度（Y軸）參數(shù)增加或減少。（4）傾斜skew通過skew()方法，元素根據(jù)給定的水平線（X軸）和垂直線（Y軸）參數(shù)進(jìn)行角度翻轉(zhuǎn)。2、變形效果語法：transform:skew(x軸的參數(shù),y軸的參數(shù));語法：transform:scale(水平縮放，垂直縮放);課堂練習(xí)1-17-7設(shè)置區(qū)域的縮放效果HTML代碼：1<div></div>CSS代碼：123456789div{width:200px;height:200px;margin:50pxauto;background:#00F;transition:all2s;}div:hover{transform:scale(2,0.5);}顯示效果如圖1-17-12和圖1-17-13所示。圖1-17-12縮放效果-鼠標(biāo)未經(jīng)過區(qū)域圖1-17-13鼠標(biāo)經(jīng)過區(qū)域的最終縮放效果課堂練習(xí)1-17-8設(shè)置區(qū)域的傾斜效果HTML代碼：1<div></div>CSS代碼：12345678div{width:200px;height:200px;margin:150pxauto;background:#F30;transition:all2s;}div:hover{transform:skew(30deg,45deg);}顯示效果如圖1-17-14和圖1-17-15所示。圖1-17-14傾斜效果-鼠標(biāo)未經(jīng)過區(qū)域圖1-17-15鼠標(biāo)經(jīng)過區(qū)域的最終傾斜效果知識與技能準(zhǔn)備2.23D轉(zhuǎn)換2D轉(zhuǎn)換主要是通過X軸和Y軸來進(jìn)行變形，而3D轉(zhuǎn)換主要是通過X軸、Y軸和Z軸來進(jìn)行對元素的格式化。（1）rotateX()通過rotateX()方法，元素圍繞其X軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。（2）rotateY()通過rotateY()方法，元素圍繞其Y軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。2、變形效果課堂練習(xí)1-17-9設(shè)置3D轉(zhuǎn)換效果-X軸HTML代碼：1<div>你好，將進(jìn)行3D轉(zhuǎn)換。</div>CSS代碼：123456789div{width:300px;height:100px;background-color:green;border:1pxsolidblack;}div:hover{transform:rotateX(135deg);-webkit-transform:rotateX(135deg);-moz-transform:rotateX(135deg);}顯示效果如圖1-17-16和圖1-17-17所示。圖1-17-16設(shè)置3D轉(zhuǎn)換效果-X軸-鼠標(biāo)未經(jīng)過區(qū)域圖1-17-17設(shè)置3D轉(zhuǎn)換效果-X軸-鼠標(biāo)經(jīng)過區(qū)域課堂練習(xí)1-17-10設(shè)置3D轉(zhuǎn)換效果-X軸HTML代碼：1<div>你好，將進(jìn)行3D轉(zhuǎn)換。</div>CSS代碼：123456789div{width:300px;height:100px;background-color:green;border:1pxsolidblack;}div:hover{transform:rotateY(120deg);-webkit-transform:rotateY(120deg);-moz-transform:rotateY(120deg);}顯示效果如圖1-17-16和圖1-17-17所示。圖1-17-18設(shè)置3D轉(zhuǎn)換效果-Y軸-鼠標(biāo)未經(jīng)過區(qū)域圖1-17-19設(shè)置3D轉(zhuǎn)換效果-Y軸-鼠標(biāo)經(jīng)過區(qū)域知識與技能準(zhǔn)備動(dòng)畫效果可以通過@keyframes規(guī)則來創(chuàng)建。在@keyframes中定義某種CSS樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫效果。動(dòng)畫效果可用于制作一些簡單的動(dòng)態(tài)效果或廣告。動(dòng)畫效果的代碼由兩部分組成，第一部分為標(biāo)簽聲明動(dòng)畫效果：注意：以上語法中，動(dòng)畫名稱和執(zhí)行時(shí)間必須存在，否則動(dòng)畫不會(huì)播放。第二部分設(shè)置動(dòng)畫的實(shí)際效果：請用百分比來規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞"from"和"to"，等同于0%和100%。0%是動(dòng)畫的開始，100%是動(dòng)畫的結(jié)束。為了得到最佳的