《web前端技術(shù)》課件-第八章

Web前端技術(shù)簽到掃碼下載文旌課堂APP掃碼簽到簽到方式教師通過“文旌課堂APP”生成簽到二維碼，并設(shè)置簽到時(shí)間，學(xué)生通過“文旌課堂APP”掃描“簽到二維碼”進(jìn)行簽到。CSS3高級應(yīng)用第八章使用CSS3提供的屬性不僅可以設(shè)置元素的樣式，還可以實(shí)現(xiàn)動態(tài)特效，如變形效果、過渡效果和動畫效果等。本章將對變形效果、過渡效果和動畫效果的相關(guān)知識進(jìn)行詳細(xì)介紹。章節(jié)導(dǎo)讀熟悉變形效果的相關(guān)知識，包括變形屬性、2D變形和3D變形。熟悉過渡效果的相關(guān)屬性，了解常見過渡效果的應(yīng)用場景及觸發(fā)方式。熟悉關(guān)鍵幀和動畫效果的相關(guān)屬性，能夠制作動畫片段。學(xué)習(xí)目標(biāo)學(xué)習(xí)CSS3高級應(yīng)用，拓寬視野，提高專業(yè)技能。提高對事物的觀察和歸納總結(jié)能力，養(yǎng)成好的編程習(xí)慣和思維方式。素質(zhì)目標(biāo)第八章CSS高級應(yīng)用/章節(jié)導(dǎo)航/8.1變形效果8.2

