Web 前端開(kāi)發(fā)技術(shù)（HTML5+CSS3+JavaScript+jQuery） 課件 項(xiàng)目六　 CSS 動(dòng)畫(huà)設(shè)計(jì)

CSS動(dòng)畫(huà)設(shè)計(jì)Web前端開(kāi)發(fā)技術(shù)篇2：CSS技術(shù)

本項(xiàng)目介紹CSS的變形屬性和變形函數(shù),以及CSS的動(dòng)畫(huà)效果和應(yīng)用示例。通過(guò)完成開(kāi)放式任務(wù)可以培養(yǎng)學(xué)生的發(fā)散思維和創(chuàng)新精神。黨的二十大報(bào)告提出“必須堅(jiān)持科技是第一生產(chǎn)力、人才是第一資源、創(chuàng)新是第一動(dòng)力”。要基于高質(zhì)量發(fā)展全局,聚焦發(fā)展新質(zhì)生產(chǎn)力的基本要素,將教育、科技、人才一體化統(tǒng)籌部署,系統(tǒng)推進(jìn)教育強(qiáng)國(guó)、科技強(qiáng)國(guó)、人才強(qiáng)國(guó)建設(shè)。隨著計(jì)算機(jī)技術(shù)的不斷發(fā)展,我們要做科技人才、領(lǐng)軍人才、高素質(zhì)人才,為科技創(chuàng)新貢獻(xiàn)自己的一份力量。序言目錄CONTENTSCSS變形CSS過(guò)渡CSS關(guān)鍵幀動(dòng)畫(huà)01020301CSS變形Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.件采購(gòu)匯總表CSS變形CSS變形屬性transformtransform屬性可以實(shí)現(xiàn)元素旋轉(zhuǎn)、縮放、傾斜和移動(dòng)這4種類(lèi)型的變形處理。指定的元素可以是塊級(jí)元素和內(nèi)聯(lián)元素,其基本語(yǔ)法格式如下。{transform:none|變形函數(shù);}屬性值設(shè)置為none時(shí),元素不變形,還可以設(shè)置多個(gè)變形函數(shù),用空格分離。變形函數(shù)有2D變形和3D變形的函數(shù),可分別實(shí)現(xiàn)2D和3D變形的效果。2D函數(shù)1.2D旋轉(zhuǎn)變形函數(shù)rotate()2D旋轉(zhuǎn)變形函數(shù)rotate()對(duì)指定的元素在二維空間內(nèi)進(jìn)行旋轉(zhuǎn),其基本語(yǔ)法格式如下。{transform:rotate(旋轉(zhuǎn)角度);}旋轉(zhuǎn)角度取值的單位可以為deg(度)、grad(梯度)、rad(弧度)或turn(圈)。2.2D縮放變形函數(shù)scale()2D縮放變形函數(shù)scale()對(duì)指定的元素在二維空間內(nèi)進(jìn)行縮放,其基本語(yǔ)法格式如下。{transform:scale(縮放值);}縮放值可以是正數(shù)或負(fù)數(shù)。正數(shù)是縮放的比例倍數(shù),負(fù)數(shù)是翻轉(zhuǎn)元素后再縮放的比例倍數(shù)。若縮放值為一個(gè)參數(shù),則表示寬度和高度采用同樣的縮放值;若縮放值為兩個(gè)參數(shù),則分別表示寬度縮放值和高度縮放值,用逗號(hào)分隔。CSS變形2D函數(shù)3.2D移位變形函數(shù)translate()2D移位變形函數(shù)translate()對(duì)指定的元素在二維空間內(nèi)進(jìn)行坐標(biāo)移位,其基本語(yǔ)法格式如下。{transform:translate(坐標(biāo)偏移值);}坐標(biāo)偏移值是水平和垂直方向相對(duì)于原位置偏移的距離。若坐標(biāo)偏移值設(shè)一個(gè)參數(shù),則表示設(shè)置水平偏移值,而垂直偏移值默認(rèn)為0;若坐標(biāo)偏移值設(shè)兩個(gè)參數(shù),則分別表示水平和垂直方向偏移值,用逗號(hào)分隔。正數(shù)表示向右或向下,負(fù)數(shù)表示向左或向上。4.2D傾斜變形函數(shù)skew()2D傾斜變形函數(shù)skew()對(duì)指定的元素在二維空間內(nèi)進(jìn)行傾斜顯示,其基本語(yǔ)法格式如下。{transform:skew(傾斜值);}CSS變形2D函數(shù)傾斜值是相對(duì)于坐標(biāo)軸傾斜的角度。若傾斜值設(shè)一個(gè)參數(shù),則表示相對(duì)于x軸的傾斜角度,而相對(duì)于y軸的傾斜角度默認(rèn)為0;若傾斜值設(shè)兩個(gè)參數(shù),則分別表示相對(duì)于x軸的傾斜角度和相對(duì)于y軸的傾斜角度,用逗號(hào)分隔。傾斜和旋轉(zhuǎn)不同,旋轉(zhuǎn)不會(huì)改變?cè)匦螤?但傾斜會(huì)改變?cè)匦螤睢?.2D矩陣變形函數(shù)matrix()2D矩陣變形函數(shù)matrix()可以實(shí)現(xiàn)多種變形效果。該函數(shù)有6個(gè)參數(shù),經(jīng)過(guò)矩陣計(jì)算實(shí)現(xiàn)變形效果,實(shí)現(xiàn)縮放和平移的基本語(yǔ)法格式如下。matrix(x軸縮放值,0,0,y軸縮放值,x軸移動(dòng)值,y軸移動(dòng)值)實(shí)現(xiàn)移位和旋轉(zhuǎn)(θ)的基本語(yǔ)法格式如下。matrix(cosθ,-sinθ,sinθ,cosθ,x軸移動(dòng)值,y軸移動(dòng)值)CSS變形件采購(gòu)匯總表CSS變形2D變形原點(diǎn)屬性transform-originCSS變形的原點(diǎn)默認(rèn)是元素對(duì)象的中心點(diǎn)。transform-origin屬性用于改變2D變形的中心點(diǎn),其基本語(yǔ)法格式如下。{transform-origin:x坐標(biāo)y坐標(biāo);}原點(diǎn)的x坐標(biāo)和y坐標(biāo)可以是百分比、數(shù)值(em、px)、方位詞(left、center、right、top、middle、bottom)等。3D函數(shù)1.3D旋轉(zhuǎn)變形函數(shù)rotate3d()3D旋轉(zhuǎn)變形函數(shù)rotate3d()對(duì)指定的元素在三維空間內(nèi)進(jìn)行旋轉(zhuǎn),可以分別用rotateX()、rotateY()、rotateZ()指定旋轉(zhuǎn)的坐標(biāo)軸,其基本語(yǔ)法格式如下。{transform:rotate3d(x坐標(biāo),y坐標(biāo),z坐標(biāo),旋轉(zhuǎn)角度);}/*指定x、y、z坐標(biāo)點(diǎn)旋轉(zhuǎn)角度*/{transform:rotateX(旋轉(zhuǎn)角度);}/*沿x軸旋轉(zhuǎn)*/{transform:rotateY(旋轉(zhuǎn)角度);}/*沿y軸旋轉(zhuǎn)*/{transform:rotateZ(旋轉(zhuǎn)角度);}/*沿z軸旋轉(zhuǎn)*/2.3D縮放變形函數(shù)scale3d()3D縮放變形函數(shù)scale3d()對(duì)指定的元素在三維空間內(nèi)進(jìn)行縮放,可以分別用scaleX()、scaleY()、CSS變形3D函數(shù)scaleZ()指定縮放的坐標(biāo)軸,其基本語(yǔ)法格式如下。{transform:scale3d(x軸縮放值,y軸縮放值,z軸縮放值);}/*指定x、y、z軸縮放值*/{transform:scaleX(縮放值);}/*沿x軸縮放*/{transform:scaleY(縮放值);}/*沿y軸縮放*/{transform:scaleZ(縮放值);}/*沿z軸縮放*/3.3D移位變形函數(shù)translate3d()3D移位變形函數(shù)translate3d()對(duì)指定的元素在三維空間內(nèi)進(jìn)行移位,可以分別用translateX()、translateY()、translateZ()指定移位的坐標(biāo)軸,其基本語(yǔ)法格式如下。CSS變形3D函數(shù){transform:translate3d(x軸移位偏移值,y軸移位偏移值,z軸移位偏移值);}/*指定x、y、z軸移位偏移值*/{transform:translateX(移位偏移值);}/*沿x軸移位*/{transform:translateY(移位偏移值);}/*沿y軸移位*/{transform:translateZ(移位偏移值);}/*沿z軸移位*/CSS變形件采購(gòu)匯總表CSS變形3D透視視圖屬性perspective3D變形中z軸的變形要在3D透視視圖中才有效果。3D透視視圖屬性perspective用于設(shè)置3D元素與視圖的距離,單位為像素(px),其基本語(yǔ)法格式如下。{perspective:距離值;}02CSS過(guò)渡Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.過(guò)渡屬性transition-property用于設(shè)置過(guò)渡的屬性名稱(chēng),其基本語(yǔ)法格式如下。{transition-property:none|all|屬性列表}屬性值為none,表示沒(méi)有過(guò)渡屬性;屬性值為all,表示所有屬性。屬性列表中可以是顏色、大小、位置等相關(guān)的屬性,用空格分隔。

