之前工作會用到這個是因為客戶覺得GIF動畫解析度太低,因為那張圖片蠻大張(1024*768)的,再跑GIF動畫時,太多顆粒狀,不好看。
想到之前有看過類似的文章,上網查了一下作法。 PS作圖寬度不能超過3萬,會只能存tiff檔,所以以單張(1024*768)像素尺寸作圖的畫,要注意動畫不要太複雜。 不過基本上網頁都是不需要太大的圖,上面工作例子算是特例~ ------------------------------------------------------------------------------------ 透過變換keyframes中的背景來實現逐格動畫,例如0%和100%分別使用不同的background就實現了最簡單的畫面切換。一般的做法是先將動畫的不同影格做成一張sprite圖(雪碧圖=>大陸翻譯),然後變換background-position來達到效果。 CSS sprite 線上產生器 : https://www.toptal.com/developers/css/sprite-generator *注意: 下圖它產生出來的順序變成第7張在第一張的位置,所以合好之後要注意一下..... 剛剛鬼打牆3小時找問題,發現是圖片的順序錯了(眼神死...)
下載的sprite圖 . (英文好難念...) 哀 . 應該第一時間發現下圖是錯的Q_Q
直接看codepen
See the Pen CSS STEPS逐格動畫 by jing (@jing-jing) on CodePen.
0 評論
發表回覆。 |