過渡效果8.3動畫效果實(shí)戰(zhàn)演練——制作北極熊走路動畫片段變形效果8.1早期的CSS版本僅支持設(shè)置元素樣式而無法實(shí)現(xiàn)變形效果，要實(shí)現(xiàn)變形效果只能依賴于JavaScript。隨著CSS的發(fā)展，CSS3中新增了transform屬性用于設(shè)置元素的2D和3D變形效果，具體格式為：其中，none是默認(rèn)值，表示無變形效果；transform-functions表示變形方法，用于設(shè)置元素的2D或3D變形效果。變形方法可以有多個(gè)，不同的變形方法之間用空格隔開。8.1變形效果transform:none|transform-functions;8.18.1.12D變形以元素中心為原點(diǎn)創(chuàng)建一個(gè)二維坐標(biāo)系，如圖所示。沿坐標(biāo)系中的x軸或y軸對元素進(jìn)行調(diào)節(jié)產(chǎn)生的變形效果稱為2D變形。在CSS3中，2D變形主要包括4種變形效果，分別為平移、縮放、旋轉(zhuǎn)和傾斜。變形效果以元素中心為原點(diǎn)創(chuàng)建二維坐標(biāo)系8.11.平移CSS3中，使用translate()方法能夠重新定義元素在二維坐標(biāo)系中的坐標(biāo)，實(shí)現(xiàn)平移變形，具體格式為：其中，length-x與length-y分別表示元素在x軸與y軸方向上移動的距離，參數(shù)值為正負(fù)數(shù)值與單位或者百分比。如果只設(shè)置一個(gè)參數(shù)值，則第二個(gè)參數(shù)值默認(rèn)為0。此外，在CSS3中，使用translateX(length)和translateY(length)方法可以分別針對x軸和y軸設(shè)置元素的平移效果。變形效果transform:translate(length-x,length-y);8.12.縮放在CSS3中，使用scale()方法能夠使元素的寬度與高度按比例放大或縮小，實(shí)現(xiàn)縮放變形，具體格式為：其中，times-x與times-y分別表示元素寬度與高度的縮放倍數(shù)，參數(shù)值大于1表示按比例放大，參數(shù)值小于1則表示按比例縮小。如果只設(shè)置一個(gè)參數(shù)值，則表示同時(shí)設(shè)置寬度與高度的縮放比例。當(dāng)參數(shù)值為負(fù)數(shù)時(shí)，元素將會翻轉(zhuǎn)顯示。例如，當(dāng)times-x設(shè)置為負(fù)數(shù)時(shí)，縮放后的元素將以y軸為基準(zhǔn)水平翻轉(zhuǎn)。變形效果transform:scale(times-x,times-y);8.13.旋轉(zhuǎn)在CSS3中，使用rotate(

)方法能夠使元素以原點(diǎn)為中心順時(shí)針或逆時(shí)針轉(zhuǎn)動一定角度，實(shí)現(xiàn)旋轉(zhuǎn)變形，具體格式為：其中，angle表示旋轉(zhuǎn)的角度，如30deg。deg為角度的單位，表示度。當(dāng)參數(shù)值為正值時(shí)，元素按順時(shí)針旋轉(zhuǎn)，反之則按逆時(shí)針旋轉(zhuǎn)。變形效果transform:rotate(angle);8.14.傾斜在CSS3中，使用skew()方法能夠使元素沿著y軸和x軸傾斜一定角度，實(shí)現(xiàn)傾斜效果，具體格式為：其中，angle-y與angle-x分別表示元素沿著y軸和x軸的傾斜角度，如圖所示。參數(shù)值可以為正值，也可以為負(fù)值，單位為deg。如果只設(shè)置一個(gè)參數(shù)值，則表示設(shè)置沿y軸傾斜，且第二個(gè)參數(shù)為0。變形效果transform:skew(angle-y,angle-x);skew()方法與rotate()方法的不同之處是rotate()方法只是旋轉(zhuǎn)元素，不會改變元素的形狀，而skew()方法會改變元素的形狀。超鏈接skew()方法中，若元素僅沿著y軸傾斜，元素x軸方向上的邊不傾斜，y軸方向上的邊傾斜一定的角度，如圖所示。反之，若元素僅沿著x軸傾斜，元素y軸方向上的邊不傾斜，x軸方向上的邊傾斜一定的角度，如圖所示。zhIDIANMIJIN指點(diǎn)迷津8.1變形效果元素沿著y軸傾斜效果示意圖元素沿著x軸傾斜效果示意圖超鏈接在CSS3中，還新增了專門針對x軸或y軸進(jìn)行2D變形設(shè)置的方法。zhISHIku知識庫8.1變形效果#d1{transform:translate(20px,30px);/*設(shè)置元素在x軸與y軸方向上移動的距離分別為20px和30px*/}#d2{transform:scale(-1.2,0.8);/*設(shè)置元素的寬度按比例放大1.2倍并翻轉(zhuǎn)顯示，高度按比例縮小0.8倍*/}#d3{transform:rotate(20deg);/*設(shè)置元素以原點(diǎn)為中心順時(shí)針轉(zhuǎn)動20度*/}#d4{transform:skew(-30deg,10deg);/*設(shè)置元素沿著y軸和x軸分別傾斜-30度和10度*/}【例8-1】

為元素設(shè)置2D變形效果，包括平移、縮放、旋轉(zhuǎn)、傾斜等（以下提供部分代碼）。8.1變形效果【例8-1】

頁面效果如圖所示。設(shè)置2D變形效果后的頁面效果8.1變形效果8.18.1.2

