body {
    background: url(../img/espaco.jpg) no-repeat 0 0;
    background-size: 100%;
    /* 背景图片被拉伸为全屏 */
}

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

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

}

.earth {
    background: url(../img/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 20s linear infinite;

}

.earth:before {
    content: "";
    border-radius: 225px;
    box-shadow: -150px -6px 25px rgba(0, 0, 0, 0.7) inset;
    /*形成弧形阴影*/
    left: 0;
    position: absolute;
    top: 0;
    height: 450px;
    width: 450px;
}