旋转的球（animation与 transform）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <style>
        * {
            padding:0px;
            margin:0px;
        }
        body {
            transform:scale(0.4)
        }
        .da {
            margin-top:10%;
            margin-left:30%;
            width:400px;
            height:400px;
            border:1px solid  #000000;
            position:relative;
            display:flex;
            border-radius:50%;
            animation:rot 10s infinite linear;
        }
        .hong{
            width:50px;
            height:50px;
            background-color:red;
            border-radius:50%;
            margin:auto;
        }
        .xiaoquan {
           width:200px;
           height:200px;
           border:1px solid #000000;
           position:absolute;
           top:50%;
           right:0;
           display: flex;
           border-radius:50%;
           animation:rot 10s infinite linear;
           margin:-100px -100px 0 0;
        }
        .lan {
           width:40px;
           height:40px;
           background-color:#0026ff;
           margin:auto;
           margin-left:80px;
           border-radius:50%;
        }
        .wuquan {
           width:100px;
           height:100px;
           border:1px solid #000000;
           position:absolute;
           top:50%;
           right:0;
           display: flex;
           border-radius:50%;
           animation:rot 10s infinite linear;
           margin:-50px -50px 0 0;
        }

        .cheng {
          width:30px;
          height:30px;
          background-color:#ff6a00;
          margin:auto;
          border-radius:50%;
        }

      .lv {
         width:20px;
         height:20px;
         background-color:#4cff00;
         position:absolute;
         margin:40px 0 0 -10px;
         border-radius:50%;
      }

        .xiaquan {
        width:200px;
        height:200px;
        border:1px solid #000000;
        position:absolute;
        top:50%;
        right:0;
        display: flex;
        border-radius:50%;
        animation:rot 10s infinite linear;
        margin:100px 100px 0 0;
      }
        .xiawuquan {
        width:100px;
        height:100px;
        border:1px solid #000000;
        position:absolute;
        top:50%;
        right:0;
        display: flex;
        border-radius:50%;
        animation:rot 10s infinite linear;
        margin:50px 50px 0 0;
      }
        .xialv {
        width:20px;
        height:20px;
        background-color:#4cff00;
        position:absolute;
        margin:-10px 0 0 40px;
        border-radius:50%;
      }
        .zuoquan {
        width:200px;
        height:200px;
        border:1px solid #000000;
        position:absolute;
        top:50%;
        right:0;
        display: flex;
        border-radius:50%;
        animation:rot 10s infinite linear;
        margin:-100px 300px 0 0;
     }
        .zuowuquan {
        width:100px;
        height:100px;
        border:1px solid #000000;
        position:absolute;
        top:50%;
        right:0;
         display: flex;
        border-radius:50%;
        animation:rot 10s infinite linear;
        margin:-50px 150px 0 0;
    }
        .zuolv {
        width:20px;
        height:20px;
        background-color:#4cff00;
        position:absolute;
        margin:40px 0 0 90px;
        border-radius:50%;
    }

        .shangquan {
        width:200px;
        height:200px;
        border:1px solid #000000;
        position:absolute;
        top:50%;
        right:0;
        display: flex;
        border-radius:50%;
        animation:rot 10s infinite linear;
        margin:-300px 100px 0 0;
     }
        .shangwuquan {
        width:100px;
        height:100px;
        border:1px solid #000000;
        position:absolute;
        top:50%;
        right:0;
        display: flex;
        border-radius:50%;
        animation:rot 10s infinite linear;
        margin:-150px 50px 0 0;
     }
        .shanglv {
        width:20px;
        height:20px;
        background-color:#4cff00;
        position:absolute;
        margin:90px 0 0 40px;
        border-radius:50%;
     }
        @keyframes rot {
        100% {transform:rotate(360deg) }
     }
    </style>
</head>
<body>
    <div class="da">
        <div class="hong"></div>
        <div class="xiaoquan">
            <div class="lan"></div>
            <div class="wuquan">
                <div class="cheng"></div>
                <div class="lv"></div>
            </div>
        </div>

        <div class="xiaquan">
            <div class="lan"></div>
            <div class="xiawuquan">
                <div class="cheng"></div>
                <div class="xialv"></div>
            </div>
        </div>

        <div class="zuoquan">
            <div class="lan"></div>
            <div class="zuowuquan">
                <div class="cheng"></div>
                <div class="zuolv"></div>
            </div>
        </div>

        <div class="shangquan">
            <div class="lan"></div>
            <div class="shangwuquan">
                <div class="cheng"></div>
                <div class="shanglv"></div>
            </div>
        </div>
    </div>
</body>
</html>