3D變形以元素中心為原點(diǎn)，創(chuàng)建一個(gè)三維坐標(biāo)系，如圖所示。沿坐標(biāo)系中的x軸、y軸和z軸對元素進(jìn)行調(diào)節(jié)產(chǎn)生的變形效果稱為3D變形。在CSS3中，3D變形主要包括3種變形效果，分別為平移、縮放和旋轉(zhuǎn)。變形效果以元素中心為原點(diǎn)創(chuàng)建三維坐標(biāo)系CSS3中，使用translate3d()方法可以重新定義元素在三維坐標(biāo)系中的坐標(biāo)，實(shí)現(xiàn)平移變形，具體格式為：8.11.平移變形效果transform:translate3d(length-x,length-y,length-z);x軸移動距離y軸移動距離z軸移動距離只能是正負(fù)數(shù)值正負(fù)數(shù)值與單位或者百分比值越大視覺上元素越大8.12.縮放在CSS3中，使用scale3d()方法能夠使元素在x軸、y軸和z軸上按比例放大或縮小，實(shí)現(xiàn)縮放變形，具體格式為：變形效果transform:scale3d(times-x,times-y,times-z);x軸縮放倍數(shù)y軸縮放倍數(shù)z軸縮放倍數(shù)＞1，放大；＜1，縮?。粸樨?fù)值，翻轉(zhuǎn)8.13.旋轉(zhuǎn)在CSS3中，使用rotateX()、rotateY()和rotateZ()方法能夠使元素分別圍繞x軸、y軸和z軸順時(shí)針或逆時(shí)針轉(zhuǎn)動一定角度，實(shí)現(xiàn)旋轉(zhuǎn)變形，具體格式為：此外，在CSS3中還有一個(gè)可以指定旋轉(zhuǎn)軸的rotate3d()方法，具體格式為：變形效果transform:rotateX(angle)|rotateY(angle)|rotateZ(angle);transform:rotate3d(length-x,length-y,length-z,angle);旋轉(zhuǎn)的角度，單位為deg;參數(shù)值為正，順時(shí)針旋轉(zhuǎn)，為負(fù)，逆時(shí)針旋轉(zhuǎn)共同確定一個(gè)坐標(biāo)，原點(diǎn)與該點(diǎn)連接構(gòu)成一個(gè)向量，代表元素的旋轉(zhuǎn)軸，指定了旋轉(zhuǎn)的方向超鏈接在CSS3中，還新增了專門針對z軸進(jìn)行3D變形設(shè)置的方法zhISHIku知識庫8.1變形效果<style>div{width:200px;height:150px;font-size:1.5em;font-weight:bold;text-align:center;display:inline-block;}.dy{margin:30px;border:dashed3px#55738F;perspective:300px;/*為3D變形元素定義透視視圖*/}.dn{background-color:rgba(201,202,250,0.8);}#d1{transform:translate3d(20px,30px,-80px);/*設(shè)置元素在x軸、y軸和z軸方向上分別移動20px、30px、-80px*/}#d2{transform:scale3d(1.2,0.8,-3)rotateX(20deg);/*設(shè)置元素在x軸、y軸和z軸上的縮放倍數(shù)分別為1.2、0.8、-3，同時(shí)設(shè)置元素以x軸為旋轉(zhuǎn)軸旋轉(zhuǎn)20度*/}#d3{transform:rotateX(20deg);/*設(shè)置元素以x軸為旋轉(zhuǎn)軸旋轉(zhuǎn)20度*/}【例8-2】

為元素設(shè)置3D變形效果，包括平移、縮放、旋轉(zhuǎn)等（以下提供部分代碼）。8.1變形效果【例8-2】

為元素設(shè)置3D變形效果，包括平移、縮放、旋轉(zhuǎn)等（以下提供部分代碼）。</style><body> <divclass="dy"> <divclass="dn">3D變形效果原圖</div> </div> <divclass="dy"> <divid="d1"class="dn">3D變形效果平移</div> </div> <divclass="dy"> <divid="d2"class="dn">3D變形效果縮放</div> </div> <divclass="dy"> <divid="d3"class="dn">3D變形效果旋轉(zhuǎn)</div> </div></body>8.1變形效果【例8-2】

頁面效果如圖所示。設(shè)置3D變形效果后的頁面效果8.1變形效果超鏈接設(shè)置3D縮放變形效果的scale3d()和scaleZ()方法單獨(dú)使用時(shí)沒有任何視覺效果，需要配合其他變換方法一起使用才會顯示不同的視覺效果，如例8-2中將scale3d()方法與rotateX()方法搭配使用。Gaoshoudianbo高手點(diǎn)撥8.1變形效果超鏈接設(shè)置3D變形時(shí)，一般需要為設(shè)置變形的元素的父元素設(shè)置透視屬性perspective。透視是繪畫理論術(shù)語，是在平面上根據(jù)一定原理用線條來顯示物體的空間位置、輪廓和投影的科學(xué)，根據(jù)透視關(guān)系能夠繪制出帶有空間結(jié)構(gòu)的透視圖，生活中常說的“近大遠(yuǎn)小”就是其中的一個(gè)簡單的原理。CSS3中的透視屬性可以理解為設(shè)置“近大遠(yuǎn)小”的程度，屬性值越小靠近人眼的一側(cè)就顯示得越大，一般設(shè)置為300px。該屬性的默認(rèn)屬性值為0，即不顯示透視，此時(shí)3D變形效果類似于2D變形效果。TUOZHANYUEDU拓展閱讀8.1變形效果過渡效果8.28.28.2.1過渡效果的相關(guān)屬性元素樣式從一個(gè)狀態(tài)向另一個(gè)狀態(tài)緩慢平滑地變化的過程稱為過渡效果。本節(jié)將詳細(xì)介紹實(shí)現(xiàn)過渡效果的相關(guān)屬性，以及常見過渡效果的觸發(fā)方式。過渡效果使用CSS3提供的transition-property、transition-duration、transition-timing-function、transition-delay等屬性，能夠在不使用Flash與JavaScript的情況下設(shè)置元素的過渡效果，下面對這些屬性進(jìn)行詳細(xì)介紹。8.21．設(shè)置過渡屬性在CSS3中，使用transition-property屬性設(shè)置應(yīng)用過渡效果的CSS屬性名稱，具體格式為：過渡效果transition-property:none|all|property;默認(rèn)值，不應(yīng)用過渡效果所有屬性應(yīng)用過渡效果應(yīng)用過渡效果的具體屬性名稱，可設(shè)置多個(gè)，用逗號間隔8.22．設(shè)置過渡時(shí)間CSS3中，使用transition-timing-function屬性設(shè)置過渡效果的速度曲線，具體格式為：其中，各屬性值的說明如下表所示。過渡效果transition-timing-function:cubic-bezier(n,n,n,n)|liner|ease|ease-in|ease-out|ease-in-out;8.22．設(shè)置過渡時(shí)間過渡效果屬性值說明cubic-bezier(n,n,n,n)貝塞爾曲線，用于精確設(shè)置過渡效果的速度曲線，n的取值范圍為0～1linear線性過渡，即以相同速度開始至結(jié)束的過渡效果，等同于cubic-bezier(0,0,1,1)ease平滑過渡，即慢速開始，然后變快，然后慢速結(jié)束的過渡效果，等同于cubic-bezier(0.25,0.1,0.25,1)ease-in由慢到快，即慢速開始再逐漸加速的過渡效果，等同于cubic-bezier(0.42,0,1,1)ease-out由快到慢，即快速開始慢速結(jié)束的過渡效果，等同于cubic-bezier(0,0,0.58,1)ease-in-out由慢到快再到慢，即慢速開始再加速，然后慢速結(jié)束的過渡效果，等同于cubic-bezier(0.42,0,0.58,1)

表

transition-timing-function屬性值及說明超鏈接貝塞爾曲線參數(shù)值的大小與速度效果的聯(lián)系并不直觀，直接設(shè)置參數(shù)值不一定能夠得到期望的效果，所以設(shè)置貝塞爾曲線的參數(shù)值時(shí)，可以使用瀏覽器的開發(fā)者工具進(jìn)行設(shè)置，下面介紹具體步驟。步驟1此處以Chrome瀏覽器為例，使用該瀏覽器打開“素材與案例\第8章\function.html”文檔，該文檔中已經(jīng)創(chuàng)建好添加了過渡效果的div元素。XIAOJIQIAO小技巧8.2過渡效果超鏈接步驟2按“F12”鍵打開“開發(fā)者工具”窗格，在“Elements”選項(xiàng)卡中單擊div元素的代碼行，在下方的“Styles”選項(xiàng)卡中單擊“:hov”所在區(qū)域，在展開的面板中勾選“:hover”復(fù)選框，改變div元素的狀態(tài)，如圖所示。XIAOJIQIAO小技巧8.2過渡效果改變div元素的狀態(tài)超鏈接步驟3再次單擊“:hov”所在區(qū)域，收起面板。此時(shí)“Styles”選項(xiàng)卡中顯示出div:hover{…}的代碼，單擊代碼“ease”前的貝塞爾曲線按鈕，打開貝塞爾曲線調(diào)節(jié)窗口，在窗口中移動曲線兩側(cè)的圓形控制點(diǎn)能夠動態(tài)調(diào)節(jié)代碼中的屬性值，窗口上方的一行圓點(diǎn)軌跡表示過渡效果的速度，圓點(diǎn)間隔越大的時(shí)間點(diǎn)過渡速度越快，如圖所示。XIAOJIQIAO小技巧8.2過渡效果打開貝塞爾曲線調(diào)節(jié)窗口超鏈接步驟4

調(diào)節(jié)完成后，再次單擊貝塞爾曲線按鈕，關(guān)閉貝塞爾曲線調(diào)節(jié)窗口，將自動生成的屬性值復(fù)制到文檔中對應(yīng)位置并保存即可。XIAOJIQIAO小技巧8.2過渡效果8.24．設(shè)置延遲時(shí)間在CSS3中，使用transition-delay屬性設(shè)置過渡效果何時(shí)開始，具體格式為：例如，有一個(gè)時(shí)長為5秒的過渡效果A，A的變化過程可看作一個(gè)時(shí)長為5秒的動畫片段，在此基礎(chǔ)上設(shè)置延遲時(shí)間為-2秒，則表示當(dāng)該過渡效果觸發(fā)時(shí)，A將直接從第2秒開始播放直至結(jié)束（默認(rèn)過渡效果是從第0秒開始播放）。過渡效果transition-delay:time;等待時(shí)間，單位s或ms;默認(rèn)值0，＞0，等待時(shí)間之后開始；＜0，在該時(shí)間之前截?cái)唷?.2過渡效果超鏈接CSS3中，使用transition屬性可以在一個(gè)聲明中設(shè)置過渡效果的各個(gè)屬性，具體格式為：其中，屬性值的順序不可顛倒。實(shí)現(xiàn)多個(gè)過渡效果時(shí)，每組屬性值用逗號隔開。ZhIshituozhan知識拓展transition:transition-propertytransition-durationtransition-timing-functiontransition-delay;8.28.2.2過渡效果的觸發(fā)方式在CSS3中，常通過鼠標(biāo)事件觸發(fā)過渡效果，如單擊按鈕、鼠標(biāo)指針經(jīng)過等。下面介紹幾種過渡效果常見的觸發(fā)方式。過渡效果8.28.2.2過渡效果的觸發(fā)方式此外，媒體查詢響應(yīng)時(shí)也能夠觸發(fā)過渡效果。例如，以下代碼表示當(dāng)屏幕最大寬度為420px時(shí)，div元素的寬度變?yōu)?00px，該過程應(yīng)用時(shí)長為1秒的過渡效果。過渡效果@mediaonlyscreenand(max-width:420px){div{width:100px;}}div{width:200px;height:100px;transition:width1s;}【例8-3】

