Mozilla Hacks

Firefox 4 演示：炫酷的 CSS3 星球馆

Avatar photo 作者：Paul Rouget

发布日期：2011 年 3 月 16 日 类别：@font-face、CSS、功能、精选文章、精选演示 和 Firefox

嘿，像素爱好者们！来看看这个华丽的 CSS3 演示：星球馆，由 LittleWorkshop 团队 (@glecollinet & @whatthefranck) 完成。

planetarium

屏幕录制

Youtube 链接.

华丽的动画

这个演示展示的主要功能是 CSS3 过渡。欢迎屏幕和星球屏幕之间的动画，以及不同星球之间的动画，都是由过渡驱动的。但在这个演示中还有很多小效果。看看 Twitter 按钮、标尺、信用页面或返回按钮。这些效果也是 CSS3 过渡。

另一个有趣的细节。在星球旁边，你有一些不同的动画。动画的播放方式取决于你是从左侧、右侧还是从主屏幕进入。

自己试试：从主屏幕点击地球。看到从顶部“落下”的文字了吗？现在，去火星，然后回到地球。现在文字是从右边“飞”过来的。设计师会喜欢这样：）

漂亮的字体

@font-face 允许你使用自己的字体进行创意设计。结合 text-shadow 和 font-feature-settings，你可以精确地打造和设计你的排版内容。

轮到你了！

这些都是你可以立即使用的功能。
这个演示在 Firefox 4、Safari 和 Chrome 中完美运行。此外，过渡和 font-face 也很容易降级。去吧，查看 源代码，阅读 文档，如果你对自己的代码感到自豪，请随时 提交演示！

关于 Paul Rouget

Paul 是 Firefox 开发人员。

更多来自 Paul Rouget 的文章...

