0

我尝试了各种方法来复制网站中提到的这个动画：

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 以某种方式编码，我无法弄清楚在哪里以及如何。

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

4

2 回答 2

0

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

希望有帮助。

于 2013-07-26T13:56:25.230 回答
0

动画是用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") 旋转动画是使用animationcss 规则完成的。

于 2013-07-26T13:57:20.543 回答