用css写一个简单的太阳系

青旅半醒 2023-06-13 11:09 23阅读 0赞

用css写一个简单的太阳系，当然下面的太阳与地球是图片  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpb28xMjE_size_16_color_FFFFFF_t_70]

以下为代码部分

@keyframes rotate {
                from{
                    transform: rotate(0deg);
    
                }
                to{
                    transform: rotate(360deg);
                }
            }
        *{
            box-sizing: border-box;
        }
        html,body{
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }
        .solarsys{
            width: 80%;
            height: 100%;
            background:linear-gradient(90deg, rgb(16, 16, 19),rgb(65, 66, 66),rgb(16, 16, 19));
           background-color: #000;
            margin: 0 auto;
            position: relative;
        }
       
        .solarsys div{
            border-radius: 50%;
            position: absolute;
        }
        .sun{
            /* width: 150px; */
            /* height: 150px;  */
            border-radius: 50%;
            background-color: #f05121;
            box-shadow: 1px 1px 20px 10px #f05121;
            top: calc(50% - 75px);
            left:  calc(50% - 75px);
        }
        .run{
            width: 150px;
            height: 150px;
            border-radius: 50%;
        }
        .mercuryOrbit{
            width: 170px;
            height: 170px;
            border: 1px dotted #fff;
            top: calc(50% - 85px);
            left:  calc(50% - 85px);
        }
        .mercury{
            width: 10px;
            height: 10px;
            background-color: rgb(206, 248, 16);
            box-shadow: 1px 1px 20px 10px rgb(206, 248, 16);
            top: calc(50% - 5px);
            left: calc(50% - 90px);
            /* 围绕圆心旋转 */
            transform-origin: 90px 5px;
            animation: rotate 1.5s linear infinite;
        }
        .venusOrbit{
            width: 240px;
            height: 240px;
            border: 1px dotted #fff;
            top: calc(50% - 120px);
            left:  calc(50% - 120px);
        }
        .venus{
            width: 20px;
            height: 20px;
            background-color: rgb(52, 245, 46);
            box-shadow: 1px 1px 20px 10px rgb(52, 245, 46);
            top: calc(50% - 10px);
            left:  calc(50% - 130px);
            animation: rotate 3.5s linear infinite;
            transform-origin: 130px 10px;
        }
        .earthOrbit{
            width: 320px;
            height: 320px;
            border: 1px dotted #fff;
            top: calc(50% - 160px);
            left:  calc(50% - 160px);
        }
        .earth{
            /* width: 16px; */
            /* height: 16px; */
            background-color: rgb(27, 12, 238);
            box-shadow: 1px 1px 20px 10px rgb(27, 12, 238);
            top: calc(50% - 8px);
            left:  calc(50% - 168px);
            animation: rotate 5s linear infinite;
            transform-origin: 168px 8px;
        }
        img{
            width: 16px;
            height: 16px;
            border-radius: 50%;
        }
    .marsOrbit{
        width: 460px;
            height: 460px;
            border: 1px dotted #fff;
            top: calc(50% - 230px);
            left:  calc(50% - 230px);
    }
    .mars{
           width: 40px;
            height: 40px;
            background-color: rgb(10, 97, 97);
            box-shadow: 1px 1px 20px 10px rgb(10, 97, 97);
            top: calc(50% - 20px);
            left:  calc(50% - 250px);
            animation: rotate 13s linear infinite;
            transform-origin: 250px 20px;
    }
    .jupiterOrbit{
             width: 540px;
            height: 540px;
            border: 1px dotted #fff;
            top: calc(50% - 270px);
            left:  calc(50% - 270px);
    }
    .jupiter{
        width: 50px;
        height: 50px;
        background-color: rgb(235, 231, 48);
            box-shadow: 1px 1px 20px 10px rgb(235, 231, 48);
            top: calc(50% - 25px);
            left:  calc(50% - 295px);
            animation: rotate 25s linear infinite;
            transform-origin: 295px 25px;
    }
    .saturnOrbit{
        width: 640px;
        height: 640px;
        border: 1px dotted #fff;
            top: calc(50% - 320px);
            left:  calc(50% - 320px);
    }
    .saturn{
        width: 24px;
        height: 24px;
        background-color: rgb(216, 69, 230);
            box-shadow: 1px 1px 20px 10px rgb(216, 69, 230);
            top: calc(50% - 12px);
            left:  calc(50% - 332px);
            animation: rotate 40s linear infinite;
            transform-origin: 332px 12px;
    }
    .uranusOrbit{
        width: 740px;
        height: 740px;
        border: 1px dotted #fff;
            top: calc(50% - 370px);
            left:  calc(50% - 370px);
    }
    .uranus{
        width: 20px;
        height: 20px;
        background-color: rgb(250, 61, 118);
            box-shadow: 1px 1px 20px 10px rgb(250, 61, 118);
            top: calc(50% - 10px);
            left:  calc(50% - 380px);
            animation: rotate 60s linear infinite;
            transform-origin: 380px 10px;
    }
    .neptuneOrbit{
        width: 840px;
        height: 840px;
        border: 1px dotted #fff;
            top: calc(50% - 420px);
            left:  calc(50% - 420px);
    }
    .neptune{
        width: 8px;
        height: 8px;
        background-color: rgb(50, 173, 245);
        box-shadow: 1px 1px 20px 10px rgb(50, 173, 245);
            top: calc(50% - 4px);
            left:  calc(50% - 424px);
            animation: rotate 80s linear infinite;
            transform-origin: 424px 4px;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpb28xMjE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191116162506917.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpb28xMjE=,size_16,color_FFFFFF,t_70