Web前端開發(fā)任務(wù)式教程（HTML5+CSS3）（微課版） 課件模塊8 元素過渡與動畫

《Web開發(fā)任務(wù)式教程》

模塊8元素過渡與動畫《Web前端開發(fā)任務(wù)式教程》元素過渡與動畫轉(zhuǎn)換與動畫能夠設(shè)置特殊的網(wǎng)頁效果，如元素造型、動畫等，本模塊介紹轉(zhuǎn)換、過渡與動畫屬性，包括基本語法和典型應(yīng)用。任務(wù)8.1掌握轉(zhuǎn)換與過渡的語法任務(wù)8.2設(shè)計過渡效果任務(wù)8.3設(shè)計輪播圖的動畫元素過渡與動畫學(xué)習(xí)目標(biāo)【知識目標(biāo)】1）掌握轉(zhuǎn)換、過渡、動畫屬性的基本語法。2）掌握過渡設(shè)計動畫的方法，以及過渡動畫的應(yīng)用場景。3）掌握關(guān)鍵幀設(shè)計動畫的方法，以及關(guān)鍵幀動畫的應(yīng)用場景?！灸芰δ繕?biāo)】1）能夠使用動畫設(shè)計網(wǎng)頁歡迎效果。2）能夠使用過渡設(shè)計幽靈按鈕。3）能夠使用關(guān)鍵幀設(shè)計輪播動畫。《Web前端開發(fā)任務(wù)式教程》轉(zhuǎn)換與過渡是CSS3的屬性，能夠設(shè)計一些特殊的網(wǎng)頁效果，改善用戶的交互式體驗。本任務(wù)介紹轉(zhuǎn)換與過渡屬性的基本語法與用法，通過本任務(wù)的學(xué)習(xí)，應(yīng)全面掌握轉(zhuǎn)換與過渡屬性的語法、用法及特點(diǎn)，并能基于轉(zhuǎn)換與過渡屬性設(shè)計元素造型和網(wǎng)頁簡單動畫。元素過渡與動畫任務(wù)8.1掌握轉(zhuǎn)換與過渡的語法《Web前端開發(fā)任務(wù)式教程》元素過渡與動畫8.1.1瀏覽器前綴轉(zhuǎn)換、過渡、動畫都是CSS3屬性，早期版本瀏覽器對CSS3屬性的支持程度不同，需要帶瀏覽器前綴值才能支持，表8-1列出了瀏覽器與前綴值的對應(yīng)關(guān)系。表8-1瀏覽器與前綴值的對應(yīng)關(guān)系《Web前端開發(fā)任務(wù)式教程》前綴值瀏覽器-ms-IE瀏覽器-moz-Firefox瀏覽器-o-Opera瀏覽器-webkit-Chrome和Safari瀏覽器元素過渡與動畫8.1.2轉(zhuǎn)換屬性1.transform屬性transform屬性定義元素的移動、縮放、旋轉(zhuǎn)和傾斜，屬性取值為轉(zhuǎn)換函數(shù)?？梢允嵌S（2D）或三維（3D）轉(zhuǎn)換函數(shù)，二維轉(zhuǎn)換函數(shù)如表8-2所示，三維轉(zhuǎn)換函數(shù)如表8-3所示。表8-2二維轉(zhuǎn)換函數(shù)《Web前端開發(fā)任務(wù)式教程》函數(shù)名說明matrix(n,n,n,n,n,n)定義2D轉(zhuǎn)換，使用6個值的矩陣translate(x,y)定義2D轉(zhuǎn)換，沿著X和Y軸移動元素translateX(n)定義2D/3D轉(zhuǎn)換，沿著X軸移動元素translateY(n)定義2D/3D轉(zhuǎn)換，沿著Y軸移動元素scale(x,y)定義2D縮放轉(zhuǎn)換，參數(shù)x定義元素寬度的縮放比例，參數(shù)y定義元素高度的縮放比例，取值為負(fù)值表示反轉(zhuǎn)元素后縮放scaleX(n)定義2D/3D縮放轉(zhuǎn)換，參數(shù)n定義元素寬度的縮放比例，取值為負(fù)值表示反轉(zhuǎn)元素后縮放scaleY(n)定義2D/3D縮放轉(zhuǎn)換，參數(shù)n定義元素高度的縮放比例，取值為負(fù)值表示反轉(zhuǎn)元素后縮放rotate(angle)定義2D旋轉(zhuǎn)，參數(shù)angle為正值定義順時針旋轉(zhuǎn)的角度，為負(fù)值定義逆時針旋轉(zhuǎn)的角度，單位為deg，表示度skew(x-angle,y-angle)定義2D傾斜轉(zhuǎn)換，沿著X和Y軸包含兩個參數(shù)值，分別表示X軸和Y軸傾斜的角度，如果第2個參數(shù)為空，則默認(rèn)為0，參數(shù)為負(fù)表示向相反方向傾斜skewX(angle)定義2D傾斜轉(zhuǎn)換，參數(shù)定義元素在X軸（水平方向）的傾斜角度skewY(angle)定義2D傾斜轉(zhuǎn)換，參數(shù)定義元素在Y軸（垂直方向）的傾斜角度元素過渡與動畫表8-3三維轉(zhuǎn)換函數(shù)《Web前端開發(fā)任務(wù)式教程》函數(shù)名說明matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定義3D轉(zhuǎn)換，使用16個值的4x4矩陣translate3d(x,y,z)定義3D轉(zhuǎn)換，沿著X軸、Y軸、Z軸移動元素translateZ(z)定義3D轉(zhuǎn)換，沿著Z軸移動元素scale3d(x,y,z)定義3D縮放轉(zhuǎn)換，參數(shù)x定義元素寬度的縮放比例，參數(shù)y定義元素高度的縮放比例，參數(shù)z定義元素Z軸的縮放比例，取值為負(fù)值表示反轉(zhuǎn)元素后縮放scaleZ(z)定義3D縮放轉(zhuǎn)換，沿著Z軸縮放，取值為負(fù)值表示反轉(zhuǎn)元素后縮放rotate3d(x,y,z,angle)定義3D旋轉(zhuǎn)rotateX(angle)定義沿X軸的3D旋轉(zhuǎn)rotateY(angle)定義沿Y軸的3D旋轉(zhuǎn)rotateZ(angle)定義沿Z軸的3D旋轉(zhuǎn)perspective(n)定義3D轉(zhuǎn)換元素距離視圖的距離元素過渡與動畫2.transform-origin屬性transform-origin屬性定義元素轉(zhuǎn)換的基點(diǎn)位置。2D轉(zhuǎn)換時，能夠基于元素的x、y軸轉(zhuǎn)換。3D轉(zhuǎn)換時，還能基于元素的Z軸轉(zhuǎn)換。各軸取值說明如表8-4所示。表8-4transform-origin屬性《Web前端開發(fā)任務(wù)式教程》參數(shù)名取值說明x-axisleft、center、right、length、%定義基點(diǎn)被置于X軸的何處y-axistop、center、bottom、length、%定義基點(diǎn)被置于Y軸的何處z-axislength定義基點(diǎn)被置于Z軸的何處元素過渡與動畫【例8-1】使用轉(zhuǎn)換屬性轉(zhuǎn)換2張圖像的顯示位置，使其呈現(xiàn)一定的造型，造型效果如圖8-1所示。《Web前端開發(fā)任務(wù)式教程》圖8-1圖像造型排列本例給出了所有瀏覽器的完整轉(zhuǎn)換屬性代碼，本書后面僅給出Chrome和Safari瀏覽器的轉(zhuǎn)換屬性代碼，請讀者自行補(bǔ)充其他瀏覽器的轉(zhuǎn)換屬性代碼。元素過渡與動畫【例8-2】基于例5-13的形狀繪制，使用偽元素與轉(zhuǎn)換屬性繪制如圖8-2所示的紅心造型?！禬eb前端開發(fā)任務(wù)式教程》圖8-2紅心造型元素過渡與動畫8.1.3過渡屬性過渡能夠使元素屬性在規(guī)定時間內(nèi)平滑地由一種取值變化為另一種取值，產(chǎn)生動畫效果。1.基本屬性過渡基本屬性有4個，相關(guān)說明如表8-5所示。表8-5過渡屬性《Web前端開發(fā)任務(wù)式教程》屬性名說明transition-property定義應(yīng)用過渡效果的元素屬性名稱，取值說明如下。none：沒有屬性會獲得過渡效果。all：默認(rèn)值，所有屬性都將獲得過渡效果。property：應(yīng)用過渡效果的元素屬性名稱列表，名稱之間以逗號進(jìn)行分隔transition-duration定義完成過渡效果需要花費(fèi)的時間。取值為以秒或毫秒為單位的數(shù)值。默認(rèn)值為0，表示沒有過渡效果transition-timing-function定義過渡效果的速度曲線。取值說明如下。linear：使用同一個速度過渡，等于cubic-bezier(0,0,1,1)。ease：慢速開始，然后變快，慢速結(jié)束，等于cubic-bezier(0.25,0.1,0.25,1)，是默認(rèn)過渡速度曲線。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)。cubic-bezier(n,n,n,n)：使用cubic-bezier函數(shù)自定義過渡速度曲線transition-delay定義過渡效果延遲時間，也即過渡開始前的等待時間，取值為以秒或毫秒為單位的數(shù)值。默認(rèn)值為0，表示過渡立即開始元素過渡與動畫2.transition屬性transition屬性簡寫基本過渡屬性，一般按照應(yīng)用過渡效果的元素屬性名、過渡效果完成需要花費(fèi)的時間、過渡效果的速度曲線、過渡延遲時間的順序依次設(shè)置。例如，設(shè)置一個針對元素寬度屬性、用2秒完成的過渡效果的代碼如下。transition:width2s;可以對元素的多個屬性分別設(shè)置過渡的效果，稱為過渡列表，過渡列表用逗號進(jìn)行分隔。例如，設(shè)置元素寬度屬性2秒完成過渡效果、高度屬性3秒完成過渡效果的代碼如下。transition:width2s,height3s;《Web前端開發(fā)任務(wù)式教程》過渡定義有兩個必要要素，即過渡涉及的元素樣式屬性和完成過渡需要的時間。元素過渡與動畫3.過渡的狀態(tài)轉(zhuǎn)換過渡涉及到元素樣式屬性的2種取值，每種取值設(shè)置在元素的某種狀態(tài)上，在特定的條件下，元素從一種狀態(tài)切換到另一種狀態(tài)，完成樣式屬性值的變換，產(chǎn)生過渡動畫。最常見的狀態(tài)切換為從初始狀態(tài)切換到鼠標(biāo)懸停狀態(tài)，所以，往往將元素樣式屬性的一種取值設(shè)置在元素本身，即初始狀態(tài)上，另一種取值設(shè)置在元素的特定狀態(tài)，例如鼠標(biāo)懸停狀態(tài)上?！禬eb前端開發(fā)任務(wù)式教程》過渡是元素本身的屬性，所以過渡屬性應(yīng)定義在元素上，不要定義在元素的特定狀態(tài)，例如鼠標(biāo)懸停狀態(tài)上，否則會出現(xiàn)意想不到的結(jié)果。元素過渡與動畫【例8-3】使用過渡屬性定義一個動畫效果，div元素初始大小為120*120px，黃色背景，當(dāng)鼠標(biāo)懸停于div元素時，在2秒內(nèi)完成屬性值過渡，div元素的大小變?yōu)?40*160px，顏色變?yōu)榧t色。圖8-3a所示為div元素的初始顯示效果，圖8-3b為鼠標(biāo)懸停后變化到的最終狀態(tài)效果。a)初始顯示效果b)過渡到的最終狀態(tài)圖8-3元素框模型與背景屬性過渡《Web前端開發(fā)任務(wù)式教程》元素過渡與動畫【例8-4】為例8-3的div元素增加文字，增加鼠標(biāo)懸停樣式，當(dāng)鼠標(biāo)懸停時div元素右移150px，字體放大到2em，字體動畫有2秒的延時，在1秒內(nèi)完成過渡，圖8-4a所示為網(wǎng)頁的初始效果，圖8-4b為鼠標(biāo)懸停后變化到的最終狀態(tài)效果。a)初始顯示效果b)過渡到的最終狀態(tài)圖8-4元素字號與轉(zhuǎn)換屬性過渡《Web前端開發(fā)任務(wù)式教程》元素過渡與動畫過渡能夠改善用戶的交互體驗，本任務(wù)基于過渡屬性設(shè)計歡迎動畫和幽靈按鈕等典型網(wǎng)頁效果，供網(wǎng)站開發(fā)參考?！禬eb前端開發(fā)任務(wù)式教程》任務(wù)8.2設(shè)計過渡效果元素過渡與動畫8.2.1設(shè)計歡迎動畫1.需求說明網(wǎng)站入口如果能有一個具有儀式感的歡迎動畫將會很好地提升用戶的體驗，請設(shè)計一個如圖8-5所示的動畫，初始顯示效果如圖8-5a所示，當(dāng)鼠標(biāo)懸停于圖像時開始動畫，動畫的最終顯示效果如圖8-5b所示。詳細(xì)要求如下。1）當(dāng)鼠標(biāo)懸停于圖像時背景立即切換到玫瑰花背景，且邊框變?yōu)閳A角。2）當(dāng)切換到玫瑰花以后，玫瑰花用2s時間旋轉(zhuǎn)360度。3）玫瑰花旋轉(zhuǎn)完成后，文字用1s時間放大，并移到玫瑰花的中心。a)初始狀態(tài)b)過渡到的最終狀態(tài)圖8-5 歡迎動畫《Web前端開發(fā)任務(wù)式教程》元素過渡與動畫2.項目創(chuàng)建與資源準(zhǔn)備新建HTML項目，準(zhǔn)備名字為“門.jpg”和“玫瑰花.jpg”的2個圖像資源。3.HTML內(nèi)容設(shè)計新建HTML文件，編寫網(wǎng)頁內(nèi)容代碼。4.CSS樣式設(shè)計1）編寫元素初始樣式。2）編寫鼠標(biāo)懸停時，元素的最終樣式。3）定義過渡屬性，實現(xiàn)動畫效果。《Web前端開發(fā)任務(wù)式教程》元素過渡與動畫8.2.2設(shè)計幽靈按鈕1.背景顏色變換的按鈕1）初始時，按鈕有邊框，沒有背景顏色，文字黑色顯示，如圖8-6a所示。2）當(dāng)鼠標(biāo)懸停于按鈕時，按鈕背景顏色柔和地切換到與邊框一樣的顏色，從而視覺上忽略掉元素的邊框，單色顯示按鈕。動畫結(jié)束時，綠色按鈕的文字顏色修改為白色，顯示效果如圖8-6b所示，灰色按鈕的文字顏色不作修改，仍為默認(rèn)的黑色，如圖8-6c所示。3）動畫在0.5s時間內(nèi)完成。a)初始顯示

