Web 前端開發(fā)技術(shù)（HTML5+CSS3+JavaScript+jQuery） 課件 項目六　 CSS 動畫設(shè)計

CSS動畫設(shè)計Web前端開發(fā)技術(shù)篇2：CSS技術(shù)

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

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