你认为这个火箭使用 CSS3(动画)吗?或者,jQuery?我试图理解网页设计师编写的 CSS,但我找不到任何样式来让火箭移动。
怎么做这样的动画?如果您有,请分享您的想法和教程。我想学这种动画。谢谢!:)
当然不:
让我告诉你为什么,以便你下次自己弄清楚。
在 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。
希望这可以帮助!
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!
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');
});