27 条评论

  1. Lucas

    可怜的冥王星。

    2011 年 3 月 16 日 上午 10:57

  2. Matt

    现在的网页发展太棒了！

    Mozilla，你们太棒了，继续努力吧。

    2011 年 3 月 16 日 上午 11:15

  3. j2

    在 Safari 上放大和缩小（在 Safari 上）并不完全符合预期（注意空间视图 - 放大会导致星球变小）。这是我们对 CSS3 的预期吗？

    2011 年 3 月 16 日 下午 12:16

    1. Rich

      不，只是他们决定调整星球的大小，以便它们始终适合屏幕。这意味着放大会使星球重新排列以适应。

      他们不必这样编码，但我无法想到更好的设计这个演示的方法，而不会有这种行为。

      它与 CSS3 无关。

      2011 年 3 月 16 日 下午 12:57

  4. vdo

    非常令人印象深刻，但对我来说，这不是一个 CSS3 演示。这是一个 CSS3+HTML5+JS 演示。我认为我们（开发人员）必须区分新的网络技术。你怎么看？

    2011 年 3 月 16 日 下午 12:55

  5. Evan Reeves

    这意味着网络上的相关且有用的内容将继续被花哨的动画信息图表所侵蚀吗？

    2011 年 3 月 16 日 下午 5:28

  6. Mr.doob

    太美了！

    2011 年 3 月 16 日 晚上 8:17

  7. jonas

    看起来真的很棒！

    但我认为，我发现了一个小错误：“查看信用”链接从主屏幕开始仍然可以点击（虽然不可见）当放大到一个星球时（可点击区域位于“距离太阳”标签附近，具体位置取决于浏览器窗口的大小）。

    2011 年 3 月 16 日 晚上 9:07

  8. Ken Saunders

    简直太棒了！非常锐利。非常酷。

    天王星真的很大。
    也许你应该去看医生。:|
    （有些人永远长不大）

    可怜的冥王星。
    +1

    2011 年 3 月 16 日 晚上 11:04

  9. Ken Saunders

    这个演示在全屏模式下看起来很棒，在放大时也能很好地缩放。
    我爱它。

    通往演示的小票链接也很酷。

    2011 年 3 月 16 日 晚上 11:20

  10. hugo

    对于水星，它说“......是[...]太阳系[...]密度最大的行星”。
    而对于地球，它说“......是[...]太阳系八大行星中[...]密度最大的[...]”。

    可能只有一颗行星是密度最大的（提示：http://en.wikipedia.org/wiki/List_of_Solar_System_objects_in_hydrostatic_equilibrium#Planets）

    2011 年 3 月 16 日 晚上 11:31

  11. Henry

    我很抱歉要写这个，但我试过在 firefox 4.0 和 Chrome 10 上运行演示。结果在 Chrome 上要好得多（在 firefox 上更慢），有人能解释一下吗？

    2011 年 3 月 17 日 上午 9:46

  12. Kawika

    哇。这真是...颠覆性的。

    2011 年 3 月 17 日 上午 11:15

  13. Ken Saunders

    这意味着网络上的相关且有用的内容将继续被花哨的动画信息图表所侵蚀吗？

    哦，兄弟。
    是的，很快就会直接把你脑子里面的所有色情内容都播出来。

    问问一个学生他们是否更愿意以这种方式学习太阳系，还是通过书籍或维基百科学习。
    问问任何人，他们是否更愿意通过视觉交互的方式学习任何东西，还是通过静态的方式学习。

    我很抱歉要写这个，但我试过在 firefox 4.0 和 Chrome 10 上运行演示。结果在 Chrome 上要好得多（在 firefox 上更慢）。

    那是因为 Chrome 很棒，而 Firefox 很烂！
    说真的，为什么 Mozilla 还要费心呢？
    上帝本人也比不上 Chrome。

    2011 年 3 月 18 日 上午 8:46

  14. nemo

    @vdo
    如果你禁用 javascript，你会发现它确实是一个 CSS 演示。嗯，实际上是 CSS + SVG，但有很多 CSS。

    诀窍是，我给那些家伙发了邮件，你必须先进入星球馆，*然后*在选项中禁用 javascript，因为几乎唯一不能优雅降级的部分是前端加载屏幕。

    你不能在 firebug 中禁用，因为它会强制重新加载。

    但无论如何，一旦你完成了，你会发现它确实主要是 CSS。相当令人印象深刻。

    2011 年 3 月 21 日 上午 7:30

  15. vdo

    @nemo
    “*然后*禁用 javascript”：好的，这就是我说的！这个演示需要 javascript...

    2011 年 3 月 21 日 上午 9:09

  16. nemo

    嗯。这就是我的观点。他们实际上*不需要* javascript。
    他们只是疏忽了使加载屏幕优雅降级。
    几乎整个演示都是 CSS + SVG。
    有一些统计数据是在 javascript 中加载的（尽管它们也可以降级为非 javascript，因为 JS 只是用于一些旋转的数字）。

    无论如何。在一个加载屏幕上，仅仅有点粗心是优雅地降级，而用 javascript 完成整个事情则是另外一回事。它仍然是一个很棒的 CSS/SVG 演示。

    2011 年 3 月 23 日 下午 1:41

  17. Antwan

    NEXT/PREVIOUS 光标粘性箭头概念很棒：D

    2011 年 3 月 24 日 上午 9:50

  18. Stephen

    有谁在 IE9.0 中试过这个吗... 太可惜了！

    2011 年 3 月 25 日 上午 6:33

  19. badlybrad

    我认为这是一个很棒的格式。我喜欢行星排列的方式，但我可能还会让行星围绕太阳旋转，当用户将鼠标悬停在行星上时，它停止绕太阳旋转，然后弹出一个包含所有NASA可以提供的行星信息的屏幕。我喜欢天文学，这可以将你的好主意变成现实的想法，而不是行星排列和滚动。这只是一个想法，因为我坦率地说做不了，但我现在才在大学里学习如何使用笔记本2和html。看看这个或其他任何网页，我可以得到一些更先进的想法，但我自己做不了。除此之外，我认为这是一个非常好的主意，因为大多数人喜欢网页上的物体和惊人的图像展示。就像没有人喜欢阅读，但喜欢看到文本和图像中显示的视觉效果。不过我真的很喜欢这种格式。

    2011年4月20日 下午10:57

  20. Carlo Rizzante

    嗯，ehj，这很酷。甜美的图形，也是。

    这也是时候了，普通老百姓将花几分钟思考外面的世界。所以，欢迎你的好工作！

    我喜欢它，谢谢。
    Carlo

    2011年4月27日 上午4:44

  21. JM

    太棒了！我会用HTML 5和CSS 3和SVG构建所有内容，并告诉人们停止使用Internet Explorer......哦，对不起，但我不得不再次扮演扫兴的角色。你知道的，总会有一个，对此表示抱歉。:-)

    这甚至在IE 8中都不能优雅地降级，它只是在那里可怜地旋转着。我讨厌这些演示，因为它们向我们展示了我们*可以*在几年后，也许是IE赶上其他浏览器，IE用户赶上最新IE的时候，在商业上做到的事情。除非你的商业受众是网页设计师，否则你首先要确保网站至少可以在IE中使用。如果你没有这个，世界上所有的酷炫东西都弥补不了。(当然，这是一个专门托管在旨在进行Firefox演示的域上的网站，它没有商业目标——我并不是说这个网站本身有什么问题，但它确实说明了这个问题。)

    就像被展示了一辆很棒的汽车，但不幸的是它还不能在高速公路上行驶。当然，你可以用它玩得开心，但它将仍然是一项爱好。这些网站越酷(这个网站无疑非常酷，和金星的酸云层一样酷)，这种刺痛感就越强烈。最大化受众意味着这个网站必须用Flash构建，这肯定会让所有人都不高兴(当然除了Adobe)。

    2011年5月17日 下午3:16

  22. Joys Acevedo

    我喜欢这个代码页面......我们学习html 5

    2011年8月4日 下午6:50

  23. Doug

    链接当前显示403错误。

    2013年1月4日 上午9:18

    1. Robert Nyman

      感谢告知。我已经将链接更正为Planetarium。

      2013年1月8日 下午12:26

  24. Doug

    别忘了号召性用语图形 :)

    2013年1月9日 上午2:15

    1. Robert Nyman

      谢谢。:-)

      2013年1月10日 上午2:56

本文的评论已关闭。