為元素設(shè)置過渡效果，包括過渡屬性、過渡時(shí)間、過渡的速度曲線和延遲時(shí)間等（以下提供部分代碼）。8.2過渡效果#d1{transition-property:border-radius;

/*設(shè)置應(yīng)用過渡效果的CSS屬性名稱為border-radius*/

transition-duration:5s;

/*設(shè)置完成過渡效果需要花費(fèi)的時(shí)間為5秒*/

transition-timing-function:ease;

/*設(shè)置過渡效果的速度曲線為ease*/

transition-delay:1s;/*設(shè)置過渡效果等待1秒后開始*/}

#d1:hover{border-radius:155px;}/*設(shè)置鼠標(biāo)指針經(jīng)過時(shí)觸發(fā)過渡效果*/【例8-3】

頁面效果如圖所示。8.2過渡效果設(shè)置過渡效果后的頁面效果動畫效果8.3制作動畫效果必須先設(shè)置關(guān)鍵幀，一個(gè)關(guān)鍵幀代表動畫變化過程中的一個(gè)狀態(tài)。在CSS3中，使用@keyframes規(guī)則定義關(guān)鍵幀，具體格式為：8.38.3.1關(guān)鍵幀使用transition屬性只能在一個(gè)開始值與一個(gè)結(jié)束值之間添加過渡效果，無法設(shè)置中間值，而CSS3中的動畫功能不僅可以制作出過渡效果，還可以通過設(shè)置關(guān)鍵幀制作變化多樣的動畫效果。動畫效果@keyframesname{selector{css-styles;}}動畫名稱關(guān)鍵幀的時(shí)間位置(動畫時(shí)長的百分比),from（等價(jià)于0%）,to（等價(jià)于100%）對應(yīng)關(guān)鍵幀的樣式屬性在CSS3中，使用animation-name屬性設(shè)置要應(yīng)用的動畫效果名稱，具體格式為：其中，name表示動畫效果名稱，其取值是想要應(yīng)用的@keyframes動畫名稱；none表示不應(yīng)用或取消動畫。要想實(shí)現(xiàn)動畫效果，在定義了關(guān)鍵幀之后，就需要使用動畫效果的相關(guān)屬性來控制關(guān)鍵幀的變化。CSS3為實(shí)現(xiàn)動畫效果提供了一些屬性，下面對這些屬性進(jìn)行詳細(xì)介紹。8.38.3.2動畫效果的相關(guān)屬性動畫效果animation-name:name|none;1．設(shè)置動畫名稱在CSS3中，使用animation-duration屬性設(shè)置動畫效果播放一次的時(shí)長，具體格式為：其中，time表示完成動畫效果所花費(fèi)的時(shí)間，單位一般為s或ms。默認(rèn)值是0，意味著沒有動畫效果。8.3動畫效果animation-duration:time;2．設(shè)置動畫時(shí)間在CSS3中，使用animation-timing-function屬性設(shè)置動畫效果的速度曲線，具體格式為：其中，屬性值的含義和設(shè)置方法與transition-timing-function的屬性值類似。animation-timing-function:cubic-bezier(n,n,n,n)|liner|ease|ease-in|ease-out|ease-in-out;3．設(shè)置動畫的速度曲線8.3動畫效果超鏈接此外，animation-timing-function屬性值還可以設(shè)置為steps(number,start|end)方法。它用于設(shè)置兩個(gè)關(guān)鍵幀之間插入多少幀補(bǔ)間動畫，參數(shù)number表示幀數(shù)，值為正整數(shù)；參數(shù)start表示最后一幀是補(bǔ)間動畫的開始；end表示第一幀是補(bǔ)間動畫的開始。當(dāng)不使用steps()方法時(shí)，關(guān)鍵幀之間的補(bǔ)間動畫由瀏覽器自動填充。此處的補(bǔ)間動畫是指相鄰兩個(gè)關(guān)鍵幀之間的過渡過程，該過程由幾步完成，就稱補(bǔ)間動畫有幾幀，也就是參數(shù)number的值。ZhIshituozhan知識拓展在CSS3中，使用animation-delay屬性設(shè)置動畫效果何時(shí)開始，具體格式為：8.3動畫效果animation-delay:time;4．設(shè)置延遲時(shí)間在CSS3中，使用animation-iteration-count屬性設(shè)置動畫效果播放的次數(shù)，具體格式為：animation-iteration-count:number|infinite;5．設(shè)置播放次數(shù)播放次數(shù)，取正整數(shù)，默認(rèn)值為1循環(huán)播放8.3動畫效果在CSS3中，使用animation-direction屬性設(shè)置動畫效果的播放方向，具體格式為：animation-direction:normal|alternate;6．設(shè)置播放方向默認(rèn)值，動畫效果正常播放先正常播放一次，再反向播放一次，以該規(guī)律輪流播放8.3動畫效果超鏈接與transition屬性類似，在CSS3中，使用animation屬性可以在一個(gè)聲明中設(shè)置動畫效果的各個(gè)屬性，包括動畫名稱、時(shí)間、速度曲線、延遲時(shí)間、播放次數(shù)和播放方向，具體格式為：其中，animation-name和animation-duration的值必須設(shè)置，否則無法播放動畫。ZhIshituozhan知識拓展animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation_x0002_direction;8.3動畫效果在CSS3中，使用animation-play-state屬性設(shè)置動畫效果的狀態(tài)，如暫停、播放，具體格式為：其中，paused表示動畫效果已暫停；running表示動畫效果正在播放。animation-play-state:paused|running;7．設(shè)置播放狀態(tài)8.3動畫效果在CSS3中，使用animation-fill-mode屬性設(shè)置動畫效果播放外（如播放之前或之后）的狀態(tài)，具體格式為：animation-fill-mode:none|forwards|backwards|both;8．設(shè)置播放外狀態(tài)不設(shè)置動畫效果之外的狀態(tài)當(dāng)動畫效果完成后，保持結(jié)束時(shí)的屬性（在最后一個(gè)關(guān)鍵幀中定義）指定的一段時(shí)間內(nèi)，以及在動畫效果顯示前，應(yīng)用開始時(shí)的屬性（在第一個(gè)關(guān)鍵幀中定義）屬性值forwards和backwards的綜合【例8-3】為元素設(shè)置動畫效果，包括關(guān)鍵幀、動畫名稱、動畫時(shí)間、動畫的速度曲線、延遲時(shí)間、播放次數(shù)等（以下提供部分代碼）。8.3動畫效果img{width:150px;

padding:15px;

position:relative;

/*設(shè)置元素的定位類型為相對定位*/

animation-name:move;

/*設(shè)置要應(yīng)用的動畫效果名稱為move*/

animation-duration:4s;

/*設(shè)置動畫效果播放一次的時(shí)長為4秒*/

animation-timing-function:liner;

/*設(shè)置動畫效果的速度曲線為liner*/

animation-delay:2s;

/*設(shè)置動畫效果等待2秒后開始*/

animation-iteration-count:2;

/*設(shè)置動畫效果播放2次*/

animation-direction:alternate;

/*設(shè)置動畫效果輪流反向播放*/

animation-play-state:running;

/*設(shè)置動畫效果播放的狀態(tài)為正在播放*/

animation-fill-mode:both;

/*設(shè)置動畫效果播放之前和之后的狀態(tài)*/}【例8-3】為元素設(shè)置動畫效果，包括關(guān)鍵幀、動畫名稱、動畫時(shí)間、動畫的速度曲線、延遲時(shí)間、播放次數(shù)等（以下提供部分代碼）。@keyframesmove{/*定義關(guān)鍵幀的動畫效果名稱為move*/0%{left:0px;background-color:#d6d6a0;}

/*設(shè)置時(shí)間處于動畫時(shí)長的開始時(shí)，左邊距離為0px，背景顏色為#d6d6a0*/25%{left:100px;}/*設(shè)置時(shí)間處于動畫時(shí)長的25%時(shí)，左邊距離為100px*/50%{left:200px;}/*設(shè)置時(shí)間處于動畫時(shí)長的50%時(shí)，左邊距離為200px*/75%{left:300px;}/*設(shè)置時(shí)間處于動畫時(shí)長的75%時(shí)，左邊距離為300px*/100%{left:400px;}/*設(shè)置時(shí)間處于動畫時(shí)長的100%時(shí)，左邊距離為400px*/}8.3動畫效果【例8-3】頁面效果如圖所示。設(shè)置動畫效果后的頁面效果8.3動畫效果超鏈接使用關(guān)鍵幀不僅能夠?qū)崿F(xiàn)元素的動態(tài)效果，還能結(jié)合圖像元素與背景屬性等制作動畫片段。下面帶領(lǐng)大家一起制作北極熊走路動畫片段，頁面效果如圖所示?！谱鞅睒O熊走路動畫片段實(shí)戰(zhàn)演練WEB掃一掃超鏈接步驟1

