成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

利用 CSS animation 和 CSS sprite 制作動(dòng)畫

陳偉 / 2668人閱讀

摘要：今天給大家介紹一個(gè)使用配合雪碧圖來(lái)制作動(dòng)畫的方法，可以做出類似于動(dòng)畫的效果。利用雪碧圖來(lái)制作動(dòng)畫使用了里面的一個(gè)重要的函數(shù)。

CSS3 大大強(qiáng)化了制作動(dòng)畫的能力，但是如果要做出圖案比較復(fù)雜的動(dòng)畫，選擇 GIF 依然是一個(gè)不錯(cuò)的選擇。今天給大家介紹一個(gè)使用 CSS animation 配合雪碧圖(CSS sprite)來(lái)制作動(dòng)畫的方法，可以做出類似于 GIF 動(dòng)畫的效果。

CSS3 Animation steps函數(shù)

首先看看，CSS3 animation的兼容性?？梢钥吹交旧现髁鳛g覽器都支持了 animation 屬性，chrome、safari、opera和移動(dòng)端的瀏覽器帶上前綴就可以支持。

利用雪碧圖來(lái)制作動(dòng)畫使用了 CSS3 Animation 里面的一個(gè)重要的函數(shù) steps。

animation 本身是一個(gè)復(fù)合的屬性，它包含了 animation-name，animation-timing-function，animation-iteration-count，animation-direction，animation-play-state，animation-fill-mode 六個(gè)屬性。

steps 就是屬于 animation-timing-function 中的一個(gè)函數(shù)。

animation-timing-function 平時(shí)我們用的比較多的是默認(rèn)的一些動(dòng)畫曲線值 ease、ease-in 等等。而 steps 則可以由我們控制動(dòng)畫被分成多少個(gè)部分進(jìn)行。

steps(n,[start|end]) 傳入一到兩個(gè)參數(shù)，第一個(gè)參數(shù)意思是把動(dòng)畫分成 n 等分，然后動(dòng)畫就會(huì)平均地運(yùn)行。第二個(gè)參數(shù) start 表示從動(dòng)畫的開頭開始運(yùn)行，相反，end 就表示從動(dòng)畫的結(jié)尾開始運(yùn)行，默認(rèn)值為 end。

因此，我們利用雪碧圖和 steps 函數(shù)制作動(dòng)畫的原理就是，雪碧圖包含了動(dòng)畫圖片的每一幀，然后利用 steps 函數(shù)確定固定時(shí)間內(nèi)動(dòng)畫運(yùn)行的部分等于動(dòng)畫的幀數(shù)，從而實(shí)現(xiàn)動(dòng)畫效果。

動(dòng)畫實(shí)例

用猥瑣的兔斯基做例子╮(￣▽￣")╭

首先我們要切圖，把動(dòng)畫的每一幀切成這樣的圖:

切圖如果大家不想折騰，推薦在線合并雪碧圖的工具。

然后寫 keyframes

@-webkit-keyframes tuski {
    0% {
        background-position:0;
    }
    100% {
        background-position: -576px 0;
    }
}
@-moz-keyframes tuski {
    0% {
        background-position:0;
    }
    100% {
        background-position: -576px 0;
    }
}
@keyframes tuski {
    0% {
        background-position:0;
    }
    100% {
        background-position: -576px 0;
    }
}

調(diào)用動(dòng)畫

#tuski {
    -webkit-animation: tuski .5s steps(12) infinite;
    -moz-animation: tuski .5s steps(12) infinite;
    animation: tuski .5s steps(12) infinite;
}

與 GIF 相比，這種動(dòng)畫可以讓我們手動(dòng)調(diào)整動(dòng)畫運(yùn)行的速度。

點(diǎn)這里看完整的代碼。

大功告成。

感謝您的閱讀，有不足之處請(qǐng)為我指出。

本文同步于我的個(gè)人博客 http://blog.acwong.org/2015/03/23/make-animation-with-steps-and-css-sprite/

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111043.html