b)鼠標(biāo)懸停于綠色按鈕顯示c)鼠標(biāo)懸停于灰色按鈕顯示圖8-6背景顏色變換的按鈕《Web前端開發(fā)任務(wù)式教程》元素過渡與動畫實施步驟1）新建HTML文件，編寫網(wǎng)頁內(nèi)容代碼。2）編寫基本樣式代碼。3）編寫鼠標(biāo)懸停時按鈕的樣式。4）編寫過渡屬性代碼?！禬eb前端開發(fā)任務(wù)式教程》元素過渡與動畫2.魔幻效果按鈕1）初始時，按鈕背景顏色為藍(lán)色，文字顏色為白色，如圖8-7a所示。2）當(dāng)鼠標(biāo)懸停于按鈕時，按鈕背景顏色切換為透明色，文字顏色切換為藍(lán)色。上邊框從左到右逐漸變?yōu)樗{(lán)色，下邊框從右到左逐漸變?yōu)樗{(lán)色，右邊框從上到下逐漸變?yōu)樗{(lán)色，左邊框從下到上逐漸變?yōu)樗{(lán)色。先上、下邊框變換顏色，變換完成后左、右邊框再變換，最終顯示效果如圖8-7b所示。3）動畫完成時間自定義。a)初始顯示

b)過渡到的最終狀態(tài)圖8-7魔幻按鈕《Web前端開發(fā)任務(wù)式教程》元素過渡與動畫實施步驟1）新建HTML文件，編寫網(wǎng)頁內(nèi)容代碼。2）編寫基本樣式代碼。3）元素定位屬性也可以產(chǎn)生動畫效果，這里對元素定位屬性使用過渡，編寫子絕父相定位樣式代碼。4）編寫鼠標(biāo)懸停時的樣式代碼。5）編寫過渡屬性代碼?！禬eb前端開發(fā)任務(wù)式教程》元素過渡與動畫箭頭效果按鈕1）初始時，按鈕不顯示箭頭，如圖8-8a所示。2）當(dāng)鼠標(biāo)懸停于按鈕時出現(xiàn)箭頭，且箭頭和文字同時左移，移動的距離不同。3）動畫完成時間自定義。a)初始顯示

