像素小螃蟹動圖，純 SVG+CSS 不碰 GIF 幀

做什麼用

想要一隻會舉道具、戴帽子、有反應的像素螃蟹？不用逐幀畫，CSS 關鍵幀讓它在聊天裡活起來，還能導出循環 GIF。用 <rect>/<polygon>/<circle> 搭螃蟹，@keyframes 做動畫。

應用範圍

用在「做圖」這一格。只認像素螃蟹造型，其他角色得自己改代碼；動畫只支持 CSS 關鍵幀，複雜物理效果做不了。

如何使用

• 就按「像素小螃蟹動圖，純 SVG+CSS 不碰 GIF 幀」這一件來做，不要中途改風格。
• 把我手上這張按它的規矩重做，風格不許換。
• 只要成品，過程裡的解釋可以沒有。
• 做完對照應用範圍，越界的那一稿丟掉。

安裝