在HBuilderX中導(dǎo)入本書配套素材“素材與案例\第8章\實(shí)戰(zhàn)演練”文件夾，然后打開“8.3.html”文檔，該文檔中已經(jīng)創(chuàng)建好div元素并為其設(shè)置了背景圖像，此時(shí)頁面效果如圖所示?！谱鞅睒O熊走路動畫片段實(shí)戰(zhàn)演練WEB未設(shè)置動畫的頁面效果超鏈接步驟2

定義關(guān)鍵幀。“8.3.html”文檔中的div元素就是幀動畫的“舞臺”，使用關(guān)鍵幀設(shè)置其背景圖像顯示位置的變化，就能夠制作出北極熊原地走路的動畫效果，其中該動畫使用的背景圖像（寬度為1000px）如圖所示。

因此，在“8.3.html”文檔的<style>…</style>標(biāo)簽中添加以下代碼，設(shè)置開始和結(jié)束的關(guān)鍵幀及樣式?！谱鞅睒O熊走路動畫片段實(shí)戰(zhàn)演練WEB@keyframesmove{0%{background-position:00;}/*設(shè)置第一個(gè)關(guān)鍵幀的背景圖像顯示位置*/100%{background-position:-1000px0;}/*設(shè)置第二個(gè)關(guān)鍵幀的背景圖像顯示位置向左側(cè)移動1000px*/}div元素的背景圖像超鏈接步驟3

