复制这个javascript动画效果

replicate this javascript animation effect

本文关键字：动画 javascript 复制      更新时间：2023-09-26

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

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

当我完全脱机时，不会调用映像，但当我联机时，映像会出现在我制作的localhost副本中，并且它按照应该的方式工作。这就像javascript是以某种方式编码的，我不知道在哪里以及如何编码。

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

在他们的style.css中，他们似乎有自己的图像，就像星星一样，被定义为背景图像。许多网页设计师似乎更喜欢动画化的图像元素，使用CSS和background-image: url(...)来代替<img>元素。一个原因，我不确定这里的情况，是它允许"spriting"，即你有一个图像，上面有大约15个重要的图形，然后使用CSS告诉<div>在某个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")并且旋转动画是用CCD_ 5 css规则来完成的。

相关文章：