b)過渡到的最終狀態(tài)圖8-8箭頭效果按鈕《Web前端開發(fā)任務(wù)式教程》元素過渡與動畫實施步驟1）新建HTML文件，編寫網(wǎng)頁內(nèi)容代碼。2）編寫基本樣式代碼。3）元素定位屬性也可以產(chǎn)生動畫效果，這里對元素定位屬性使用過渡，編寫子絕父相定位樣式代碼。4）編寫鼠標(biāo)懸停時的樣式代碼。5）編寫過渡屬性代碼?！禬eb前端開發(fā)任務(wù)式教程》在任務(wù)7.2的第2個任務(wù)（7.2.2節(jié)）中，設(shè)計了輪播圖的布局，本任務(wù)基于動畫屬性實現(xiàn)輪播圖的動畫，網(wǎng)頁顯示效果如圖8-9所示。具體要求如下。1）能夠輪播3幅圖像，圖8-9a和圖8-9b為其中的2幅圖像展示。2）底部水平線指示輪播圖像在圖庫中的位置，與輪播圖像位置對應(yīng)的水平線藍(lán)色顯示，分別如圖8-9a和圖8-9b所示。3）左、右的小于號、大于號初始顏色為淺淺的藍(lán)色，如圖8-9a所示，當(dāng)鼠標(biāo)懸停于輪播圖像時變?yōu)樯钏{(lán)色，如圖8-9b所示。a)第2幅圖像b)第3幅圖像，且鼠標(biāo)懸停于輪播圖像圖8-9 輪播圖動畫展示元素過渡與動畫任務(wù)8.3設(shè)計輪播圖的動畫《Web前端開發(fā)任務(wù)式教程》元素過渡與動畫8.3.1動畫關(guān)鍵幀@keyframes規(guī)則創(chuàng)建動畫關(guān)鍵幀，一個時間節(jié)點(diǎn)定義元素的一組樣式屬性取值，由若干時間節(jié)點(diǎn)的若干組樣式屬性取值組成動畫的幀。語法格式如下。@keyframesanimationname{keyframes-selector{css-styles;}}參數(shù)說明如表8-6所示。表8-6keyframes規(guī)則參數(shù)說明《Web前端開發(fā)任務(wù)式教程》參數(shù)名說明animationname定義動畫的名稱keyframes-selector定義動畫的時間節(jié)點(diǎn)，是時間節(jié)點(diǎn)選擇器，取值為時長的百分比數(shù)值，取值范圍為0-100%。0%是動畫的開始，100%是動畫的完成。為了得到最佳的瀏覽器效果，應(yīng)該始終定義0%和100%選擇器。也可以取from（等于0%）與to（等于100%）2個值作為時間節(jié)點(diǎn)選擇器，如果僅設(shè)置這兩個時間節(jié)點(diǎn)，動畫效果等價于過渡{css-styles}定義元素樣式的聲明塊元素過渡與動畫8.3.2動畫屬性與過渡一樣，動畫也能使元素樣式屬性從一種取值平滑地變化為另一種取值。但是，過渡只能給元素樣式屬性設(shè)置2個取值，即起始和終止值，還不夠細(xì)膩。使用關(guān)鍵幀，動畫能夠為元素樣式屬性指定若干時間節(jié)點(diǎn)的取值，實現(xiàn)更為豐富的顯示效果，從而取代圖像動畫、Flash動畫和JavaScript動畫，應(yīng)用更為廣泛。1.動畫基本屬性動畫基本屬性有6個，說明如表8-7所示?！禬eb前端開發(fā)任務(wù)式教程》元素過渡與動畫表8-7動畫基本屬性《Web前端開發(fā)任務(wù)式教程》屬性名說明animation-name定義綁定到元素的keyframes規(guī)則名稱。該屬性必須設(shè)置animation-delay定義動畫延遲時間，取值為以秒或毫秒為單位的數(shù)值。允許負(fù)值，負(fù)值表示動畫馬上開始，且跳過規(guī)定時長的動畫。正值定義動畫開始前等待的時長，也即等待多少時間后再開始動畫，默認(rèn)值為0，表示立即開始動畫animation-timing-function定義動畫的速度曲線。取值說明如下。linear：使用同一個速度過渡，等于cubic-bezier(0,0,1,1)。ease：慢速開始，然后變快，慢速結(jié)束，等于cubic-bezier(0.25,0.1,0.25,1)，是默認(rèn)動畫速度曲線。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)。cubic-bezier(n,n,n,n)：使用cubic-bezier函數(shù)自定義動畫速度曲線animation-iteration-count定義動畫的播放次數(shù)，取值說明如下。n：播放指定次數(shù)的動畫。infinite：無限次播放動畫元素過渡與動畫續(xù)表《Web前端開發(fā)任務(wù)式教程》屬性名說明animation-direction定義動畫的播放方向，取值說明如下。normal：默認(rèn)值。動畫正向播放，每個周期內(nèi)動畫向前播放，播放到結(jié)束后再從起點(diǎn)開始重新播放動畫。alternate：動畫交替正反向播放。在奇數(shù)次數(shù)（1、3、5…）正向播放，在偶數(shù)次數(shù)（2、4、6…）反向播放。反向播放時，動畫按步后退，速度曲線也反向，如ease-in在反向時成為ease-out。alternate-reverse：動畫反向交替正反向播放。與alternate取值的效果相反，在奇數(shù)次數(shù)反向播放，在偶數(shù)次數(shù)正反向播放animation-play-state定義動畫的狀態(tài)，取值說明如下。paused：暫停動畫。running：播放動畫animation-duration定義完成動畫需要花費(fèi)的時間。取值為以秒或毫秒為單位的數(shù)值。默認(rèn)值為0，表示沒有動畫效果animation-fill-mode定義動畫時間之外元素的樣式，也即在動畫執(zhí)行之前和之后如何給動畫的元素應(yīng)用樣式，取值說明如下。none：動畫執(zhí)行之前和之后不改變?nèi)魏螛邮?。forwards：元素保持動畫最后一幀的樣式。backwards：元素使用動畫第一幀的樣式。both：執(zhí)行forwards和backwards的動作元素過渡與動畫2.animation屬性animation屬性簡寫動畫基本屬性，一次設(shè)置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction6個屬性的值，屬性取值之間用空格進(jìn)行分隔。語法格式如下。animation:namedurationtiming-functiondelayiteration-countdirection;并不一定要設(shè)置全部6個屬性的值，可以僅設(shè)置部分屬性的值。其中，animation-name和animation-duration這2個屬性的值必須設(shè)置，其余可以使用默認(rèn)值?！纠?-5】使用animation屬性修改例8-3，實現(xiàn)同樣的動畫效果。