Bambiland
  • Works
  • Blog
  • About
  • Search
  • Line Store
Mobile nav

css 筆記 | 用純 css 做逐格動畫

逐格動畫製作方式


1. 準備連續動作需要的圖片( 這次的範例只用到以下三張 )

     記得每一張的寬高都要一模一樣喔!

 

2. 由左至右,不重疊的情況下排列成一張圖 ( sprite sheet )

     這次因為想讓眼睛張開的時間停留比較久一點,所以有在頭尾有重複多放幾張。

 

3. 寫 html & css

    可以直接參考底下的範例。

    上面是只播放一次,底下是無限循環的版本。

 

    比較需要注意的值是 .ani_bambiWatching 的寬高必須跟你單張圖片的寬高一樣,

    thinking-infinite 100% 的 background-position 第一個值必須是步驟 2 圖的寬 *(-1),

   

    以我的範例來講:

    因為我的 sprite sheet 是 894px * 110px,

    background-position 的第一個值就是 894 * (-1) = -894px 

 

Demo
參考教學

CSS筆記-#05-ANIMATION CSS STEPS逐格動畫

 

延伸閱讀

用 Photopea ( 又稱免費版 Photoshop ) 做 gif 動畫

Prev
Next

RECOMMEND

line 貼圖分析小幫手超級 Beta 版上線

line 貼圖分析小幫手超級 Beta 版上線

如何在 ckeditor 加上程式碼片段外掛 ( code snippet plugin )

如何在 ckeditor 加上程式碼片段外掛 ( code snippet plugin )

前端超好用外掛推薦 | 常用外掛清單

前端超好用外掛推薦 | 常用外掛清單

Git 常用指令(持續更新)

Git 常用指令(持續更新)

Html 常用屬性(持續更新)

Html 常用屬性(持續更新)

  • Blog
  • About
  • Contact
shareTool
Language

Copyright © Bambiland. Made with Webblize.

  • Works
  • Blog
  • About
Language