css 地球公转月球绕地球转

CSS 地球公转月球绕地球转

    .earth {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: url(earth.png);
            background-size: cover;
            animation: spin 10s linear infinite;
    }
        .moon {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: url(moon.png);
            background-size: cover;
            animation: orbit 5s linear infinite;
    }
        @keyframes spin {
        from {
                transform: rotate(0deg);
        }
        to {
                transform: rotate(360deg);
        }
    }
        @keyframes orbit {
        from {
                transform: translate(-100px) rotate(0deg) translate(100px);
        }
        to {
                transform: translate(-100px) rotate(360deg) translate(100px);
        }
    }
    

上面的 CSS 代码实现了地球的公转和月球的绕地球转，其中 .earth 和 .moon 分别代表地球和月球，通过设置它们的不同属性实现不同的效果。

比如 .earth 的 animation 属性设置了一个名为 spin 的动画，该动画使地球不断旋转，从而实现了地球的公转效果。

而 .moon 的 animation 属性设置了一个名为 orbit 的动画，该动画实现了一个月球绕地球旋转的效果，从而让我们看到了地球与月球的复杂运动方式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！