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文件，但没有一个显示它仍然从父网站调用图像的原因。我尝试复制粘贴源，然后将所有images / css / js放在与网站相同的结构中，但这不起作用。动画中的图像仍然是从在线网站调用的。查看js文件中的每一行代码，但我仍然无法弄明白。尝试了Cmd + S并保存了它，但它保存了代码，这些代码无法正常工作。

当我完全脱机时，图像不会被调用，但是当我上线时，图像会显示在我制作的本地主机副本中，并且它的工作方式应该如此。这就像javascript以某种方式编码，我无法弄清楚在哪里以及如何。

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

Answer 1

在他们的style.css中，他们似乎将他们的图像（如星星）定义为背景图像。很多网页设计师似乎更喜欢动画严重的图像元素，使用CSS和background-image: url(...)代替它们而不是将它们包含在<img>元素中。我不确定的一个原因是，它允许“spriting”，其中有一个图像上有大约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规则完成旋转动画。

复制这个javascript动画效果

2 个答案: