css3 地球球转动

CSS3 地球球的转动效果

在网页设计中，我们经常会使用动画来吸引用户的注意力。而 CSS3 提供了很多的动画效果，其中一个非常有趣的效果就是地球球的转动效果。

    .earth {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -150px 0 0 -150px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: url(http://i.imgur.com/2HjReQP.png) no-repeat;
        animation: earth_rotate 20s linear infinite;
    }
    @keyframes earth_rotate {
      from {
        transform: rotateY(0deg);
      }
      to {
        transform: rotateY(360deg);
      }
    }

在这个代码中，我们首先创建了一个类名为 .earth 的元素，并设置其为绝对定位。接下来，我们使用了 background 属性来设置地球球的背景图像。最后，我们使用了 CSS3 动画的关键帧 @keyframes ，来实现地球球的转动效果。

在动画关键帧中，我们使用了 transform 属性来设置旋转，其中 rotateY(0deg) 表示 0 度的旋转角度，rotateY(360deg) 表示 360 度的旋转角度。通过设置 animation 属性，我们将创建的动画应用到 .earth 元素上，并设置其为 infinite 无限循环。

通过这样简单的几行代码，我们就实现了一个非常有趣的地球球转动效果。