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

Question

你认为这个火箭使用 CSS3（动画）吗？或者，jQuery？我试图理解网页设计师编写的 CSS，但我找不到任何样式来让火箭移动。

怎么做这样的动画？如果您有，请分享您的想法和教程。我想学这种动画。谢谢！:)

Answer 1

当然不：

让我告诉你为什么，以便你下次自己弄清楚。

在 Google Chrome 中，使用火箭上方的“右键单击”->“检查元素”操作。Chrome 应该会自动选择火箭，你可以看到这样的内联内容：

<img class="floating-rocket" src="images/rocket.png" alt="Launching" style="margin-top: -90.86px; margin-left: -510.43px; ">

这部分：style="margin-top: -90.86px; margin-left: -510.43px; "动态变化，来回移动火箭。这种行为不能用 CSS 完成。您还可以通过注意受影响的标签是一个img标签并且没有 CSS 动画属性来仔细检查这一点。

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

http://demo.drythemes.com/thebigbang/js/custom/customUI.js

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

希望这可以帮助！

Answer 2

It does use Javascript animation.

Use the Chrome Dev Tools to figure it out. In Chrome, right-click on the rocket and click "Inspect element".

I recommend you to use CSS animations for this, not like this website.

Here is a a example on how to do it:

@-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;
}

Of course, don't forget to prefix :D I think this solution is better because CSS > Javascript and if you want scale or rotation, you can add that easily!

Answer 3

http://demo.drythemes.com/thebigbang/js/custom/customUI.js

有火箭动画：

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