css34實(shí)用實(shí)用教案

1、2D變換(binhun)lTransformlrotate() 旋轉(zhuǎn)函數(shù) 取值度數(shù)(d shu)ldeg 度數(shù)(d shu)ltransform-origin 旋轉(zhuǎn)的基點(diǎn)lskew() 傾斜函數(shù) 取值度數(shù)(d shu) ldeg 度數(shù)(d shu)lskewX()lskewY()第1頁(yè)/共9頁(yè)第一頁(yè)，共10頁(yè)。2D變換(binhun)2lTransformlscale() 縮放函數(shù) 取值 正數(shù)、負(fù)數(shù)和小數(shù)lscaleX()lscaleY()ltranslate() 位移函數(shù) 像素(xin s)值ltranslateX()ltranslateY()l實(shí)例：鐘表效果第2頁(yè)/共9頁(yè)第二頁(yè)，共10頁(yè)。

2、3d變換(binhun)1l transform-style（preserve-3d） 建立3D空間l perspective 景深(Z軸)l perspective- origin 景深基點(diǎn)(jdin)l transform 新增函數(shù)l rotateX()l rotateY()l rotateZ()l translateZ() /前后移動(dòng)l scaleZ()/Z軸縮放倍數(shù)l 實(shí)例：3D盒子第3頁(yè)/共9頁(yè)第三頁(yè)，共10頁(yè)。animationl 關(guān)鍵幀keyFramesl 類似于flashl 只需指明兩個(gè)狀態(tài)，之間的過(guò)程由計(jì)算(j sun)機(jī)自動(dòng)計(jì)算(j sun)l 關(guān)鍵幀的時(shí)間單位l 數(shù)字：0

3、%、25%、100%等l 字符：from(0%)、to(100%)l 格式l keyframes 動(dòng)畫(huà)名稱l l動(dòng)畫(huà)狀態(tài)l 第4頁(yè)/共9頁(yè)第四頁(yè)，共10頁(yè)。animate關(guān)鍵幀l格式(g shi)(2)lkeyframes yema_testllfrom background:red; lto background:green; ll可以只有tolanimation-fill-mode :forwards ：當(dāng)動(dòng)畫(huà)完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）。第5頁(yè)/共9頁(yè)第五頁(yè)，共10頁(yè)。animate調(diào)用(dioyng)動(dòng)畫(huà)l 調(diào)用的標(biāo)簽(#div1、xxx:hover之類的)l

4、必要(byo)屬性l animation-name動(dòng)畫(huà)名稱（關(guān)鍵幀名稱）l animation-duration動(dòng)畫(huà)持續(xù)時(shí)間l 例如：l -webkit-animation-name: xinzhuoyue;l -webkit-animation-duration: 4s;l 練習(xí)：做一個(gè)進(jìn)度條加載效果l animation-play-state 播放狀態(tài)（ running 播放 和paused 暫停 ）第6頁(yè)/共9頁(yè)第六頁(yè)，共10頁(yè)。animate可選屬性(shxng)l可選屬性lanimation-timing-function動(dòng)畫(huà)運(yùn)動(dòng)形式llinear勻速。lease緩沖。lease-i

5、n由慢到快。lease-out由快到慢。lease-in-out由慢到快再到慢。lcubic-bezier(number, number, number, number)：特定(tdng)的貝塞爾曲線類型，4個(gè)數(shù)值需在0, 1區(qū)間內(nèi)第7頁(yè)/共9頁(yè)第七頁(yè)，共10頁(yè)。animate可選屬性(shxng)(2)l可選屬性(2)lanimation-delay動(dòng)畫(huà)延遲l只是第一次lanimation-iteration-count重復(fù)次數(shù)linfinite為無(wú)限次lanimation-direction播放前重置l動(dòng)畫(huà)是否重置后再開(kāi)始播放lalternate動(dòng)畫(huà)直接從上一次停止的位置開(kāi)始執(zhí)行l(wèi)normal動(dòng)畫(huà)第二次直接跳到0%的狀態(tài)開(kāi)始執(zhí)行l(wèi)實(shí)例：無(wú)縫(w fn)滾動(dòng)第8頁(yè)/共9頁(yè)第八頁(yè)，共10頁(yè)。感謝您的欣賞(xnshng)！第9頁(yè)/共9頁(yè)第九頁(yè)，共10頁(yè)。NoImage內(nèi)容(nirng)總結(jié)2D變換。transform-style（preserve-3d） 建立3D空間。translateZ() /前后移動(dòng)。scaleZ()/Z軸縮放倍數(shù)。animation-fill-mode :forwards ：當(dāng)動(dòng)畫(huà)完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）。調(diào)用