響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5+CSS3+Bootstrap）（第3版）課件 第6章 Canvas繪圖與CSS動(dòng)畫

第6章Canvas繪圖與CSS動(dòng)畫《響應(yīng)式Web開發(fā)項(xiàng)目教程（HTML5+CSS3+Bootstrap）（第3版）》學(xué)習(xí)目標(biāo)/Target了解什么是畫布，能夠說出網(wǎng)頁中畫布的作用掌握畫布的使用方法，能夠創(chuàng)建畫布、獲取畫布以及準(zhǔn)備畫筆掌握線條的繪制方法，能夠根據(jù)實(shí)際需求完成線條的繪制

掌握線條樣式的設(shè)置方法，能夠靈活地設(shè)置線條的寬度、描邊顏色和端點(diǎn)形狀掌握路徑重置與閉合的設(shè)置方法，能夠重置路徑和閉合路徑學(xué)習(xí)目標(biāo)/Target掌握填充路徑的設(shè)置方法，能夠填充路徑掌握文本的繪制方法，能夠根據(jù)實(shí)際需求完成文本的繪制掌握圓或弧線的繪制方法，能夠繪制圓或弧線

掌握過渡屬性的使用方法，能夠?qū)崿F(xiàn)元素在不同狀態(tài)下平滑的樣式變換掌握變形的方法，能夠?qū)崿F(xiàn)元素的平移、縮放、傾斜和旋轉(zhuǎn)等效果學(xué)習(xí)目標(biāo)/Target掌握動(dòng)畫屬性的使用方法，能夠?qū)崿F(xiàn)豐富的動(dòng)畫效果掌握水果銷量餅圖頁面的制作方法，能夠完成水果銷量餅圖頁面的開發(fā)掌握鮮花列表頁面的制作方法，能夠完成鮮花列表頁面的開發(fā)

掌握課程宣傳頁面的制作方法，能夠完成課程宣傳頁面的開發(fā)章節(jié)概述/SummaryHTML5提供了一個(gè)全新的Canvas（畫布）功能，使用它，用戶可以在網(wǎng)頁中繪制豐富多彩的圖形。通過HTML5的Canvas功能，可以創(chuàng)建各種數(shù)據(jù)可視化圖表、圖形等。此外，CSS3提供了強(qiáng)大的動(dòng)畫功能，可以為網(wǎng)頁增添生動(dòng)形象和引人關(guān)注的動(dòng)畫效果。本章將會(huì)詳細(xì)講解HTML5中的Canvas繪圖功能和CSS動(dòng)畫技術(shù)的應(yīng)用。目錄/Contents6-16-2水果銷量餅圖頁面鮮花列表頁面6-3課程宣傳頁面水果銷量餅圖頁面項(xiàng)目6-1項(xiàng)目需求小劉是一位經(jīng)營多家水果店的老板，為了更好地了解消費(fèi)者的偏好并優(yōu)化供應(yīng)銷售策略，小劉經(jīng)常在季節(jié)交替時(shí)分析店鋪內(nèi)水果的銷售情況。為此，他希望繪制一張餅圖，以展示店鋪中夏季部分水果的銷量占比情況。項(xiàng)目需求該店鋪夏季部分水果的銷量報(bào)表（單位：kg）如下所示。根據(jù)銷量報(bào)表，可以計(jì)算出：蘋果的銷量占比為35%西瓜的銷量占比為20%葡萄的銷量占比為45%蘋果西瓜葡萄350200450項(xiàng)目需求本項(xiàng)目需要基于上述需求實(shí)現(xiàn)水果銷量餅圖頁面的開發(fā)，水果銷量餅圖頁面效果如下圖所示。知識儲(chǔ)備

