蜘蛛走墙脚

马黑黑

马黑黑

代码：

1. <style>
   
2. .spiBox {
   
3.         position: relative;
   
4.         width: 760px;
   
5.         height: 500px;
   
6. }
   
7. .spiBox img {
   
8.         position: absolute;
   
9.         width: 200px;
   
10.         height: 150px;
    
11.         animation: walk 20s linear infinite;
    
12. }
    
13. @keyframes walk {
    
14.         0% { transform: rotate(-45deg); left: 0; top: 0; }
    
15.         24% { transform: rotate(-45deg); left: 0; top: 315px; }
    
16.         25% { transform: rotate(-135deg); left: 0; top: 315px; }
    
17.         49% { transform: rotate(-135deg); left: 560px; top: 315px; }
    
18.         50% { transform: rotate(-225deg); left: 560px; top: 315px; }
    
19.         74% { transform: rotate(-225deg); left: 560px; top: 0; }
    
20.         75% { transform: rotate(-315deg); left: 560px; top: 0; }
    
21.         99% { transform: rotate(-315deg); left: 0; top: 0; }
    
22.         100% { transform: rotate(-405deg); left: 0; top: 0; }
    
23. }
    
24. </style>
    
25. 
    
26. <div class="spiBox">
    
27.         <img src="/data/attachment/forum/202204/02/204928eqvb53ezaw8vhhe5.gif" alt="">
    
28. </div>

复制代码

来看你

跟蜘蛛玩得不亦乐乎

来看你

很腻害  

马黑黑

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

马黑黑

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

挺好玩的吧

红影

哈哈，列队，正步  走！

红影

黑黑的蜘蛛想到哪就到哪

马黑黑

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

军训一样

马黑黑

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

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

红影

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

太好玩了

红影

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

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

红影

看看这个

                               
登录/注册后可看大图

马黑黑

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

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

红影

还有这个

                               
登录/注册后可看大图

马黑黑

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

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

马黑黑

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

这个厉害

红影

这个

                               
登录/注册后可看大图

红影

                               
登录/注册后可看大图

马黑黑

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

这可是名狗