马黑黑 发表于 2023-3-20 13:08

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

本帖最后由 马黑黑 于 2023-3-20 13:10 编辑

图片（500*72）：
https://638183.freep.cn/638183/t23/btn/hvuz.webp

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

代码：

<style>
#mybox {
      --state: running;
      margin: 50px auto;
      width: 50px;
      height: 72px;
      background: url('https://638183.freep.cn/638183/t23/btn/hvuz.webp');
      background-position: 0 0;
      animation: hello 1s steps(10,jump-none) infinite var(--state);
      cursor: pointer;
}

@keyframes hello { to { background-position: 100% 0; } }
</style>

<div id="mybox"></div>

<script>
let stop = true;
mybox.onclick = () => {
      mybox.style.setProperty('--state', stop ? 'paused' : 'running');
      stop = !stop;
};
</script>效果看楼下

马黑黑 发表于 2023-3-20 13:08

<style>
#mybox {
        --state: running;
        margin: 50px auto;
        width: 50px;
        height: 72px;
        background: url('https://638183.freep.cn/638183/t23/btn/hvuz.webp');
        background-position: 0 0;
        animation: hello 1s steps(10,jump-none) infinite var(--state);
        cursor: pointer;
}

@keyframes hello { to { background-position: 100% 0; } }
</style>

<div id="mybox"></div>

<script>
let stop = true;
mybox.onclick = () => {
        mybox.style.setProperty('--state', stop ? 'paused' : 'running');
        stop = !stop;
};
</script>

庶民 发表于 2023-3-20 14:33

这个好玩。点赞。

红影 发表于 2023-3-20 14:34

好好玩哦，做在帖子里一定很有趣{:4_187:}

雨中悄然 发表于 2023-3-20 19:15

等宽是关键

马黑黑 发表于 2023-3-20 20:02

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

没错{:4_181:}

千羽 发表于 2023-3-20 22:26

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


那只打招呼的大爪子挺有意思{:4_189:}

马黑黑 发表于 2023-3-20 22:29

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

爪里没糖

马黑黑 发表于 2023-3-20 22:29

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

应该可以的吧

马黑黑 发表于 2023-3-20 22:30

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

谢谢

红影 发表于 2023-3-21 16:02

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

看到你做到帖子里去了{:4_187:}

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

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

谢花{:4_190:}

红影 发表于 2023-3-21 22:17

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

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

马黑黑 发表于 2023-3-21 23:09

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

随便找找都会有

红影 发表于 2023-3-22 10:58

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

切，故意气人，我去找咋就找不到{:4_203:}

马黑黑 发表于 2023-3-22 12:15

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

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

红影 发表于 2023-3-23 14:55

马黑黑 发表于 2023-3-22 12:15
关键词没弄对呗。逐帧图片素材试试看。
嗯嗯，果然找到的更多了{:4_199:}但都是集中在一张大图里的，很少看到长条的。

马黑黑 发表于 2023-3-23 17:37

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

可以手动拆开

千羽 发表于 2023-3-23 20:54

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

很漂亮的爪子{:4_173:}

马黑黑 发表于 2023-3-23 21:22

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

漂亮又不能当饭吃
页: [1] 2
查看完整版本: 再给一个长图变动图的示例（可控）