設(shè)置動畫效果。該動畫共8個(gè)動作，每個(gè)動作對應(yīng)的背景圖像區(qū)域占總寬度的八分之一，可設(shè)置該動畫開始與結(jié)束關(guān)鍵幀之間共移動8次（瀏覽器自動將背景圖像的移動過程分8次完成，每次移動125px）。因此，在“8.3.html”文檔<style>…</style>標(biāo)簽中的div{…}最后面添加以下代碼，為div元素應(yīng)用動畫效果，此時(shí)頁面效果如圖所示?！谱鞅睒O熊走路動畫片段實(shí)戰(zhàn)演練WEBanimation:move1ssteps(8,end)infinite;/*為div元素應(yīng)用動畫move，時(shí)長為1秒，兩個(gè)關(guān)鍵幀之間共8幀，以第一幀為動畫開始，循環(huán)播放*/本章主要介紹了CSS3高級應(yīng)用的相關(guān)知識。通過本章的學(xué)習(xí)，讀者應(yīng)重點(diǎn)掌握以下內(nèi)容。（1）CSS3中新增的transform屬性可用于設(shè)置元素的2D和3D變形效果。（2）在CSS3中，2D變形主要包括平移、縮放、旋轉(zhuǎn)和傾斜4種效果，分別使用方法translate()、scale()、rotate()和skew()實(shí)現(xiàn)。（3）在CSS3中，3D變形主要包括平移、縮放和旋轉(zhuǎn)3種效果。其中，平移、縮放分別使用方法translate3d()、scale3d()實(shí)現(xiàn)，旋轉(zhuǎn)可使用方法rotateX()、rotateY()和rotateZ()實(shí)現(xiàn)。本章小結(jié)（4）在CSS3中，使用transition-property、transition-duration、transition-timing-function、transition-delay屬性可以設(shè)置過渡屬性、過渡時(shí)間、過渡的速度曲線和延遲時(shí)間，實(shí)現(xiàn)元素的過渡效果。（5）在CSS3中，使用@keyframes規(guī)則定義關(guān)鍵幀，使用animation-name、animation_x0002_duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode屬性設(shè)置動畫名稱、動畫時(shí)間、動畫的速度曲線、延遲時(shí)間、播放次數(shù)、播放方向、播放狀態(tài)和播放外狀態(tài)，實(shí)現(xiàn)元素的動畫效果。本章小結(jié)超鏈接課堂練習(xí)WEB（1）關(guān)于變形屬性的變形方法，下列敘述正確的是（

）。

A．rotate(

)為平移方法，可以重新設(shè)置元素的位置

B．scale(

)為縮放方法，可以改變元素的尺寸

C．skew(

)為旋轉(zhuǎn)方法，可以旋轉(zhuǎn)一個(gè)角度

D．translate(

)為傾斜方法，可以使元素傾斜一個(gè)角度（2）關(guān)于過渡效果的設(shè)置，下列敘述錯誤的是（

）。

A．僅使用CSS3無法實(shí)現(xiàn)過渡效果

B．transition-duration屬性用于設(shè)置過渡時(shí)間