相關(guān)文章

  • CSS3幀動(dòng)畫

    摘要：在制作幀動(dòng)畫的時(shí)候，一般采用雪碧圖的方式，通過(guò)切換圖片的位置，使其連續(xù)播放，從而形成動(dòng)畫。使用改造之后的代碼，利用偽類進(jìn)行背景填充，然后控制該元素移動(dòng)來(lái)實(shí)現(xiàn)逐幀動(dòng)畫。 在制作幀動(dòng)畫的時(shí)候，一般采用雪碧圖的方式，通過(guò)切換圖片的位置，使其連續(xù)播放，從而形成動(dòng)畫。 雪碧圖 雪碧圖的制作可以使用compass制作，還可以使用一些小工具進(jìn)行制作，提供一個(gè)在線制作雪碧圖的網(wǎng)站。CSS Sprite...

    Nino 評(píng)論0 收藏0

  • 進(jìn)入 CSS3 動(dòng)畫

    摘要：我最近有機(jī)會(huì)深入研究一些動(dòng)畫。下一步是添加動(dòng)畫效果并確定它們何時(shí)發(fā)生。創(chuàng)建關(guān)鍵幀后，您可以將動(dòng)畫稱為屬性。點(diǎn)擊動(dòng)畫使用上面的關(guān)鍵幀和動(dòng)畫語(yǔ)法，這里是我用來(lái)在本頁(yè)頂部的中制作動(dòng)畫的代碼。 我最近有機(jī)會(huì)深入研究一些CSS3動(dòng)畫。 我使用了像animate.css這樣的庫(kù)，用javascript完成了動(dòng)畫，但從未做過(guò)任何自定義的CSS3工作 原文 任務(wù) 我們最近在SeatGeek更新了我們的...

    lindroid 評(píng)論0 收藏0

  • 記一次游戲H5開發(fā)經(jīng)驗(yàn)

    摘要：為了實(shí)現(xiàn)物體隨機(jī)出現(xiàn)的效果，讓每個(gè)物體隨機(jī)多少秒后開始出現(xiàn)最后一個(gè)物體出現(xiàn)完，多少秒后出現(xiàn)結(jié)束畫面等等，需要理清楚各個(gè)定時(shí)器的關(guān)系，并對(duì)其添加語(yǔ)義化良好的標(biāo)記，及時(shí)對(duì)未完結(jié)的定時(shí)器進(jìn)行清除，防止定時(shí)器帶來(lái)的意想不到的問題。 快到年終的時(shí)候做了一個(gè)以游戲形式展示的h5活動(dòng)頁(yè)，第一次嘗試使用js寫小游戲，很有趣的過(guò)程，很寶貴的經(jīng)驗(yàn)。 效果圖 直接上個(gè)效果的gif圖，游戲的一小部分效果，錄出...

    xingpingz 評(píng)論0 收藏0

  • 記一次游戲H5開發(fā)經(jīng)驗(yàn)

    摘要：為了實(shí)現(xiàn)物體隨機(jī)出現(xiàn)的效果，讓每個(gè)物體隨機(jī)多少秒后開始出現(xiàn)最后一個(gè)物體出現(xiàn)完，多少秒后出現(xiàn)結(jié)束畫面等等，需要理清楚各個(gè)定時(shí)器的關(guān)系，并對(duì)其添加語(yǔ)義化良好的標(biāo)記，及時(shí)對(duì)未完結(jié)的定時(shí)器進(jìn)行清除，防止定時(shí)器帶來(lái)的意想不到的問題。 快到年終的時(shí)候做了一個(gè)以游戲形式展示的h5活動(dòng)頁(yè)，第一次嘗試使用js寫小游戲，很有趣的過(guò)程，很寶貴的經(jīng)驗(yàn)。 效果圖 直接上個(gè)效果的gif圖，游戲的一小部分效果，錄出...

    GitChat 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<