過(guò)渡屬性transition-property過(guò)渡時(shí)間是指屬性值過(guò)渡轉(zhuǎn)換的時(shí)間長(zhǎng)度,單位是秒(s)。默認(rèn)的過(guò)渡時(shí)間是0秒。過(guò)渡時(shí)間屬性transition-duration用于指定過(guò)渡時(shí)間長(zhǎng)度,可以在過(guò)渡時(shí)間內(nèi)看到過(guò)渡轉(zhuǎn)換的過(guò)程,如果不設(shè)置過(guò)渡時(shí)間,則會(huì)直接看到結(jié)束屬性值的效果,其基本語(yǔ)法格式如下。{transition-duration:時(shí)間長(zhǎng)度;}過(guò)渡時(shí)間屬性transition-durationCSS過(guò)渡件采購(gòu)匯總表CSS過(guò)渡過(guò)渡延遲時(shí)間屬性transition-delay過(guò)渡延遲時(shí)間屬性transition-delay用于設(shè)置過(guò)渡延遲的時(shí)間長(zhǎng)度。默認(rèn)過(guò)渡延遲時(shí)間為0秒,即當(dāng)觸發(fā)事件發(fā)生時(shí),過(guò)渡轉(zhuǎn)換就開(kāi)始,其基本語(yǔ)法格式如下。{transition-delay:延遲時(shí)間長(zhǎng)度;}延遲時(shí)間長(zhǎng)度單位為秒(s)或毫秒(ms)。延遲時(shí)間長(zhǎng)度可以為正整數(shù)或負(fù)整數(shù)。若延遲時(shí)間長(zhǎng)度為正整數(shù),則表示延遲指定時(shí)間后過(guò)渡變化才開(kāi)始;若延遲時(shí)間長(zhǎng)度為負(fù)整數(shù),則表示延遲時(shí)間長(zhǎng)度前的過(guò)渡不顯示,只顯示延遲時(shí)間長(zhǎng)度之后的過(guò)渡轉(zhuǎn)換效果。過(guò)渡效果速度屬性transition-timing-function過(guò)渡效果速度屬性transition-timing-function用于設(shè)置過(guò)渡過(guò)程中的速度變化,其基本語(yǔ)法格式如下。{transition-timing-function:過(guò)渡效果速度值;}過(guò)渡效果速度屬性值及說(shuō)明如表6-1所示。CSS過(guò)渡件采購(gòu)匯總表CSS過(guò)渡過(guò)渡復(fù)合屬性transition過(guò)渡復(fù)合屬性transition可以同時(shí)指定過(guò)渡變化的屬性、時(shí)間、延遲時(shí)間等子屬性值,其基本語(yǔ)法格式如下。{transition:過(guò)渡屬性值過(guò)渡時(shí)間值過(guò)渡效果速度屬性值過(guò)渡延遲時(shí)間值;}子屬性值之間用空格間隔。過(guò)渡復(fù)合屬性可以設(shè)置多個(gè)過(guò)渡屬性變化,用逗號(hào)分隔。03CSS關(guān)鍵幀動(dòng)畫(huà)Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.定義關(guān)鍵幀動(dòng)畫(huà)命令@keyframes定義關(guān)鍵幀動(dòng)畫(huà)用命令@keyframes,其基本語(yǔ)法格式如下。@keyframes關(guān)鍵幀動(dòng)畫(huà)名稱(chēng){幀的時(shí)間位置{屬性:屬性值;}幀的時(shí)間位置{屬性:屬性值;}……}幀的時(shí)間位置是指幀處于動(dòng)畫(huà)時(shí)長(zhǎng)的百分比位置,可以用0~100%表示,也可以用from(0)、to(100%)表示。在一個(gè)關(guān)鍵幀中,可以為對(duì)象的多個(gè)屬性設(shè)置值,這些值的變化可以產(chǎn)生各種動(dòng)畫(huà)效果。CSS關(guān)鍵幀動(dòng)畫(huà)關(guān)鍵幀動(dòng)畫(huà)屬性animation定義了關(guān)鍵幀動(dòng)畫(huà)之后,通過(guò)設(shè)置關(guān)鍵幀動(dòng)畫(huà)屬性animation的屬性值運(yùn)行關(guān)鍵幀動(dòng)畫(huà)。animation屬性包含多個(gè)子屬性,用來(lái)設(shè)置動(dòng)畫(huà)的細(xì)節(jié)效果,其基本語(yǔ)法格式如下。{animation:關(guān)鍵幀動(dòng)畫(huà)名稱(chēng)動(dòng)畫(huà)播放時(shí)間動(dòng)畫(huà)效果速度動(dòng)畫(huà)延遲時(shí)間動(dòng)畫(huà)播放次數(shù)動(dòng)畫(huà)播放方向動(dòng)畫(huà)狀態(tài)動(dòng)畫(huà)時(shí)間外狀態(tài);}動(dòng)畫(huà)效果速度屬性的屬性值和過(guò)渡效果速度屬性的屬性值一樣。動(dòng)畫(huà)播放次數(shù)默認(rèn)是1次,為infinite時(shí),動(dòng)畫(huà)重復(fù)播放。動(dòng)畫(huà)播放方向值為normal時(shí),動(dòng)畫(huà)每次循環(huán)都向前播放;為alternate時(shí),動(dòng)畫(huà)第偶數(shù)次向前播放,第奇數(shù)次反向播放。動(dòng)畫(huà)狀態(tài)有running(運(yùn)動(dòng))和paused(暫停)兩個(gè)屬性值。動(dòng)畫(huà)時(shí)間外狀態(tài)表示動(dòng)畫(huà)不運(yùn)行時(shí)的狀態(tài)。為none時(shí),表示不設(shè)置動(dòng)畫(huà)時(shí)間外狀態(tài),表示為動(dòng)畫(huà)結(jié)束時(shí)狀態(tài);為backwards