Jquery 这个移动的火箭使用CSS3（动画）吗？

你认为使用CSS3（动画）吗？或者，jQuery？ 我试图理解网页设计师写的CSS，但我找不到任何能让火箭移动的风格

如何制作那种动画？ 如果你有想法，一定要和大家分享你的想法和教程。我想学这种动画。 谢谢！：）

火箭动画：

$('.floating-rocket').everyTime(10, function () {
            $(".floating-rocket").animate({
                marginTop: "+=10",
                marginLeft: "+=5"
            }, 1000, 'linear').animate({
                marginTop: "-=10",
                marginLeft: "-=5"
            }, 1000, 'linear');
    });

---

它确实使用Javascript动画

使用Chrome开发工具来解决这个问题。在Chrome中，右键单击火箭并单击“检查元素”

我建议你使用CSS动画，而不是像这个网站

下面是一个关于如何执行此操作的示例：

@-webkit-keyframes rocket {
   from {
    margin-left: -510px;
    margin-top: -90px;
   }
   to {
    margin-left: -500px;
    margin-top: -100px
   }
}
.rocket {
 -webkit-animation: rocket 1s alternate infinite linear;
}

当然，别忘了加前缀：D我认为这个解决方案更好，因为CSS>Javascript，如果你想要缩放或旋转，你可以很容易地添加它

绝对不是：

让我告诉你为什么，这样你下次就可以自己解决了

在Google Chrome中，在火箭上方使用“右键单击”->“检查元素”操作。Chrome将自动选择火箭，您可以看到类似以下内容：

这部分：

style=“顶部边距：-90.86px；左侧边距：-510.43px；”

动态变化，前后移动火箭。这种行为不能用CSS来完成。您还可以通过注意到受影响的标记是

img

标记，并且没有CSS动画属性来仔细检查这一点

内联样式的改变是Javascript的典型特征。事实上，如果您查看附加到页面的Javascript文件，您会发现：

其中包含移动火箭的实际javascript

---

希望这有帮助

顺便说一句，什么是'每次（10，'和'1000，'线性'在这里是什么意思？顺便说一句，“交替无限线性”在这里是什么意思？'alternate'使动画在完成后返回，而不是从开始开始。它基本上是动画返回到开始位置。'infinite'使动画永不停止，你可以在一定次数的重复后设置，t动画将停止。对你只想制作一次的动画很有用。“线性”是一个缓和函数，它确实可以让动画一直保持同样的速度。你也可以在这里使用其他值，也许它看起来会更好。看这里：我之所以使用它，是因为这个示例太有用了。谢谢Jonny！：）