Html 如何创建一个像BaBaDum这样的动画网站

我妻子的生日快到了，我想创建一个类似的网站 巴巴杜姆：

我在学校学过HTML5，但从未学习过它创建动画网站的能力

我如何着手制作这样一个网站？我必须使用Flash还是完全使用HTML5渲染？通过查看源代码，可以了解到一些关于GoogleAPI、ajax和jquery的信息，它们对于制作这样一个动画网站至关重要吗

---

谢谢

虽然你的问题非常广泛，但我会尽力帮助你

据我所知，你链接的网站是由HTML、CSS和JavaScript组成的。使用Flash的网站越来越少，你也不应该使用它——它终于开始消亡了

准备做大量的研究——你必须学习CSS3（风格、位置和动画）、JavaScript（“JS”，它对于充满交互元素的网站非常有用——声音、视频等）和jQuery（特殊的JS库，它包含几十个预先编写的函数，可以使web开发更容易、更快）。如果我是你，我会访问，这是一个免费教授这些语言的网站。完成这些课程不应该超过20-30个小时，它会给你一个坚实的基础开始

当然，所需的技能水平取决于您想要构建的站点类型。一个简单的动画网站可以只用HTML和CSS3构建。对于更复杂的站点，您很可能必须使用JS和jQuery

以下是您应该做的：

• 从一个固定的想法开始：你想知道你想要创建什么，特别是因为（可能）这将是你的第一个严肃的项目。例如，在纸上涂鸦，写下你对按下一个按钮会发生什么的想法

• 把网站分成小块：你不会有一天完成它，所以你应该集中精力一步一步地建设网站。创建一个按钮，使用CSS使其富有想象力，然后给它一些动画。如果您满意，可以继续下一部分

• 调查：很可能你不会是第一个按照自己的方式做自己想做的事情的人。使用谷歌，你会发现数百种不同的教程，从简单的东西（构建布局）到更复杂的东西（纯CSS动画、画布等）。如果您陷入困境，Stackoverflow会有所帮助，但您必须更具体地回答问题。现在这个问题很糟糕，我之所以写这个回复，是因为我也知道需要帮助，并且意识到没有人会因为我的问题太广泛而帮助我。在23:40，我没有更好的事情要做：）试着找出是否有人已经问过你的问题——这是可能的，这样你可以立即找到答案

• 研究源代码：如果你正在使用Chrome，你可以点击网站上的任何元素来查看其代码——你只需从上下文菜单中选择“Inspect element”（使用其他浏览器还有其他方法）。它将向您显示HTML、CSS属性甚至相关的JS代码。如果你想尝试一下，你可以修改这些值（对CSS特别有用）——这些更改只对你可见，并且在你刷新页面时被删除。如果您找到了想要包含在页面上但不知道如何执行的完美按钮动画，则此方法非常有用

• 备份你的工作！每天为你的站点创建一个备份副本，这样如果你把事情搞得一团糟（每个人都会遇到这种情况，特别是如果你像我一样忙的话），你就不必从头开始。这种情况以前发生在我身上，如果你在使用别人的代码（从教程中，我不是说偷窃），它也可能发生在你身上

---

还有，祝你好运

虽然你的问题非常广泛，但我会尽力帮助你

据我所知，你链接的网站是由HTML、CSS和JavaScript组成的。使用Flash的网站越来越少，你也不应该使用它——它终于开始消亡了

准备做大量的研究——你必须学习CSS3（风格、位置和动画）、JavaScript（“JS”，它对于充满交互元素的网站非常有用——声音、视频等）和jQuery（特殊的JS库，它包含几十个预先编写的函数，可以使web开发更容易、更快）。如果我是你，我会访问，这是一个免费教授这些语言的网站。完成这些课程不应该超过20-30个小时，它会给你一个坚实的基础开始

当然，所需的技能水平取决于您想要构建的站点类型。一个简单的动画网站可以只用HTML和CSS3构建。对于更复杂的站点，您很可能必须使用JS和jQuery

以下是您应该做的：

• 从一个固定的想法开始：你想知道你想要创建什么，特别是因为（可能）这将是你的第一个严肃的项目。例如，在纸上涂鸦，写下你对按下一个按钮会发生什么的想法

• 把网站分成小块：你不会有一天完成它，所以你应该集中精力一步一步地建设网站。创建一个按钮，使用CSS使其富有想象力，然后给它一些动画。如果您满意，可以继续下一部分

• 调查：很可能你不会是第一个按照自己的方式做自己想做的事情的人。使用谷歌，你会发现数百种不同的教程，从简单的东西（构建布局）到更复杂的东西（纯CSS动画、画布等）。如果您陷入困境，Stackoverflow会有所帮助，但您必须更具体地回答问题。现在这个问题很糟糕，我之所以写这个回复，是因为我也知道需要帮助，并且意识到没有人会因为我的问题太广泛而帮助我。而我