复制此javascript动画效果

Question

我尝试了各种方法来尝试制作网站中提到的该动画的副本：

http://visitbruges.be/

我注意到源代码中的第103行是开始动画效果的位置：

<div id="sunmoon">
    <div class="star" id="s1"></div>
    <div class="star" id="s2"></div>
    <div class="star" id="s3"></div>
    <div class="star" id="s4"></div>
    <div class="star" id="s5"></div>
    <div class="star" id="s6"></div>
    <div id="sun"><div></div></div>
    <div id="moon"><div></div></div>
</div>

只有两个.js文件，但是没有一个文件显示为什么它仍然从父网站调用图像。 我尝试了复制粘贴源，然后将所有图像/ css / js放置在与网站相同的结构中，但这没有用。 动画中的图像仍从在线网站上调用。 查看了js文件中的每一行代码，但我仍然无法弄清楚。 尝试了Cmd + S并保存了它，但是它保存了无法正常工作的代码。

当我完全脱机时，图像不会被调用，但是当我在线时，图像会出现在我制作的localhost副本中，并且它应该以应有的方式工作。 就像JavaScript是以某种方式编码的，我无法弄清楚在哪里以及如何进行。

任何线索都将非常有帮助。 谢谢。

Answer 1

在style.css中，他们似乎将其图像（如星星）定义为背景图像。 许多Web设计人员似乎更喜欢使用高度动画化的图像元素，而不是将它们包含为<img>元素，而是使用CSS和background-image: url(...) 。 我不确定这种情况的一个原因是，它允许“爬行”，即您在一张图像上带有大约15个重要图形，然后使用CSS告诉<div>显示特定的该图像在特定x / y偏移处的宽度/高度。 它还允许您通过向元素中添加/删除类来更改某物的图像或该图像的特定精灵框。

希望能有所帮助。

Answer 2

动画在CSS中完成。

例如，旋转星星动画是通过style.css中的此CSS代码完成的

#header #sunmoon .star {
    animation: 5s linear 0s normal none infinite spin;
    background: url("../images/star.png") no-repeat scroll center top transparent;
    height: 26px;
    left: 0;
    position: absolute;
    top: 0;
    width: 26px;
}

请注意，星形实际上是背景图像： url("../images/star.png") ，旋转动画是通过animation css规则完成的。