Web前端開發(fā)- 網(wǎng)頁設(shè)計(jì) 課件 5.6 CSS3動(dòng)效新特性

單元5

CSS3新特性5.6

CSS3動(dòng)效新特性主要內(nèi)容C

O

N

T

E

N

T

SPART

01CSS3過渡效果PART

03CSS3動(dòng)畫效果PART

02CSS3變形效果CSS3過渡效果CSS3提供了強(qiáng)大的過渡屬性transition，利用該屬性可以在不使用Flash動(dòng)畫或者

Javascript腳本的情況下，為元素從一種樣式到另一種樣式的變化添加中間過渡效果。transition:

property

duration

timing-function

delay;子屬性transition-property描述指定應(yīng)用過渡效果的CSS屬性的名稱，當(dāng)這些屬性的屬性值發(fā)生改變時(shí)，將應(yīng)用過的變化效果。transition效果需要指定多少秒或毫秒才能完成。transition-durationtransition-timing-functiontransition-delay指定過渡效果執(zhí)行速度變化的時(shí)間曲線。指定過渡效果執(zhí)行之前需要等待的時(shí)間。CSS3過渡效果transition-timing-function屬性值說明【案例5.6.1】CSS3的過渡效果示例屬性值lineareaseease-inease-outease-in-out說明動(dòng)畫以以勻速執(zhí)行。動(dòng)畫以慢速開始，變快之后再慢速結(jié)束。動(dòng)畫以以慢速開始。動(dòng)畫以以慢速結(jié)束。動(dòng)畫以以慢速開始和結(jié)束。cubic-bezier(n,n,n,n)在cubic-bezier函數(shù)中自定義動(dòng)畫執(zhí)行速度，各參數(shù)是0至1之間的數(shù)值。CSS3變形效果CSS3新增的transform屬性通過一系列變形函數(shù)，操控元素進(jìn)行平移、旋轉(zhuǎn)、縮放和傾斜等變形，包括2D變形3D變形。none（默認(rèn)值）：表示不進(jìn)行變形。transform-function：設(shè)置變形函數(shù)，可以設(shè)置1個(gè)或多個(gè)變形函數(shù)，若有多個(gè)變形函數(shù)，之間以空格分隔。transform:

none|transform-functions;CSS3變形效果常用2D變形函數(shù)函數(shù) 描述【案例5.6.2】CSS3的2D變形效果示例translate()功能：重新定義元素的二維坐標(biāo)，實(shí)現(xiàn)元素平移的效果。語法：transform:translate

(x-value,y-value);scale

()功能：縮放元素大小，包含兩個(gè)參數(shù)，分別用來定義寬度和高度的縮放比例。語法：transform:scale(x-axis,y-axis);rotate

()功能：在二維平面內(nèi)將元素旋轉(zhuǎn)一定的角度，正值順時(shí)針旋轉(zhuǎn)。負(fù)值逆時(shí)針旋轉(zhuǎn)。語法：transform:rotate(angle);skew

()功能：將元素沿著X軸或Y軸進(jìn)行一定角度的傾斜。語法：transform:skew(x-angle,y-angle);CSS3變形效果常用3D變形函數(shù)【案例5.6.3】CSS3的3D旋轉(zhuǎn)效果示例函數(shù)translate3d(x,y,z)translateX(x)translateY(y)translateZ(z)scale3d(x,y,z)scaleX(x)scaleY(y)scaleZ(z)rotate3d(x,y,z,angle)rotateX(angle)rotateY(angle)rotateZ(angle)matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)描述定義3D平移定義圍繞X軸的3D平移定義圍繞Y軸的3D平移定義圍繞Z軸的3D平移定義3D縮放定義圍繞X軸的3D縮放定義圍繞Y軸的3D縮放定義圍繞Z軸的3D縮放定義3D旋轉(zhuǎn)定義圍繞X軸的3D旋轉(zhuǎn)定義圍繞Y軸的3D旋轉(zhuǎn)定義圍繞Z軸的3D旋轉(zhuǎn)綜合定義3D變形，使用16個(gè)值的4x4矩陣CSS3動(dòng)畫效果在CSS3中，使用@keyframes規(guī)則創(chuàng)建動(dòng)畫。@keyframes

animationname

{keyframes-selector{css-styles;}}語法animationname：當(dāng)前動(dòng)畫的名稱，它將作為調(diào)用動(dòng)畫時(shí)動(dòng)畫的標(biāo)識(shí)，不能為空。keyframes-selector：關(guān)鍵幀選擇器，指定當(dāng)前關(guān)鍵幀在整個(gè)動(dòng)畫過程中的位置，值可以是from和to、或者百分比。其中，from和0%效果相同(表示動(dòng)畫的開始)，

to和100%效果相同{表示動(dòng)畫的結(jié)束)。css-styles：定義當(dāng)前關(guān)鍵幀對(duì)應(yīng)的動(dòng)畫狀態(tài)，由若干

CSS樣式屬性刻畫，各屬性間用分號(hào)分隔。CSS3動(dòng)畫效果在CSS3中，使用animation屬性調(diào)用@keyframes規(guī)則創(chuàng)建的動(dòng)畫，它是一個(gè)復(fù)合屬性。animation:

name

duration

timing-function

delay

iteration-count

direction

fill-mode

play-state;子屬性animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-count說明指定要綁定到選擇器的關(guān)鍵幀的名稱動(dòng)畫指定需要多少秒或毫秒完成設(shè)置動(dòng)畫將如何完成一個(gè)周期設(shè)置動(dòng)畫在啟動(dòng)前的延遲間隔。定義動(dòng)畫的播放次數(shù)。animation-directionanimation-fill-mode