再给一个长图变动图的示例（可控）

马黑黑

图片（500*72）：

                               
登录/注册后可看大图

这是长条形动作分解图片，小精灵所做的动作是挥手打招呼。图片制作非常规整，10个动作10等分，每个动作占用的宽度一致。

代码：

1. <style>
   
2. #mybox {
   
3.         --state: running;
   
4.         margin: 50px auto;
   
5.         width: 50px;
   
6.         height: 72px;
   
7.         background: url('https://638183.freep.cn/638183/t23/btn/hvuz.webp');
   
8.         background-position: 0 0;
   
9.         animation: hello 1s steps(10,jump-none) infinite var(--state);
   
10.         cursor: pointer;
    
11. }
    
12. 
    
13. @keyframes hello { to { background-position: 100% 0; } }
    
14. </style>
    
15. 
    
16. <div id="mybox"></div>
    
17. 
    
18. <script>
    
19. let stop = true;
    
20. mybox.onclick = () => {
    
21.         mybox.style.setProperty('--state', stop ? 'paused' : 'running');
    
22.         stop = !stop;
    
23. };
    
24. </script>

复制代码

效果看楼下

马黑黑

庶民

这个好玩。点赞。

红影

好好玩哦，做在帖子里一定很有趣

雨中悄然

等宽是关键

马黑黑

雨中悄然 发表于 2023-3-20 19:15
等宽是关键

没错

千羽

马黑黑 发表于 2023-3-20 13:08
#mybox {
        --state: running;
        margin: 50px auto;

那只打招呼的大爪子挺有意思

马黑黑

千羽 发表于 2023-3-20 22:26
那只打招呼的大爪子挺有意思

爪里没糖

马黑黑

红影 发表于 2023-3-20 14:34
好好玩哦，做在帖子里一定很有趣

应该可以的吧

马黑黑

庶民 发表于 2023-3-20 14:33
这个好玩。点赞。

谢谢

红影

马黑黑 发表于 2023-3-20 22:29
应该可以的吧

看到你做到帖子里去了

马黑黑

红影 发表于 2023-3-21 16:02
看到你做到帖子里去了

谢花

红影

马黑黑 发表于 2023-3-21 19:25
谢花

黑黑厉害，能找到这么多好玩的长图。

马黑黑

红影 发表于 2023-3-21 22:17
黑黑厉害，能找到这么多好玩的长图。

随便找找都会有

红影

马黑黑 发表于 2023-3-21 23:09
随便找找都会有

切，故意气人，我去找咋就找不到

马黑黑

红影 发表于 2023-3-22 10:58
切，故意气人，我去找咋就找不到

关键词没弄对呗。逐帧图片素材试试看。

红影

马黑黑 发表于 2023-3-22 12:15
关键词没弄对呗。逐帧图片素材试试看。

嗯嗯，果然找到的更多了但都是集中在一张大图里的，很少看到长条的。

马黑黑

红影 发表于 2023-3-23 14:55
嗯嗯，果然找到的更多了但都是集中在一张大图里的，很少看到长条的。

可以手动拆开

千羽

马黑黑 发表于 2023-3-20 22:29
爪里没糖

很漂亮的爪子

马黑黑

千羽 发表于 2023-3-23 20:54
很漂亮的爪子

漂亮又不能当饭吃