马黑黑 发表于 2022-4-3 12:49

蜘蛛走墙脚

<style>
.spiBox {
        position: relative;
        width: 760px;
        height: 500px;
}
.spiBox img {
        position: absolute;
        width: 200px;
        height: 150px;
        animation: walk 20s linear infinite;
}
@keyframes walk {
        0% { transform: rotate(-45deg); left: 0; top: 0; }
        24% { transform: rotate(-45deg); left: 0; top: 315px; }
        25% { transform: rotate(-135deg); left: 0; top: 315px; }
        49% { transform: rotate(-135deg); left: 560px; top: 315px; }
        50% { transform: rotate(-225deg); left: 560px; top: 315px; }
        74% { transform: rotate(-225deg); left: 560px; top: 0; }
        75% { transform: rotate(-315deg); left: 560px; top: 0; }
        99% { transform: rotate(-315deg); left: 0; top: 0; }
        100% { transform: rotate(-405deg); left: 0; top: 0; }
}
</style>

<div class="spiBox">
        <img src="/data/attachment/forum/202204/02/204928eqvb53ezaw8vhhe5.gif" alt="">
</div>

马黑黑 发表于 2022-4-3 12:50

代码：
<style>
.spiBox {
        position: relative;
        width: 760px;
        height: 500px;
}
.spiBox img {
        position: absolute;
        width: 200px;
        height: 150px;
        animation: walk 20s linear infinite;
}
@keyframes walk {
        0% { transform: rotate(-45deg); left: 0; top: 0; }
        24% { transform: rotate(-45deg); left: 0; top: 315px; }
        25% { transform: rotate(-135deg); left: 0; top: 315px; }
        49% { transform: rotate(-135deg); left: 560px; top: 315px; }
        50% { transform: rotate(-225deg); left: 560px; top: 315px; }
        74% { transform: rotate(-225deg); left: 560px; top: 0; }
        75% { transform: rotate(-315deg); left: 560px; top: 0; }
        99% { transform: rotate(-315deg); left: 0; top: 0; }
        100% { transform: rotate(-405deg); left: 0; top: 0; }
}
</style>

<div class="spiBox">
        <img src="/data/attachment/forum/202204/02/204928eqvb53ezaw8vhhe5.gif" alt="">
</div>

来看你 发表于 2022-4-3 15:17

跟蜘蛛玩得不亦乐乎 {:4_189:}

来看你 发表于 2022-4-3 15:17

很腻害{:4_187:}

马黑黑 发表于 2022-4-3 15:37

来看你 发表于 2022-4-3 15:17
很腻害

{:4_173:}

马黑黑 发表于 2022-4-3 15:37

来看你 发表于 2022-4-3 15:17
跟蜘蛛玩得不亦乐乎

挺好玩的吧

红影 发表于 2022-4-3 17:59

哈哈，列队，正步走！{:4_173:}

红影 发表于 2022-4-3 18:00

黑黑的蜘蛛想到哪就到哪{:4_173:}

马黑黑 发表于 2022-4-3 18:00

红影 发表于 2022-4-3 17:59
哈哈，列队，正步走！

军训一样

马黑黑 发表于 2022-4-3 18:03

红影 发表于 2022-4-3 18:00
黑黑的蜘蛛想到哪就到哪

也不是哦，还是比较难控制的，因为它有朝向。

红影 发表于 2022-4-3 19:59

马黑黑 发表于 2022-4-3 18:00
军训一样

太好玩了{:4_173:}

红影 发表于 2022-4-3 19:59

马黑黑 发表于 2022-4-3 18:03
也不是哦，还是比较难控制的，因为它有朝向。

要是找个正侧面的，应该会简单点。

红影 发表于 2022-4-3 20:01

看看这个https://pic.imgdb.cn/item/6249fd64239250f7c53ccf7b.gif

马黑黑 发表于 2022-4-3 20:02

红影 发表于 2022-4-3 19:59
要是找个正侧面的，应该会简单点。

反正吧，rotate是个不太好弄的家伙，有时候需要给子元素再弄个干爹事情才好办{:4_170:}

红影 发表于 2022-4-3 20:02

还有这个https://pic.imgdb.cn/item/6249fd8b239250f7c53d3d0c.gif

马黑黑 发表于 2022-4-3 20:03

红影 发表于 2022-4-3 20:01
看看这个

这个不错，你去试试驱动它

马黑黑 发表于 2022-4-3 20:03

红影 发表于 2022-4-3 20:02
还有这个

这个厉害

红影 发表于 2022-4-3 20:07

这个https://pic.imgdb.cn/item/6249fe97239250f7c53f8d8f.gif

红影 发表于 2022-4-3 20:07

https://pic.imgdb.cn/item/6249fec3239250f7c53fe83a.gif

马黑黑 发表于 2022-4-3 20:08

红影 发表于 2022-4-3 20:07
这个

这可是名狗
页: [1] 2 3
查看完整版本: 蜘蛛走墙脚