成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

利用 CSS animation 和 CSS sprite 制作動畫

陳偉 / 2746人閱讀

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

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

CSS3 Animation steps函數(shù)

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

利用雪碧圖來制作動畫使用了 CSS3 Animation 里面的一個重要的函數(shù) steps。

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

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

animation-timing-function 平時我們用的比較多的是默認的一些動畫曲線值 ease、ease-in 等等。而 steps 則可以由我們控制動畫被分成多少個部分進行。

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

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

動畫實例

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

首先我們要切圖，把動畫的每一幀切成這樣的圖:

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

然后寫 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)用動畫

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

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

點這里看完整的代碼。

大功告成。

感謝您的閱讀，有不足之處請為我指出。

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/111043.html

相關(guān)文章

  • CSS3幀動畫

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

    Nino 評論0 收藏0

  • 進入 CSS3 動畫

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

    lindroid 評論0 收藏0

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

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

    xingpingz 評論0 收藏0

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

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

    GitChat 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<