从前，有一个善良的网页开发者，他每天都担心学习新的酷炫事物，并尝试浏览器几乎无法做到的疯狂事情。此外，还有一些巨人，他们努力提高魔法网络的力量，让所有人能够自由地生活、编码、学习和分享。

在这些事物中，有带有新功能的 CSS3！我听说过一个叫做 Mozilla Dev Derby 的东西，而当月，重点功能正是 CSS3 动画！这是一个学习酷炫事物并参与其中的一部分的好机会！像 Mozilla 这样的公司如此努力地为我们提供这些主题和内容，真是太棒了！

这里将使用两个例子来解释这些技术并讲述历史。Felipe 准备了 一个使用 HTML5 和 CSS3 动画来制作地球旋转的演示，并且，不知道这一点，Deivid Marques 也产生了类似的想法.

为什么是地球？

灵感是关键。从小我就对宇宙（微观和宏观）和地球着迷，它对我们来说是如此的……一个如此棒的宿主！我决定用它作为灵感！

图片

显然，需要图片。我尽量避免使用图片，但我不能用模糊的图片来代表地球！还有，月球、背景中的星星和小的太阳都是图片。

应该动画什么？

在对周围的事物进行动画处理之前，我映射了所有可能具有移动意义的事物以及它们如何移动。首先，是地球本身！地球必须朝一个方向旋转，同时还要倾斜以形成四季。此外，由于地球的自转，还有昼夜之分。

月球绕着地球运行，但一旦它位于地球的后面，它应该变暗。此外，月球应该来到地球的前面，然后隐藏在它的后面。此外，还可以添加一个缓慢的运动到背景中的星星！

HTML 结构

我不想让它过于复杂，所以没有使用伪元素。这迫使我的 HTML 稍微大了一点。

这是 Body 标签中的内容

视觉效果

好吧，你知道从外太空看一切都很漂亮！所以视觉效果也应该很酷！

地球

地球基本上是一个圆形的 div，背景是全球地图。它使用绝对定位和大小居中，并使用 box-shadow 效果来代表地球夜晚的一面。

#globe
{
    background-image: url(images/globe-hearth.jpg) repeat-x;
    border: solid 1px #000;
    position:absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    margin-left: -300px; /* aligning it to the center */
    margin-top: -300px;
    border-radius: 50%; /* making it round */
    z-index:0;
    box-shadow: inset 2px 2px 10px #000, inset -140px -70px 100px #000;
}

大气层

大气层是另一个圆形 div，带有 box-shadow 效果。

#atmosphere
{
    position:absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    margin-left: -300px;
    margin-top: -300px;
    border-radius: 50%;
    opacity: 0.7;
    box-shadow: -6px -6px 20px #eef;
}

太阳

在这个演示中，太阳只是另一个带有图像作为背景的 div，虽然这里有一个棘手的细节！我希望太阳正好位于地球的地平线上，所以，仅仅居中它是不行的！此外，我不知道分辨率来准确地将它放在那里！但是，我知道地球的大小，也知道它是在中心的！

因此，我只需将它居中，然后通过更改其边距值来调整其位置。

#sun
{
    background-image: url(images/sun.png);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 47px;
    margin-left: -320px;
    margin-top: -110px;
}

背后的星星

星星只是一个带有可重复背景图像的 div。

月球

月球要复杂得多。它必须绕着地球转，所以我还要调整它的 z-index。除此之外，它只是一个圆形的 div。

太阳光

此外，还有太阳光的一些反射。这些是其他圆形 div，绝对定位，带有不同的颜色和不透明度。Box-shadow 也可以是可选的不错效果！所以我也有使用它。

动画时间

为了给地球做动画，我使用 keyframes CSS3 功能创建了两个动画。

(注意：在这些例子中，我只展示了动画的 “-moz” 定义，但如果你想让它在不同的浏览器中运行，则必须为每个供应商创建它们)。

@-moz-keyframes dayByDay
{
    from{
            background-position: -1600px;
    }
    to{
            background-position: 0px;
    }
}

这样，地球的背景就会经过，就像地球在旋转一样。此外，我还为季节创建了动画

@-moz-keyframes seasons
{
    from{
        -moz-transform: rotate(6deg);
    }
    to{
        -moz-transform: rotate(16deg);
    }
}

