CSS 实现月球绕地球旋转

最新推荐文章于 2024-11-10 13:17:33 发布

⁡⁢⁡⁢⁠Ac

最新推荐文章于 2024-11-10 13:17:33 发布

阅读量211

点赞数 2

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_53261137/article/details/130546454

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用CSS来创建一个背景为黑色的容器，其中包含一个正在旋转的地球图片和一个较小的月亮图片，月亮自身也在旋转，且带有月球表面的细节。动画效果通过`@keyframes`定义，实现了地球和月亮的循环旋转。

摘要由CSDN通过智能技术生成

 <div class="container">
        <div class="earth"></div>
        <div class="moon"></div>
    </div>

 .container {
        background-color: black;
        width: 500px;
        height: 500px;
        position: relative;
    }

    .earth {
        width: 200px;
        height: 200px;
        background: url(../images5/earth.jpg);
        background-size: 100% 100%;
        /* border: 1px solid red; */
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        /* transform: translate(-50%, -50%); */
        margin-top: -100px;
        margin-left: -100px;
        animation: spin 60s linear infinite;
    }

    .moon {
        width: 300px;
        height: 300px;
        /* border: 2px dashed red; */
        border: none;
        position: absolute;
        top: 100px;
        left: 100px;
        border-radius: 50%;
        animation: spin 5s linear infinite;
    }

    .moon::after {
        content: "";
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: url(../images5/moon.jpg);
        background-size: 100% 100%;
        position: absolute;
        top: 25px;
        left: 10px;
    }

    @keyframes spin {
        0% {
            rotate: 0deg;
        }

        100% {
            rotate: 360deg;
        }
    }