第6章Canvas繪圖與CSS動畫《響應式Web開發項目教程（HTML5+CSS3+Bootstrap）（第3版）》學習目標/Target了解什么是畫布，能夠說出網頁中畫布的作用掌握畫布的使用方法，能夠創建畫布、獲取畫布以及準備畫筆掌握線條的繪制方法，能夠根據實際需求完成線條的繪制

掌握線條樣式的設置方法，能夠靈活地設置線條的寬度、描邊顏色和端點形狀掌握路徑重置與閉合的設置方法，能夠重置路徑和閉合路徑學習目標/Target掌握填充路徑的設置方法，能夠填充路徑掌握文本的繪制方法，能夠根據實際需求完成文本的繪制掌握圓或弧線的繪制方法，能夠繪制圓或弧線

掌握過渡屬性的使用方法，能夠實現元素在不同狀態下平滑的樣式變換掌握變形的方法，能夠實現元素的平移、縮放、傾斜和旋轉等效果學習目標/Target掌握動畫屬性的使用方法，能夠實現豐富的動畫效果掌握水果銷量餅圖頁面的制作方法，能夠完成水果銷量餅圖頁面的開發掌握鮮花列表頁面的制作方法，能夠完成鮮花列表頁面的開發

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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