你知道，地球不是完全垂直于 0 度的。现在，我必须将这些动画添加到地球上

#globe{
    -moz-animation: dayByDay 24s linear 0s infinite, seasons 2688s linear alternate 0s infinite;
}

对所有事物背后的天空进行动画处理的方法与 dayByDay 动画完全相同。

对月球进行动画处理更具挑战性！为了给它做动画，我不得不改变它的尺寸和位置。还有使其变暗或变亮，并注意其 z-index。

下面是我当时 (2011 年 6 月) 的做法。现在，我会尝试使用 -moz-transform 使用 scale 变换来做，而不是改变它的 width 和 height。此外，当时，我使用了月球 z-index 的负值和正值……相反，我可以为地球添加一个 z-index，例如 2，并在月球的 z-index 中使用仅正值 (1 和 3) 来将它移动到地球的后面或前面。我不想在这里更改它，因为这是它在 Mozilla Derby 上上传的演示中的运行方式。

@-moz-keyframes moon
{
   0%{
       width: 30px;
       height: 31px;
       margin-left: -310px;
       margin-top: -40px;
       z-index:-1;
   }
   10%{
       margin-left: -450px;
       margin-top: -50px;
       width: 60px;
       height: 61px;
       z-index:1;
   }
   20%{
       margin-left: -500px;
       margin-top: -50px;
       width: 80px;
       height: 81px;
       z-index:1;
   }
   30%{
       margin-left: -450px;
       margin-top: -50px;
       width: 90px;
       height: 92px;
       z-index:1;
   }
   50%{
       margin-left: 0px;
       margin-top: -50px;
       width: 120px;
       height: 122px;
       z-index:1;
   }
   60%{
       margin-left: 300px;
       margin-top: -50px;
       width: 120px;
       height: 122px;
       z-index:1;
   }
   60%{
       margin-left: 410px;
       margin-top: -50px;
       width: 90px;
       height: 92px;
       z-index:1;
       box-shadow: inset 0px 0px 80px #000;
   }
   70%{
       margin-left: 460px;
       margin-top: -50px;
       width: 80px;
       height: 82px;
       z-index:1;
       box-shadow: inset 0px 0px 80px #000;
   }
   80%{
       margin-left: 420px;
       margin-top: -50px;
       width: 60px;
       height: 61px;
       z-index:-1;
       box-shadow: inset 0px 0px 80px #000;
   }
   90%{
       margin-left: 0px;
       margin-top: -50px;
       width: 30px;
       height: 31px;
       z-index:-1;
   }
   100%{
       width: 30px;
       height: 31px;
       margin-left: -310px;
       margin-top: -40px;
       z-index:-1;
   }
}

Mozilla Dev Derby

上面的演示可以在 CSS3 up and running! 中找到，它位于 Mozilla 的演示工作室 中。

一段时间后，Deivid Marques 做了他的 Planeta Terra 演示，它只使用了一个 DIV。在学习 CSS3 的过程中，他也想创建一个地球。他注意到了一个 Flash 教程中的例子，并想用 CSS3 来创建它。

他的地球是由单个 div 制成的，并使用 CSS 来对背景图像进行动画处理。因此，它更易于复制和理解。

该 div 具有以下应用于它的 CSS

.earth{
    background: url(images/terra.jpg) repeat-x 0 0;
    border: 1px solid rgba(26,18,101,0.3);
    border-radius: 225px;
    box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset;
    height: 450px;
    left: 50%;
    margin: -225px 0 0 -225px;
    position: absolute;
    top: 50%;
    width: 450px;
    animation: loop 80s linear infinite;
}

这是他在 CSS3 中的动画定义

@keyframes loop {
    0% { background-position: 0 0; }
    100%{ background-position: -900px 0;}
}

一旦他也受到启发，想告诉全世界他在开发这个演示时学到了什么，他的演示也被发布到了 Mozilla Dev Derby 上！Planeta Terra 也在 GitHub 上可用.

这就是我们相遇并被邀请撰写这篇文章的方式。

结论

能够学习新事物、面对新挑战、与许多人谈论他们在其中的经验，以及……好吧，收获很多，没有损失！

我希望它在某种程度上激励了你，去创建你自己的演示，提交它……你至少会得到很多乐趣！:)