太阳系

最新推荐文章于 2023-07-04 10:15:18 发布
biggrand
最新推荐文章于 2023-07-04 10:15:18 发布
阅读量198
点赞数
本文链接：https://blog.csdn.net/biggrand/article/details/78434660
版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                background-color: #000;
            }
            .sun{
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background-color: red;
                position: absolute;
                left:50%;/*这两个属性是让他居中*/
                top:50%; 
                 margin-left:-50px;
                margin-top:-50px;
                box-shadow: 0  0 30px 2px red;/*阴影效果： x轴的偏移量，y轴上的偏移量，模糊程度，颜色*/
            }
            .DiQiu{
                width: 300px;
                height: 300px;
                left: 50%;
                top: 50%;
                border-radius: 50%;
                border: 1px solid #ccc;
                position: absolute;
                margin-left:-150px;
                margin-top:-150px;
            }
            .DiQiu::after{
                width: 30px;
                height: 30px;
                position: absolute;
                background-color: darkturquoise;
                border-radius: 50%;
                left: 0%;
                top: 50%;
                margin-left:-15px;
                margin-top:-15px;
                content:"";/*显示在这条线上*/
            }
            .YueQiu{
                width: 10px;
                height: 10px;
                background-color: #fff;
                border-radius: 50%;
                position: absolute;
                 left:-25px;
                 top:50%;
                 margin-left: -5px;
                 margin-top:-5px;
                transform-origin: 30px 5px;
                animation: rot 3s linear infinite;/*谁转就给谁这个属性*/
            }
            .Ming{
                width: 450px;
                height: 450px;
                left: 50%;
                top: 50%;
                border-radius: 50%;
                border: 1px solid #ccc;
                position: absolute;
                margin-left:-220px;
                margin-top:-220px;
                animation: rot 12s linear infinite;
            }
            .Ming:after{
                width: 50px;
                height: 50px;
                position: absolute;
                background-color: blueviolet;
                border-radius: 50%;
                left: 0%;
                top: 50%;
                margin-left:-25px;
                margin-top:-25px;
                content:"";
            }
            .Hai{
                 width: 650px;
                height: 650px;
                position: absolute;
                left:50%;
                top:50%;
                margin-left:-310px;
                margin-top:-310px;
                border-radius: 50%;
                border: 1px solid #ccc;
                animation: rot 15s linear infinite;

            }
            .Hai:after{
                 width: 70px;
                 height: 70px;
                 position: absolute;
                 left:0%;
                 top:50%;
                margin-left:-30px;
                margin-top:-30px;
                border-radius: 50%;
                background-color:  chocolate;
                content:"";

            }
            .Di{
                 width: 650px;
                height: 650px;
                position: absolute;
                left:10%;
                top:10%;
                margin-left:-50px;
                margin-top:-100px;
                border-radius: 50%;
                border: 1px solid #ccc;
                animation: rot 8s linear infinite;
            }
            .Di:after{
                 width: 100px;
                 height: 30px;
                 position: absolute;
                 left:0%;
                 top:50%;
                margin-left:-30px;
                margin-top:-30px;
                border-radius: 50%;
                background-color: #4B8BF5;
                content:"";
            }
            /*转圈动画代码！！！！*/
             @keyframes rot {
            0%{

            }
            100%{
                transform:rotate(360deg);
            }
        }

        </style>
    </head>
    <body>
        <div class="sun">太阳</div>
        <div class="DiQiu">地球
            <div class="YueQiu">月球</div>
        </div>
        <div class="Ming">冥王星</div>
        <div class="Hai">海王星</div>
        <div class="Di">海王星</div>
    </body>
</html>