先定一個(gè)小目標(biāo)！了解什么是畫布，能夠說出網(wǎng)頁中畫布的作用1.認(rèn)識畫布知識儲(chǔ)備1.認(rèn)識畫布說到畫布，也許大家并不陌生，在美術(shù)課上，它是繪畫和涂鴉的主要工具。畫架上的畫布如下圖所示。知識儲(chǔ)備1.認(rèn)識畫布在網(wǎng)頁設(shè)計(jì)中，畫布也扮演了相似的角色，它是專門用于繪制和展示特定樣式效果的一個(gè)特殊區(qū)域。網(wǎng)頁中的畫布是一塊矩形區(qū)域，默認(rèn)情況下，該區(qū)域的寬度為300px、高度為150px，用戶可以自定義畫布的大小或其他屬性和樣式來改變畫布的外觀和行為。值得一提的是，與繪制在紙上的方式不同，在網(wǎng)頁中的畫布繪畫是通過JavaScript來控制畫布中的內(nèi)容，例如繪制圖像、繪制線條、添加文字等。知識儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握畫布的使用方法，能夠創(chuàng)建畫布、獲取畫布以及準(zhǔn)備畫筆2.使用畫布知識儲(chǔ)備2.使用畫布在網(wǎng)頁中，畫布并不是默認(rèn)存在的。要使用畫布進(jìn)行繪圖，首先需要?jiǎng)?chuàng)建畫布，然后獲取畫布，最后準(zhǔn)備畫筆，以便在畫布上進(jìn)行繪圖操作。知識儲(chǔ)備2.使用畫布（1）創(chuàng)建畫布在HTML文件中使用<canvas>標(biāo)簽創(chuàng)建畫布。創(chuàng)建畫布的語法格式如下。<canvas>標(biāo)簽用于創(chuàng)建畫布。id屬性用于指定畫布的唯一標(biāo)識符。<canvas>標(biāo)簽是一個(gè)雙標(biāo)簽，在</canvas>標(biāo)簽之前，可以添加用于在不支持<canvas>標(biāo)簽的瀏覽器中顯示的替代信息，如“您的瀏覽器不支持Canvas?！薄．嫴季哂衱idth和height兩個(gè)屬性，分別用于定義畫布的寬度和高度。創(chuàng)建的畫布是透明的，沒有任何樣式，可以使用CSS為其設(shè)置邊框、背景等。<canvasid="畫布名稱"width="數(shù)值"height="數(shù)值"></canvas>設(shè)置畫布的寬度和高度時(shí)，盡量不要使用CSS樣式，否則可能使畫布中的圖案變形。注意知識儲(chǔ)備2.使用畫布（2）獲取畫布要想通過JavaScript控制畫布，首先要獲取畫布。使用getElementById()方法可以獲取畫布對象。例如，獲取id屬性值為cavs的畫布，示例代碼如下。letcanvas=document.getElementById('cavs');知識儲(chǔ)備2.使用畫布（3）準(zhǔn)備畫筆在開始繪圖之前，需要獲取一個(gè)繪制環(huán)境，即畫筆。在畫布中，這個(gè)畫筆被表示為一個(gè)上下文對象，通常被稱為context對象，可以通過畫布對象的getContext()方法獲取。該方法的參數(shù)取值為2d或webgl。2d表示二維繪圖的畫筆。webgl表示三維繪圖的畫筆。在JavaScript中，通常會(huì)定義一個(gè)變量來存儲(chǔ)獲取到的context對象。例如，可以將獲取到的context對象存儲(chǔ)在變量context中，示例代碼如下。letcontext=canvas.getContext('2d');知識儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握線條的繪制方法，能夠根據(jù)實(shí)際需求完成線條的繪制3.繪制線條知識儲(chǔ)備3.繪制線條線條是所有復(fù)雜圖形的基礎(chǔ)組成部分，想要繪制復(fù)雜的圖形，首先要從繪制線條開始。在繪制線條之前，要了解線條的組成。一條簡單的線條由3部分組成，分別是初始位置、連線端點(diǎn)以及描邊，如下圖所示。知識儲(chǔ)備3.繪制線條（1）初始位置在繪制圖形時(shí)，首先需要確定從哪里下“筆”，這個(gè)下“筆”的位置就是初始位置。在平面中，初始位置可以通過坐標(biāo)(x,y)表示。在畫布中從左上角坐標(biāo)(0,0)開始，x軸向右增大，y軸向下增大，畫布坐標(biāo)軸示意圖如下圖所示。知識儲(chǔ)備3.繪制線條在畫布中，可以使用moveTo(x,y)方法將繪制圖形的初始位置移動(dòng)到指定的坐標(biāo)位置。其中，x表示x軸上的位置，y表示y軸上的位置，兩者使用“,”進(jìn)行分隔。x和y的取值為數(shù)字，表示像素值。知識儲(chǔ)備3.繪制線條例如，將繪制圖形的初始位置移動(dòng)到橫坐標(biāo)50px和縱坐標(biāo)50px處，示例代碼如下。letcavs=document.getElementById('cavs');letcontext=cavs.getContext('2d');context.moveTo(50,50);知識儲(chǔ)備3.繪制線條（2）連線端點(diǎn)連線端點(diǎn)用于定義一個(gè)端點(diǎn)，并繪制一條從該端點(diǎn)到初始位置的連線?？梢允褂卯嫴贾械膌ineTo(x,y)方法設(shè)置連線端點(diǎn)。和初始位置類似，連線端點(diǎn)也需要定義x和y的坐標(biāo)位置。例如，將繪制圖形的連線端點(diǎn)設(shè)置為橫坐標(biāo)100px和縱坐標(biāo)100px，示例代碼如下。context.lineTo(100,100);知識儲(chǔ)備3.繪制線條（3）描邊通過初始位置和連線端點(diǎn)可以繪制一條線，但這條線并不能被看到。這時(shí)需要為線條添加描邊，讓線條變得可見。使用畫布中的stroke()方法可以實(shí)現(xiàn)線條的可視化。例如為線條描邊的示例代碼如下。context.stroke();知識儲(chǔ)備3.繪制線條下面演示如何繪制一條直線，會(huì)在頁面上顯示一條黑色的直線，繪制線條的效果如下圖所示。知識儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握線條樣式的設(shè)置方法，能夠靈活地設(shè)置線條的寬度、描邊顏色和端點(diǎn)形狀4.線條的樣式知識儲(chǔ)備4.線條的樣式在畫布中，線條的默認(rèn)顏色為黑色、寬度為1px，但可以使用相應(yīng)的屬性為線條添加不同的樣式。下面將從寬度、描邊顏色、端點(diǎn)形狀3方面詳細(xì)講解線條樣式的設(shè)置方法。知識儲(chǔ)備4.線條的樣式（1）寬度線條的寬度可以使用畫布中的lineWidth屬性進(jìn)行設(shè)置，該屬性值為一個(gè)不帶單位的數(shù)值，表示以px為單位的寬度。例如，設(shè)置線條的寬度為5px，示例代碼如下。context.lineWidth=5;知識儲(chǔ)備4.線條的樣式（2）描邊顏色線條的描邊顏色可以使用畫布中的strokeStyle屬性進(jìn)行設(shè)置，該屬性的取值為十六進(jìn)制顏色值或顏色的英文單詞。例如，使用十六進(jìn)制顏色值設(shè)置線條的描邊顏色為藍(lán)色，示例代碼如下。下面使用顏色的英文單詞設(shè)置線條的描邊顏色為藍(lán)色，示例代碼如下。兩種方式都可以實(shí)現(xiàn)將線條的描邊顏色設(shè)置為藍(lán)色。在使用時(shí)，根據(jù)需要選擇一種即可。context.strokeStyle='#00f';context.strokeStyle='blue';strokeStyle屬性必須寫在stroke()方法的前面，以確保所繪制的線條具有所需的描邊顏色。注意知識儲(chǔ)備4.線條的樣式（3）端點(diǎn)形狀線條的端點(diǎn)形狀可以使用畫布中的lineCap屬性進(jìn)行設(shè)置。使用lineCap屬性設(shè)置線條的端點(diǎn)形狀的語法格式如下。lineCap='屬性值';知識儲(chǔ)備4.線條的樣式lineCap屬性的取值有3個(gè)，具體如下表所示。屬性值顯示效果butt（默認(rèn)值）默認(rèn)效果，無端點(diǎn)，顯示直線方形邊緣round顯示圓形端點(diǎn)square顯示方形端點(diǎn)知識儲(chǔ)備4.線條的樣式屬性值對應(yīng)的顯示效果如下圖所示。從上到下依次有3條線。其中，第二條線和第三條線長度相同，不同之處在于：第二條線的端點(diǎn)為圓形，而第三條線的端點(diǎn)為方形。第一條線沒有端點(diǎn)，但是邊緣默認(rèn)為方形。第三條線有額外的端點(diǎn)，也是方形，所以第三條線比第一條線長。在設(shè)置lineCap屬性前，確保已經(jīng)設(shè)置了lineWidth屬性，否則可能會(huì)出現(xiàn)設(shè)置失敗的情況。注意知識儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握路徑重置與閉合的設(shè)置方法，能夠重置路徑和閉合路徑5.路徑知識儲(chǔ)備5.路徑在畫布中繪制的所有圖形都會(huì)形成路徑，通過初始位置和連線端點(diǎn)便會(huì)形成一條繪制路徑。路徑的狀態(tài)包括重置路徑和閉合路徑兩種。知識儲(chǔ)備5.路徑（1）重置路徑在同一畫布中，添加再多的連線端點(diǎn)也只能有一條路徑，如果想要開始新的路徑，就需要使用beginPath()方法。beginPath()方法可以使路徑重新開始，即重置路徑。下面演示如何繪制兩條不同顏色的線條。在頁面上繪制一條紅色線條和一條藍(lán)色線條，并且分別設(shè)置線條的末端樣式為圓形和方形。繪制兩條不同顏色線條的效果如下圖所示。知識儲(chǔ)備5.路徑（2）閉合路徑閉合路徑就是將繪制中的開放路徑進(jìn)行封閉處理，形成一個(gè)閉合的形狀。在畫布中，使用closePath()方法可以將路徑的起點(diǎn)和終點(diǎn)連接起來，從而確保路徑閉合。下面演示如何繪制直角三角形。在頁面上繪制一個(gè)空心的藍(lán)色直角三角形。繪制的空心直角三角形效果如下圖所示。closePath()方法應(yīng)該寫在stroke()方法的前面，即先閉合路徑再進(jìn)行描邊。注意知識儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握填充路徑的設(shè)置方法，能夠填充路徑6.填充路徑知識儲(chǔ)備6.填充路徑當(dāng)閉合路徑后，得到的是一個(gè)只有邊框的空心圖形，此時(shí)可以使用畫布中的fill()方法填充路徑。默認(rèn)填充路徑的顏色為黑色，可以使用fillStyle屬性來更改填充顏色。fillStyle屬性的取值可以為十六進(jìn)制顏色值或顏色的英文單詞。例如，使用十六進(jìn)制顏色值設(shè)置路徑的填充顏色為藍(lán)色，示例代碼如下。使用顏色的英文單詞設(shè)置路徑的填充顏色為藍(lán)色，示例代碼如下。以上兩種方式都可以實(shí)現(xiàn)將路徑的填充顏色設(shè)置為藍(lán)色。在使用時(shí)，根據(jù)需要選擇一種即可。context.fillStyle='#00f';context.fillStyle='blue';fillStyle屬性必須寫在fill()方法的前面，以確保所繪制的圖形具有所需的填充顏色。注意知識儲(chǔ)備6.填充路徑下面演示如何繪制實(shí)心的直角三角形。繪制的實(shí)心直角三角形效果如下圖所示。知識儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握文本的繪制方法，能夠根據(jù)實(shí)際需求完成文本的繪制7.繪制文本知識儲(chǔ)備7.繪制文本在畫布中，使用fillText()方法可以繪制文本，fillText()方法的語法格式如下。各參數(shù)使用“,”分隔，對各參數(shù)的解釋如下。①文本：表示要繪制的文本內(nèi)容。②x：表示文本的起始橫坐標(biāo)。③y：表示文本的起始縱坐標(biāo)。④文本的最大寬度：可選，用于指定文本的最大寬度。當(dāng)文本的寬度超出指定的最大寬度時(shí)，文本會(huì)自動(dòng)換行。如果不指定該參數(shù)，則文本不會(huì)換行。fillText(文本,x,y,文本的最大寬度);知識儲(chǔ)備7.繪制文本若要在繪制文本時(shí)修改字體樣式，可以使用font屬性，該屬性的使用方法與CSSfont屬性相同。若要設(shè)置文本的對齊方式，可以使用textAlign屬性和textBaseline屬性，下面講解這兩個(gè)屬性的用法。①textAlign屬性用于設(shè)置文本的水平對齊方式，常見的取值包括left、center和right，分別表示文本左對齊、文本水平居中對齊和文本右對齊。②textBaseline屬性用于設(shè)置文本的垂直對齊方式，常見的取值包括top、middle和bottom，分別表示文本頂部對齊、文本垂直居中對齊和文本底部對齊。知識儲(chǔ)備7.繪制文本例如，設(shè)置文本水平且垂直居中對齊，示例代碼如下。下面通過案例演示如何繪制“一寸光陰一寸金，寸金難買寸光陰。”文本，繪制的文本效果如下圖所示。context.textAlign='center';context.textBaseline='middle';知識儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握圓或弧線的繪制方法，能夠繪制圓或弧線8.繪制圓或弧線知識儲(chǔ)備8.繪制圓或弧線在畫布中，使用arc()方法可以繪制圓或弧線，arc()方法的語法格式如下。對各參數(shù)的解釋如下。①x和y：表示圓心在x軸和y軸的坐標(biāo)位置，取值為數(shù)字，用于確定圖或弧線的位置。②r：表示圓或弧形的半徑，用于確定圖形的大小。③開始角：表示初始弧的位置，通常使用弧度來表示。弧度通過數(shù)值和Math.PI（圓周率）的乘積來表示。1*Math.PI等于180°，1.5*Math.PI等于270°。④結(jié)束角：表示結(jié)束弧的位置，和開始角的設(shè)置方式一致。⑤方向：表示繪制方向，分為順時(shí)針方向和逆時(shí)針方向，當(dāng)取值為false時(shí)表示順時(shí)針方向，當(dāng)取值為true時(shí)表示逆時(shí)針方向。默認(rèn)值為false。arc(x,y,r,開始角,結(jié)束角,方向);知識儲(chǔ)備8.繪制圓或弧線開始角為0°和結(jié)束角為270°的弧的位置如下圖所示。項(xiàng)目實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握水果銷量餅圖頁面的制作方法，能夠完成水果銷量餅圖頁面的開發(fā)項(xiàng)目實(shí)現(xiàn)鮮花列表頁面項(xiàng)目6-2項(xiàng)目需求小麗經(jīng)營著一家花店，她對花束設(shè)計(jì)充滿熱情，并常常根據(jù)不同場合和顧客需求精心設(shè)計(jì)花束。為了提高銷量，她計(jì)劃開設(shè)一個(gè)線上鮮花店鋪，將自已設(shè)計(jì)的花束拍照并展示在鮮花列表中，以便顧客能夠方便、快速地瀏覽和購買心儀的鮮花。項(xiàng)目需求制作鮮花列表頁面動(dòng)畫效果的具體要求如下。①鮮花列表布局：鮮花列表以水平排列的方式呈現(xiàn)，每行顯示4個(gè)列表項(xiàng)。②列表項(xiàng)內(nèi)容：每個(gè)列表項(xiàng)包括一個(gè)花束的圖像、標(biāo)題、價(jià)格以及一個(gè)提示信息“去訂購>”。在默認(rèn)情況下，提示信息的透明度為0，鼠標(biāo)指針懸停效果未激活。③鼠標(biāo)指針懸停效果：當(dāng)鼠標(biāo)指針懸停在列表項(xiàng)上時(shí)，圖像會(huì)平滑放大到1.1倍，標(biāo)題和價(jià)格的文本顏色變?yōu)槌燃t色，提示信息的透明度變?yōu)?，并從底部上移50px。④動(dòng)畫過渡效果：鼠標(biāo)指針懸停效果的觸發(fā)和恢復(fù)都應(yīng)該有平滑的動(dòng)畫過渡效果，確保視覺效果的連貫性和流暢性。項(xiàng)目需求本項(xiàng)目需要基于上述要求實(shí)現(xiàn)鮮花列表頁面的開發(fā)，鼠標(biāo)指針懸停在列表項(xiàng)上時(shí)的鮮花列表頁面效果如下圖所示。知識儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握過渡屬性的使用方法，能夠?qū)崿F(xiàn)元素在不同狀態(tài)下平滑的樣式變換1.過渡屬性知識儲(chǔ)備1.過渡屬性CSS3新增了過渡屬性，運(yùn)用過渡屬性可以在不使用JavaScript的情況下，演示元素的樣式變換過程。例如，逐漸顯示、逐漸隱藏等。CSS3的過渡屬性包括：transition-property屬性transition-duration屬性transition-timing-function屬性transition-delay屬性transition屬性知識儲(chǔ)備1.過渡屬性（1）transition-property屬性transition-property屬性用于指定要過渡的CSS屬性，例如width屬性、background屬性、opacity屬性?？梢酝瑫r(shí)過渡多個(gè)屬性，多個(gè)屬性之間使用“,”分隔。transition-property屬性的語法格式如下。transition-property:none|all|property;知識儲(chǔ)備1.過渡屬性transition-property屬性的取值有3種類型，具體如下。none：表示沒有屬性會(huì)應(yīng)用過渡效果。all：表示所有屬性都會(huì)應(yīng)用過渡效果。property：表示只有指定的CSS屬性會(huì)應(yīng)用過渡效果，可以指定多個(gè)屬性，多個(gè)屬性之間用“,”分隔。例如，設(shè)置元素要過渡的屬性為background-color，示例代碼如下。transition-property:background-color;知識儲(chǔ)備1.過渡屬性（2）transition-duration屬性transition-duration屬性用于指定過渡效果持續(xù)的時(shí)長（過渡時(shí)長），其語法格式如下。transition-duration屬性的默認(rèn)值為0，time表示時(shí)間，以秒（s）或者毫秒（ms）為單位。例如，設(shè)置元素的過渡時(shí)長為0.5s，示例代碼如下。transition-duration:time;transition-duration:0.5s;知識儲(chǔ)備1.過渡屬性（3）transition-timing-function屬性transition-timing-function屬性用于指定過渡效果的速度曲線，即動(dòng)畫如何在過渡期間變化，其語法格式如下。transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);知識儲(chǔ)備1.過渡屬性transition-timing-function屬性的取值有很多，默認(rèn)值為ease，常用屬性值如下表所示。屬性值描述linear指定以相同速度開始至結(jié)束的過渡效果ease指定以慢速開始、然后加快、最后慢速結(jié)束的過渡效果ease-in指定以慢速開始然后逐漸加快的過渡效果ease-out指定以快速開始然后逐漸減慢的動(dòng)畫效果ease-in-out指定以慢速開始和結(jié)束的過渡效果cubic-bezier(n,n,n,n)定義用于加速或者減速的貝塞爾曲線的形狀，n的值在0~1之間知識儲(chǔ)備1.過渡屬性最后一個(gè)屬性值cubic-bezier(n,n,n,n)表示貝塞爾曲線的形狀，使用貝塞爾曲線可以精確控制速度的變化。例如，設(shè)置元素的過渡效果以慢速開始和結(jié)束，示例代碼如下。transition-timing-function:ease-in-out;知識儲(chǔ)備1.過渡屬性（4）transition-delay屬性transition-delay屬性用于指定過渡效果開始前的延遲時(shí)間，其語法格式如下。transition-delay屬性的默認(rèn)值為0，表示過渡效果會(huì)立即執(zhí)行，不會(huì)延遲。參數(shù)time用于定義過渡效果開始前的延遲時(shí)間，以s或者ms為單位。transition-delay:time;知識儲(chǔ)備1.過渡屬性例如，設(shè)置元素的過渡效果在2s后觸發(fā)，示例代碼如下。transition-delay:2s;transition-delay的屬性值可以為正數(shù)、負(fù)數(shù)或0。如果屬性值為正數(shù)，表示過渡效果會(huì)在定義的時(shí)間之后開始執(zhí)行。如果屬性值為負(fù)數(shù)，表示過渡效果會(huì)在定義的時(shí)間之前開始執(zhí)行，過渡的起點(diǎn)狀態(tài)會(huì)提前，具體提前的時(shí)間為負(fù)值的絕對值。如果屬性值為0，表示過渡效果會(huì)在元素屬性值發(fā)生變化后立即執(zhí)行，沒有延遲效果。知識儲(chǔ)備1.過渡屬性（5）transition屬性transition屬性是一個(gè)復(fù)合屬性，用于同時(shí)設(shè)置transition-property屬性、transition-duration屬性、transition-timing-function屬性和transition-delay屬性這4個(gè)過渡屬性。transition屬性的語法格式如下。在使用transition屬性設(shè)置多個(gè)過渡效果時(shí)，它的各個(gè)參數(shù)必須按照先后順序進(jìn)行定義，不能顛倒。transition:transition-propertytransition-durationtransition-timing-functiontransition-delay;知識儲(chǔ)備1.過渡屬性例如，為元素的width屬性添加過渡效果，過渡時(shí)長為3s，過渡效果以慢速開始，然后逐漸加快。同時(shí)，過渡效果會(huì)延遲2s后觸發(fā)，示例代碼如下。上述示例代碼可以直接使用transition屬性實(shí)現(xiàn)，示例代碼如下。transition-property:width;transition-duration:3s;transition-timing-function:ease-in;transition-delay:2s;transition:width3sease-in2s;知識儲(chǔ)備1.過渡屬性在CSS3中，transition屬性不僅可以應(yīng)用于單個(gè)屬性的過渡效果，還可以應(yīng)用于多個(gè)屬性的過渡效果，實(shí)現(xiàn)更加豐富和復(fù)雜的動(dòng)畫效果。通過transition屬性設(shè)置元素多個(gè)屬性的過渡效果時(shí)，可以為每個(gè)屬性指定獨(dú)立的過渡時(shí)長、過渡效果的速度曲線、開始前的延遲時(shí)間等。多個(gè)屬性之間用逗號“,”進(jìn)行分隔。例如，為元素設(shè)置width和height屬性的過渡效果，示例代碼如下。transition:width1sease-in-out,height1sease-in-out0.5s;知識儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握二維變形，能夠?qū)崿F(xiàn)元素的平移、縮放、傾斜和旋轉(zhuǎn)等效果2.二維變形知識儲(chǔ)備2.二維變形在CSS3中，可以使用transform屬性對元素進(jìn)行二維變形。二維變形可以通過translate()、scale()、skew()和rotate()等函數(shù)控制元素在x軸和y軸的平移、縮放、傾斜和旋轉(zhuǎn)等效果；還可以通過更改變形對象的中心點(diǎn)來實(shí)現(xiàn)不同的變形效果。知識儲(chǔ)備2.二維變形（1）平移平移是指元素位置的變化，包括水平移動(dòng)和垂直移動(dòng)。在CSS3中，使用translate()函數(shù)可以實(shí)現(xiàn)元素的平移效果，translate()函數(shù)的語法格式如下。參數(shù)x-value和y-value分別用于定義水平（x軸）和垂直（y軸）方向上的移動(dòng)量。參數(shù)值可以是像素值或百分比。x-value取正值表示向右平移，取負(fù)值表示向左平移。y-value取正值表示向下平移，取負(fù)值表示向上平移。如果只需要在一個(gè)方向上移動(dòng)元素，另一個(gè)參數(shù)不能省略，可設(shè)置為0，表示在該方向上沒有發(fā)生平移。transform:translate(x-value,y-value);知識儲(chǔ)備2.二維變形在使用translate()函數(shù)移動(dòng)元素時(shí)，默認(rèn)的坐標(biāo)位置為元素中心點(diǎn)，然后根據(jù)指定的參數(shù)值進(jìn)行移動(dòng)。例如，將一個(gè)元素向右平移100px，向下平移50px，示例代碼如下。使用translate()函數(shù)實(shí)現(xiàn)平移如下圖所示。實(shí)線表示平移前的元素，虛線表示平移后的元素。transform:translate(100px,50px);知識儲(chǔ)備2.二維變形（2）縮放在CSS3中，使用scale()函數(shù)可以實(shí)現(xiàn)元素縮放效果。scale()函數(shù)的語法格式如下。參數(shù)x-value和y-value分別用于定義水平（x軸）和垂直（y軸）方向上的縮放倍數(shù)。參數(shù)值大于1表示放大元素。參數(shù)值小于1表示縮小元素。參數(shù)值等于1表示保持原樣。如果省略第2個(gè)參數(shù)，則第2個(gè)參數(shù)值默認(rèn)等于第1個(gè)參數(shù)值。transform:scale(x-value,y-value);知識儲(chǔ)備2.二維變形例如，將元素在水平方向上放大1.5倍，在垂直方向上放大1.5倍，示例代碼如下。使用scale()函數(shù)實(shí)現(xiàn)縮放如下圖所示。實(shí)線表示放大前的元素，虛線表示放大后的元素。transform:scale(1.5,1.5);知識儲(chǔ)備2.二維變形（3）傾斜在CSS3中，使用skew()函數(shù)可以實(shí)現(xiàn)元素傾斜效果。skew()函數(shù)的語法格式如下。參數(shù)x-value和y-value分別表示元素在水平和垂直方向上的傾斜角度，以deg為單位。x-value取正值表示向右傾斜，取負(fù)值表示向左傾斜。y-value取正值表示向下傾斜，取負(fù)值表示向上傾斜。transform:skew(x-value,y-value);知識儲(chǔ)備2.二維變形例如，將元素在水平方向上向右傾斜30°，向下傾斜10°，示例代碼如下。使用skew()函數(shù)實(shí)現(xiàn)傾斜如下圖所示。實(shí)線表示傾斜前的元素，虛線表示傾斜后的元素。transform:skew(30deg,10deg);知識儲(chǔ)備2.二維變形（4）旋轉(zhuǎn)在CSS3中，使用rotate()函數(shù)可以實(shí)現(xiàn)元素的旋轉(zhuǎn)效果。rotate()函數(shù)的語法格式如下。參數(shù)angle表示要旋轉(zhuǎn)的角度，單位為deg。如果角度為正數(shù)，則按照順時(shí)針方向進(jìn)行旋轉(zhuǎn)，否則按照逆時(shí)針方向旋轉(zhuǎn)。transform:rotate(angle);知識儲(chǔ)備2.二維變形例如，將元素旋轉(zhuǎn)45度，示例代碼如下。使用rotate()函數(shù)實(shí)現(xiàn)旋轉(zhuǎn)如下圖所示。實(shí)線表示旋轉(zhuǎn)前的元素，虛線表示旋轉(zhuǎn)后的元素。transform:rotate(45deg);知識儲(chǔ)備2.二維變形（5）更改變形對象的中心點(diǎn)通過transform屬性可以實(shí)現(xiàn)元素的平移、縮放、傾斜和旋轉(zhuǎn)效果，這些變形操作都以元素的中心點(diǎn)為參照。默認(rèn)情況下，元素的中心點(diǎn)在x軸和y軸50%的位置。如果需要改變這個(gè)中心點(diǎn)，可以使用transform-origin屬性，其語法格式如下。transform-origin屬性包含3個(gè)參數(shù)，其默認(rèn)值分別為50%、50%、0px。參數(shù)x-axis和參數(shù)y-axis表示水平和垂直方向上的坐標(biāo)位置，用于二維變形。參數(shù)z-axis表示空間縱深坐標(biāo)位置，用于三維變形。transform-origin:x-axisy-axisz-axis;知識儲(chǔ)備2.二維變形transform-origin屬性的參數(shù)說明如下表所示。參數(shù)描述x-axis元素被置于x軸的位置。屬性值可以是以em、px等為單位的具體數(shù)值或百分比，也可以是top、right、bottom、left和center這樣的關(guān)鍵詞y-axis元素被置于y軸的位置。屬性值可以是以em、px等為單位的具體數(shù)值或百分比，也可以是top、right、bottom、left和center這樣的關(guān)鍵詞z-axis元素被置于z軸的位置。屬性值和x-axis、y-axis類似，但屬性值不能是一個(gè)百分比，否則將會(huì)被視為無效值，通常設(shè)置以px為單位的數(shù)值知識儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握三維變形，能夠?qū)崿F(xiàn)三維變形效果3.三維變形知識儲(chǔ)備3.三維變形二維變形是元素在x軸和y軸的變化，而三維變形是元素圍繞x軸、y軸和z軸的變化，主要包括平移、縮放、旋轉(zhuǎn)和透視等操作。相比平面化的二維變形，三維變形更注重空間位置的變化。下面將對常見的轉(zhuǎn)換函數(shù)和轉(zhuǎn)換屬性進(jìn)行講解。知識儲(chǔ)備3.三維變形（1）rotateX()在CSS3中，使用rotateX()函數(shù)可以讓指定元素圍繞x軸旋轉(zhuǎn)。rotateX()函數(shù)的語法格式如下。參數(shù)a用于定義旋轉(zhuǎn)的角度，單位為deg，取值可以是正數(shù)也可以是負(fù)數(shù)。如果值為正數(shù)，元素圍繞x軸順時(shí)針旋轉(zhuǎn)。如果值為負(fù)數(shù)，元素圍繞x軸逆時(shí)針旋轉(zhuǎn)。transform:rotateX(a);知識儲(chǔ)備3.三維變形（2）rotateY()在CSS3中，使用rotateY()函數(shù)可以讓指定元素圍繞y軸旋轉(zhuǎn)。rotateY()函數(shù)的語法格式如下。參數(shù)a與rotateX(a)中的a含義相同，用于定義旋轉(zhuǎn)的角度。如果值為正數(shù)，元素圍繞y軸順時(shí)針旋轉(zhuǎn)。如果值為負(fù)數(shù)，元素圍繞y軸逆時(shí)針旋轉(zhuǎn)。transform:rotateY(a);知識儲(chǔ)備3.三維變形（3）rotateZ()在CSS3中，使用rotateZ()函數(shù)可以讓指定元素圍繞z軸旋轉(zhuǎn)。與rotateX()函數(shù)和rotateY()函數(shù)類似，rotateZ()函數(shù)也可以用角度值作為參數(shù)來指定旋轉(zhuǎn)的角度。rotateZ()函數(shù)的語法格式如下。transform:rotateZ(a);如果僅從視覺角度上看，rotateZ()函數(shù)讓元素順時(shí)針或逆時(shí)針旋轉(zhuǎn)，與rotate()函數(shù)的效果等同；但rotateZ()函數(shù)讓元素不在二維平面上旋轉(zhuǎn)，而是圍繞z軸旋轉(zhuǎn)的。注意知識儲(chǔ)備3.三維變形（4）rotate3d()rotated3d()函數(shù)是通過rotateX()函數(shù)、rotateY()函數(shù)和rotateZ()函數(shù)綜合演變而來的，用于設(shè)置多個(gè)軸的旋轉(zhuǎn)角度。例如，要同時(shí)設(shè)置x軸、y軸和z軸的旋轉(zhuǎn)，就可以使用rotated3d()函數(shù)。rotated3d()函數(shù)的語法格式如下。x、y、z可以取值0或1，當(dāng)要沿著某一軸轉(zhuǎn)動(dòng)時(shí)，就將該軸的值設(shè)置為1，否則設(shè)置為0。angle為要旋轉(zhuǎn)的角度。rotate3d(x,y,z,angle);知識儲(chǔ)備3.三維變形例如，設(shè)置元素在x軸和y軸上均旋轉(zhuǎn)45°，示例代碼如下。rotate3d(1,1,0,45deg);知識儲(chǔ)備3.三維變形除了rotateX()函數(shù)、rotateY()函數(shù)、rotateZ()函數(shù)和rotated3d()函數(shù)以外，CSS3還提供了其他常見的轉(zhuǎn)換函數(shù)，如下表所示。函數(shù)名稱描述translate3d(x,y,z)設(shè)置沿x軸、y軸、z軸的位移translateX(x)設(shè)置沿x軸的位移translateY(y)設(shè)置沿y軸的位移translateZ(z)設(shè)置沿z軸的位移scale3d(x,y,z)設(shè)置沿x軸、y軸、z軸的縮放scaleX(x)設(shè)置沿x軸的縮放scaleY(y)設(shè)置沿y軸的縮放scaleZ(z)設(shè)置沿z軸的縮放知識儲(chǔ)備3.三維變形參數(shù)x、y、z的含義如下。x：表示沿x軸方向移動(dòng)的距離或沿x軸方向縮放的比例。y：表示沿y軸方向移動(dòng)的距離或沿y軸方向縮放的比例。z：表示沿z軸方向移動(dòng)的距離或沿z軸方向縮放的比例。知識儲(chǔ)備3.三維變形（5）perspective屬性perspective屬性對于三維變形來說至關(guān)重要，該屬性主要用于呈現(xiàn)良好的透視效果。perspective屬性可以簡單地理解為視距，通過設(shè)置perspective屬性，可以控制觀察點(diǎn)與元素之間的距離，從而影響元素在三維空間的呈現(xiàn)方式。知識儲(chǔ)備3.三維變形perspective屬性的透視效果由其屬性值來決定。屬性值越小，表示觀察點(diǎn)與元素之間的距離越小，透視效果越明顯。屬性值越大，透視效果越弱。perspective屬性通常使用單位為px的數(shù)值，也可以使用百分比或其他單位的數(shù)值。如果屬性值為none，則表示沒有透視效果。知識儲(chǔ)備3.三維變形除了perspective屬性以外，CSS3中還提供了其他常見的轉(zhuǎn)換屬性，如下表所示。屬性名稱描述屬性值transform-style規(guī)定子元素如何在三維空間中呈現(xiàn)flat：表示子元素將不保留其三維轉(zhuǎn)換效果，而是被平面化，類似于在二維平面上呈現(xiàn)preserve-3d：表示子元素在三維空間中將保留其三維轉(zhuǎn)換效果，在三維空間中呈現(xiàn)backface-visibility定義元素的反面（或背面）是否可見visible：表示元素的反面是可見的hidden：表示元素的反面是不可見的項(xiàng)目實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握鮮花列表頁面的制作方法，能夠完成鮮花列表頁面的開發(fā)項(xiàng)目實(shí)現(xiàn)課程宣傳頁面項(xiàng)目6-3項(xiàng)目需求隨著前端技術(shù)的發(fā)展，Vue2.0和Vue3.0成為當(dāng)今市場上較熱門的前端技術(shù)。為了滿足市場對Vue2.0和Vue3.0技術(shù)人員的需求，某教育機(jī)構(gòu)開設(shè)了一門“Vue2.0+Vue3.0企業(yè)項(xiàng)目實(shí)戰(zhàn)課”。該課程旨在向?qū)W員傳授如何在實(shí)際企業(yè)項(xiàng)目中靈活應(yīng)用Vue2.0和Vue3.0技術(shù)的知識和技巧。項(xiàng)目需求為了推廣這門課程，該教育機(jī)構(gòu)計(jì)劃設(shè)計(jì)一個(gè)吸引眼球的課程宣傳頁面，其中包含云朵、熱氣球、課程特色、火焰、課程名稱等元素，并計(jì)劃運(yùn)用CSS3的動(dòng)畫屬性為它們添加動(dòng)畫效果，具體要求如下。①云朵元素：在頁面上添加3個(gè)云朵圖像，并為每個(gè)圖像設(shè)置動(dòng)畫效果，實(shí)現(xiàn)向右移動(dòng)40px。動(dòng)畫持續(xù)時(shí)長分別為2s、2.5s和3s，采用勻速方式進(jìn)行無限循環(huán)播放，并在偶數(shù)次播放時(shí)逆向播放動(dòng)畫。②熱氣球元素：在頁面上添加1個(gè)熱氣球圖像，并為其設(shè)置動(dòng)畫效果，實(shí)現(xiàn)向上移動(dòng)30px。動(dòng)畫持續(xù)時(shí)長為1.5s，采用勻速方式進(jìn)行無限循環(huán)播放，并在偶數(shù)次播放時(shí)逆向播放動(dòng)畫。③課程特色元素：在頁面上添加4個(gè)課程特色圖像，并為每個(gè)圖像設(shè)置動(dòng)畫效果，實(shí)現(xiàn)向上移動(dòng)30px。動(dòng)畫持續(xù)時(shí)長均為0.8s，動(dòng)畫延遲執(zhí)行的時(shí)間分別為0s、0.2s、0.4s和0.6s，采用勻速方式進(jìn)行無限循環(huán)播放，并在偶數(shù)次播放時(shí)逆向播放動(dòng)畫。項(xiàng)目需求④火焰元素：在頁面上添加1個(gè)火焰圖像，并為其設(shè)置縮放的動(dòng)畫效果。動(dòng)畫持續(xù)時(shí)長為1s，采用從慢到快再到慢的方式進(jìn)行無限循環(huán)播放。當(dāng)動(dòng)畫開始時(shí)，保持元素原始大小。在動(dòng)畫進(jìn)行到25%時(shí)，元素縮放為不可見狀態(tài)。在動(dòng)畫進(jìn)行到50%時(shí)，元素放大為原始大小的1.5倍。在動(dòng)畫進(jìn)行到75%時(shí)，元素縮小到原始大小的0.8倍。動(dòng)畫結(jié)束時(shí)，將元素恢復(fù)到原始大小。⑤課程名稱元素：在頁面上添加1個(gè)課程名稱圖像，并為其設(shè)置縮放的動(dòng)畫效果。其動(dòng)畫效果與火焰元素的動(dòng)畫效果相同。項(xiàng)目需求本項(xiàng)目需要基于上述要求實(shí)現(xiàn)課程宣傳頁面的開發(fā)。課程宣傳頁面動(dòng)畫效果如下圖所示。知識儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握動(dòng)畫屬性的使用方法，能夠?qū)崿F(xiàn)豐富的動(dòng)畫效果動(dòng)畫屬性知識儲(chǔ)備前面學(xué)習(xí)的過渡和變形只能設(shè)置元素的變換過程，并不能對變換過程中的某一個(gè)環(huán)節(jié)進(jìn)行精確控制。例如，過渡和變形實(shí)現(xiàn)的動(dòng)態(tài)效果不能實(shí)現(xiàn)某一個(gè)時(shí)間點(diǎn)的動(dòng)畫效果。為了實(shí)現(xiàn)更加豐富的動(dòng)畫效果，CSS3提供了動(dòng)畫屬性。使用動(dòng)畫屬性可以定義具有一系列關(guān)鍵幀的動(dòng)畫，每個(gè)關(guān)鍵幀可以設(shè)定動(dòng)畫在某一時(shí)間節(jié)點(diǎn)的樣式。動(dòng)畫屬性知識儲(chǔ)備CSS中的動(dòng)畫屬性如下。animation-name屬性animation-duration屬性animation-timing-function屬性animation-delay屬性animation-iteration-count屬性animation-direction屬性animation屬性由于animation屬性只有配合@keyframes規(guī)則才能實(shí)現(xiàn)動(dòng)畫效果，因此在學(xué)習(xí)animation屬性之前，要首先學(xué)習(xí)@keyframes規(guī)則。動(dòng)畫屬性知識儲(chǔ)備（1）@keyframes規(guī)則@keyframes規(guī)則用于創(chuàng)建動(dòng)畫。@keyframes規(guī)則的語法格式如下。動(dòng)畫屬性@keyframesanimation-name{keyframes-selector{css-styles;}}知識儲(chǔ)備@keyframes規(guī)則包含的參數(shù)的具體含義如下。①animation-name：表示當(dāng)前動(dòng)畫的名稱，需要和animation-name屬性定義的名稱保持一致，它將作為引用時(shí)的唯一標(biāo)識，因此不能為空。②keyframes-selector：關(guān)鍵幀選擇器，即指定當(dāng)前關(guān)鍵幀要應(yīng)用到整個(gè)動(dòng)畫過程中的位置，值可以是一個(gè)百分比、from或者to。from和0%效果相同，表示動(dòng)畫的開始。to和100%效果相同，表示動(dòng)畫的結(jié)束。當(dāng)兩個(gè)位置應(yīng)用同一個(gè)效果時(shí)，這兩個(gè)位置使用“,”隔開，寫在一起即可，如20%,80%{opacity:1}，表示在動(dòng)畫的進(jìn)度為20%和80%時(shí)，元素的不透明度為1。動(dòng)畫屬性③css-styles：定義執(zhí)行到當(dāng)前關(guān)鍵幀時(shí)對應(yīng)的動(dòng)畫狀態(tài)，由CSS樣式屬性進(jìn)行定義，多個(gè)屬性之間用“;”分隔，不能為空，如20%,80%{opacity:1;width:100px;}，表示在動(dòng)畫的進(jìn)度為20%和80%時(shí)，元素的不透明度為1，并且其寬度為100px。知識儲(chǔ)備上述動(dòng)畫效果還可以使用等效代碼來實(shí)現(xiàn)，示例代碼如下。動(dòng)畫屬性@keyframesslideUp{from{opacity:0;} /*動(dòng)畫開始時(shí)的狀態(tài)，完全透明*/to{opacity:1;} /*動(dòng)畫結(jié)束時(shí)的狀態(tài)，完全不透明*/}例如，使用@keyframes規(guī)則定義一個(gè)淡入動(dòng)畫，示例代碼如下。@keyframesslideUp{0%{opacity:0;} /*動(dòng)畫開始時(shí)的狀態(tài)，完全透明*/100%{opacity:1;} /*動(dòng)畫結(jié)束時(shí)的狀態(tài)，完全不透明*/}知識儲(chǔ)備又如，使用@keyframes規(guī)則定義一個(gè)淡入淡出動(dòng)畫，示例代碼如下。為了實(shí)現(xiàn)淡入淡出的效果，需要定義動(dòng)畫開始和結(jié)束時(shí)元素不可見，然后漸漸淡出，在動(dòng)畫的20%處變得可見，然后動(dòng)畫進(jìn)行到80%處時(shí)，再慢慢淡出。動(dòng)畫屬性@keyframesappear{from,to{opacity:0;} /*動(dòng)畫開始和結(jié)束時(shí)的狀態(tài)，完全透明*/20%,80%{opacity:1;} /*動(dòng)畫的中間狀態(tài)，完全不透明*/}知識儲(chǔ)備（2）animation-name屬性animation-name屬性用于指定要應(yīng)用的動(dòng)畫名稱，該動(dòng)畫名稱會(huì)被@keyframes規(guī)則引用，其語法格式如下。animation-name屬性的初始值為none，適用于所有塊元素和行內(nèi)元素。keyframe-name參數(shù)用于規(guī)定需要綁定到@keyframes規(guī)則的動(dòng)畫名稱，如果值為none，則表示元素不應(yīng)用于任何動(dòng)畫。動(dòng)畫屬性animation-name:keyframe-name|none;知識儲(chǔ)備（3）animation-duration屬性animation-duration屬性用于指定整個(gè)動(dòng)畫效果持續(xù)的時(shí)長。animation-duration屬性的語法格式如下。animation-duration屬性的初始值為0。time參數(shù)是以s或者ms為單位的時(shí)間。當(dāng)設(shè)置為0時(shí)，表示沒有任何動(dòng)畫效果。當(dāng)取值為負(fù)數(shù)時(shí)，會(huì)被視為0。動(dòng)畫屬性animation-duration:time;知識儲(chǔ)備（4）animation-timing-function屬性animation-timing-function屬性用于指定動(dòng)畫的速度曲線，即動(dòng)畫在過渡期間如何變化。animation-timing-function屬性的語法格式如下。動(dòng)畫屬性animation-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);知識儲(chǔ)備animation-timing-function屬性的取值有很多種，默認(rèn)值為ease，常用屬性值如下表所示。動(dòng)畫屬性屬性值描述linear指定以相同速度開始至結(jié)束的動(dòng)畫效果ease指定以慢速開始、然后加快、最后慢速結(jié)束的動(dòng)畫效果ease-in指定以慢速開始然后逐漸加快的動(dòng)畫效果ease-out指定以快速開始然后逐漸減慢的動(dòng)畫效果ease-in-out指定以慢速開始和結(jié)束的動(dòng)畫效果cubic-bezier(n,n,n,n)定義用于加速或者減速的貝塞爾曲線的形狀，n值在0~1之間例如，設(shè)置添加動(dòng)畫的元素以快速開始然后逐漸減慢的示例代碼如下。animation-timing-function:ease