蜘蛛绕圈圈

马黑黑

马黑黑

代码：

1. <style>
   
2. .spiBox {
   
3.         position: relative;
   
4.         width: 760px;
   
5.         height: 760px;
   
6. }
   
7. .spiBox img {
   
8.         position: absolute;
   
9.         width: 200px;
   
10.         height: 150px;
    
11.         left: 80px;
    
12.         top: 80px;
    
13.         transform-origin: 300px 300px;
    
14.         animation: walk 20s linear infinite;
    
15. }
    
16. @keyframes walk {
    
17.         to { transform: rotate(-360deg); }
    
18. }
    
19. </style>
    
20. 
    
21. <div class="spiBox">
    
22.         <img src="https://www.huachaowang.com/data/attachment/forum/202204/02/204928eqvb53ezaw8vhhe5.gif" alt="" />
    
23. </div>

复制代码

红影

黑黑越玩越有趣了

马黑黑

红影 发表于 2022-4-3 17:57
黑黑越玩越有趣了

这个不难的

红影

若是让它绕椭圆就要给它一个路径了吧。

马黑黑

红影 发表于 2022-4-3 17:58
若是让它绕椭圆就要给它一个路径了吧。

椭圆设置transition-origin应该可以，元素左上角xy里基点不同应该可以实现

红影

马黑黑 发表于 2022-4-3 17:58
这个不难的

虽然不难，但会想不到这样玩呀

红影

马黑黑 发表于 2022-4-3 18:02
椭圆设置transition-origin应该可以，元素左上角xy里基点不同应该可以实现

哦，居然这么简单就可以啊，还以为要规定个path呢

马黑黑

红影 发表于 2022-4-3 19:58
哦，居然这么简单就可以啊，还以为要规定个path呢

我试了，不行。rotate都是圆形轨迹。

马黑黑

红影 发表于 2022-4-3 19:58
虽然不难，但会想不到这样玩呀

嗯，想法很重要

小辣椒

这个好玩，黑黑最近几天分享的东东不少

马黑黑

小辣椒 发表于 2022-4-3 21:07
这个好玩，黑黑最近几天分享的东东不少

均匀的分享速度

红影

马黑黑 发表于 2022-4-3 20:03
我试了，不行。rotate都是圆形轨迹。

嗯，那就不椭圆了吧

红影

马黑黑 发表于 2022-4-3 20:05
嗯，想法很重要

是的，黑黑很会动脑筋

红影

小辣椒 发表于 2022-4-3 21:07
这个好玩，黑黑最近几天分享的东东不少

亲爱的，你怎么上来了，身体好点了？

加林森

学习学习

马黑黑

加林森 发表于 2022-4-3 22:56
学习学习

马黑黑

红影 发表于 2022-4-3 22:22
是的，黑黑很会动脑筋

一般般吧

马黑黑

红影 发表于 2022-4-3 22:22
嗯，那就不椭圆了吧

椭圆是可以实现的，要花点心思

加林森

马黑黑 发表于 2022-4-4 08:26