复制此javascript动画效果

我尝试了各种方法，试图复制网站中提到的动画：

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并保存了它，但它保存的代码没有按应有的方式工作

当我完全脱机时，图像不会被调用，但当我联机时，图像会显示在我制作的本地主机副本中，并且它会以应有的方式工作。这就像javascript是以某种方式编码的，我不知道在哪里以及如何编码

---

任何线索都会非常有用。谢谢。

在他们的style.css中，他们的图像像星星一样，被定义为背景图像。许多网页设计师似乎更喜欢使用大量动画图像元素，使用CSS和

背景图像：url（…）

代替

元素。我不确定的一个原因是，它允许“spriting”，即一个图像上有大约15个重要图形，然后使用CSS告诉

以特定的x/y偏移显示该图像的特定宽度/高度。它还允许您通过向元素添加/删除类来更改某个对象的图像或该图像的特定精灵框

---

希望有帮助。

动画是用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”）

---

旋转的动画是通过

动画
css规则来完成的。
自己尝试一下，也许只是在谷歌上搜索复制粘贴脚本，或者至少尝试理解链接页面上的脚本（例如，设置断点是个好主意）Firefox Inspector的一些检查表明，太阳和月亮有一个CSS动画，名为
spin
。此外，图像由
背景
属性加载，该属性来自
/images/
@EliasVanOotegem，我试图理解脚本。我浏览了js中的每一行代码，但我仍然无法理解如何从在线网站调用这些图像。谢谢你。@Pietu1998我很关心这些建筑。星星、太阳和月亮在本地主机中运行良好。这是正在从现场网站调用的建筑物，我不知道为什么。我浏览了js/css文件，似乎没有任何有意义的函数。你能快点查一下吗？@nikitagupta好的，我只是猜是太阳、月亮和星星，因为你在帖子中包含了代码。另外，现在我已经查看了JS文件（有很多），页面动画系统看起来相当复杂；可能没时间多看了。谢谢。我无法得到的是位于“images/buildings”文件夹中的建筑物和其他图像，如belfort.png、hotel.png、gentpoort.png等，尽管我已经复制了localhost中的所有内容，但它们始终从父网站加载。在中复制了网站后，图像被从etc调用。我浏览了zomer.min.js，它有图像和.css文件的链接，但不理解为什么它仍然从在线网站调用。谢谢。然而，我说的是belfort.png、hotel.png、gentpoort.png等，它们位于“images/buildings”文件夹中，虽然我复制了localhost中的所有内容，但总是从父在线网站加载。我已经浏览了zomer.min.js，它有图像和.css文件的链接，但不明白为什么它仍然从在线网站调用。他们是怎么做到的？正在从本地主机调用所有其他文件。