本文主要介紹逐幀動(dòng)畫的制作方法(逐幀動(dòng)畫的制作原理和方法)，下面一起看看逐幀動(dòng)畫的制作方法(逐幀動(dòng)畫的制作原理和方法)相關(guān)資訊。
我們也可以用最基礎(chǔ)的css實(shí)現(xiàn)網(wǎng)頁動(dòng)畫、flas、javascript的效果圖。做一個(gè)簡單的gif動(dòng)畫圖，上圖是效果圖。
要用css3制作動(dòng)畫，你需要知道兩個(gè)css屬性。
一個(gè)是@keyframes，因?yàn)樗拗屏薱ss樣式和動(dòng)畫從當(dāng)前樣式到新樣式的變化過程。當(dāng)瀏覽器兼容時(shí)，您需要將前綴webkit、ms或moz添加到關(guān)鍵幀。
關(guān)鍵幀中有兩個(gè)屬性，從和到。from中的內(nèi)容定義動(dòng)畫開始的狀態(tài)，to記錄動(dòng)畫結(jié)束的狀態(tài)。@keyframes后跟動(dòng)畫的名稱。此名稱可以自定義。例如，如果我取gifname，當(dāng)頁面上的標(biāo)簽元素使用這個(gè)動(dòng)畫時(shí)，就需要這個(gè)名稱。
@keyframes gifname{來自{background:紅；}到{background:黃；} } @webkit關(guān)鍵幀gifname/* safari和chrome */{來自{background:紅；}到{background:黃；}}from和to也可以用來表示動(dòng)畫過程。如果能使用百分比，可以更豐富地定義動(dòng)畫內(nèi)容。
@ key frames gif name { 0% {background:紅；} 25% {background:黃；} 50% {background:藍(lán)；} 100% {background:綠；} } @webkit關(guān)鍵幀gifname/* safari和chrome */{ 0% {background:紅；} 25% {background:黃；} 50% {background:藍(lán)；} 100% {background:綠；}}比如我在在div元素上使用此動(dòng)畫。
div { animation: gif nam: gif name 5s；/* safari和chrom: gif nam:·吉夫納姆；animationduration: 2s；animationtimingfunction:起步；animationd: 1s；animationiterationcount:無限；animationdirection:候補(bǔ)；動(dòng)畫名稱:動(dòng)畫名稱。
這里是引入@k:默認(rèn)為 輕松 。
線性:線性過渡。相當(dāng)于貝塞爾曲線(0.0，0.0，1.0，1.0)
輕松:平穩(wěn)過渡。相當(dāng)于貝塞爾曲線(0.25，0.1，0.25，1.0)
漸入:從慢到快。相當(dāng)于貝塞爾曲線(0.42，0，1.0，1.0)
放松:從快到慢。相當(dāng)于貝塞爾曲線(0，0，0.58，1.0)
漸入漸出:從慢到快，再到慢。相當(dāng)于貝塞爾曲線(0.42，0，0.58，1.0)
三次貝塞爾曲線: ;在三次貝塞爾函數(shù)中自己的值?？赡艿闹凳菑?到1的數(shù)值。
st:立即跳轉(zhuǎn)到動(dòng)畫的每個(gè)結(jié)束幀的狀態(tài)。
動(dòng)畫延遲:動(dòng)畫延遲時(shí)間
默認(rèn)值為0。
動(dòng)畫迭代計(jì)數(shù):動(dòng)畫循環(huán)的次數(shù)。
默認(rèn)值為1。屬性值infinite表示無數(shù)次。
animationdirection:動(dòng)畫是否在下一個(gè)循環(huán)中反向播放。
屬性值
正常:正常方向
反向:向相反的方向跑
交替:動(dòng)畫先正常運(yùn)行，然后反方向運(yùn)行，繼續(xù)交替運(yùn)行。
交替反向:動(dòng)畫先反向運(yùn)行，再正向運(yùn)行，繼續(xù)交替運(yùn)行。
還有另外兩個(gè)屬性:
animationfillmod:設(shè)置動(dòng)畫播放后的效果。
重視:
non:初始風(fēng)格，沒有改變默認(rèn)行為。(默認(rèn)行為)
保持forwards:動(dòng)畫播放后的最后狀態(tài)；
保持backwards:結(jié)束后的第一狀態(tài)；
動(dòng)畫播放狀態(tài):檢索或設(shè)置對象動(dòng)畫的狀態(tài)。
屬性值
animationplaystat: running |暫停；
running:運(yùn)動(dòng)
paus:被停職了。
animationplaystat:pause；當(dāng)鼠標(biāo)經(jīng)過時(shí)，動(dòng)畫停止，當(dāng)鼠標(biāo)移開時(shí)，動(dòng)畫繼續(xù)。
到目前為止，我們都已經(jīng)學(xué)習(xí)了屬性，并開始練習(xí)該部分:
首先，準(zhǔn)備好我們需要的圖片。我在這里用了九張圖。
我把九張圖片放在九個(gè)li/li標(biāo)簽里。所有l(wèi)i標(biāo)簽均附有ul標(biāo)簽。然后把ul放在一個(gè)div標(biāo)簽里，div設(shè)置為一個(gè)圖片的大小，然后一幀一幀的移動(dòng)ul元素實(shí)現(xiàn)動(dòng)畫。
最后的處理是隱藏div元素之外的部分。然后我就有了文章開頭的圖。
最重要的是，代碼:
！語言= 恩 頭元字符集=amputf8 meta name = 視口 內(nèi)容= 寬度=設(shè)備寬度，初始比例= 1.0 meta httpequiv = xua兼容 內(nèi)容= ie =邊緣 全音階的第七音tlecss動(dòng)畫/titl: 0；padding: 0；}李{ liststyl:無；marginright: 0；} # div { width : 100p x；height cho 39@ . com 100p x；bord: 1px固體# fffov:隱藏；margin: 100px 0 0 100px；} # box { width : 900 px；height cho 44@ . com 100p x；bord: 1px固體# fffov: visibl: r: my first 2s st: */mozanimation : my first 2s stepstart 1s無限；/* safari和chrom: */w: my first 2s st: */oanimation : my first 2s st: 98 px；height cho 57@ . com 100p x；bord: 1px solid # fff；}李img { width : 100%；height cho 60@ . com 100%；} @關(guān)鍵幀s my first { 0% { l: 0px；top : 0；} 11.1% { l:100px；top : 0；} 22.2% { l:200 px；top : 0；} 33.3% { l:300 px；top : 0；} 44.4% { l:400 px；top : 0；} 55.5% { l:500 px；top : 0；} 66.6% { l:600 px；top : 0；} 77.7% { l:700 px；top : 0；} 88.8% { l:800 px；top : 0；} 100% { l: 0px；top : 0；} } @mozk: 0 px；top : 0；} 11.1% { l:100px；top : 0；} 22.2% { l:200 px；top : 0；} 33.3% { l:300 px；top : 0；} 44.4% { l:400 px；top : 0；} 55.5% { l:500 px；top : 0；} 66.6% { l:600 px；top : 0；} 77.7% { l:700 px；top:0} 88.8% { l:800 px；top : 0；} 100% { l: 0px；top : 0；} } @webkit關(guān)鍵幀myfirst /* safari和chrom: 0px；top : 0；} 11.1% { l:100px；top : 0；} 22.2% { l:200 px；top : 0；} 33.3% { l:300 px；top : 0；} 44.4% { l:400 px；top : 0；} 55.5% { l:500 px；top : 0；} 66.6% { l:600 px；top : 0；} 77.7% { l:700 px；top : 0；} 88.8% { l:800 px；top : 0；} 100% { l: 0px；top : 0；} } @o關(guān)鍵幀my first/* op: 0 px；top : 0；} 11.1% { l:100px；top : 0；} 22.2% { l:200 px；top : 0；} 33.3% { l:300 px；top : 0；} 44.4% { l:400px；top : 0；} 55.5% { l:500 px；top : 0；} 66.6% { l:600 px；top : 0；} 77.7% { l:700 px；top : 0；} 88.8% { l:800 px；top : 0；} 100% { l: 0px；top : 0；} }/style/head body div id = div ul id = 盒子 liimg src = 。/img/o1 . jpg //李liimg src = 。/img/o2 . jpg //李liimg src = 。/img/o3 . jpg //李liimg src = 。/img/o4 . jpg //李liimg src = 。/img/o5 . jpg //李liimg src = 。/img/o6 . jpg //李liimg src = 。/img/o7 . jpg //李liimg src = 。/img/o8 . jpg //李liimg src = 。/img/o9 . jpg //li /ul /div/body/html最后，動(dòng)畫不支持ie9及更早版本的ie瀏覽器。
了解更多逐幀動(dòng)畫的制作方法(逐幀動(dòng)畫的制作原理和方法)相關(guān)內(nèi)容請關(guān)注本站點(diǎn)。