<style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
        }

       

        .head li {
            float: left;
        }

        #bg {
            height: 1000px;
            width: 1000px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all 2s;
        }

        .rotate {
            transform: translate(-50%, -50%) rotateZ(-60deg) !important;
            /*  提高权重 */
        }

        .row1 .orb1,
        .row1 .orb2 {
            position: absolute;
            width: 60px;
            height: 60px;
            top: 50%;
            left: 50%;
            margin-top: -280px;
            margin-left: -30px;
            background-color: red;
        }

        .row1 .orb2 {
            margin-top: -280px;
            margin-left: 500px;
        }

        .row1 div,
        .row2 div,
        .row3 div {
            /* background:-webkit-linear-gradient(起始位置, 起始颜色， 结束颜色) */
            background: -webkit-linear-gradient(top, rgb(142, 189, 208), rgb(196, 54, 185));
            border-radius: 50%;
        }

        .row2 .orb1,
        .row2 .orb2,
        .row2 .orb3 {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50%;
            left: 50%;
            margin-top: -280px;
            margin-left: -500px;
        }

        .row2 .orb2 {
            margin-top: -180px;
            margin-left: 500px;
        }

        .row2 .orb3 {
            margin-top: 50px;
            margin-left: 0px;
        }

        .row3 .orb1,
        .row3 .orb2 {
            position: absolute;
            width: 500px;
            height: 500px;
            top: 50%;
            left: 50%;
            margin-top: 0;
            margin-left: 0;
        }

        .row3 .orb2 {
            margin-top: 100px;
            margin-left: 1000px;
        }

        .orb1 {
            animation: orbmove 60s linear infinite;
        }

        .orb2 {
            animation: orbmove 70s linear infinite;
        }

        .orb3 {
            animation: orbmove 80s linear infinite;
        }

        @keyframes orbmove {
            form {
                transform: translate(0) rotate(0deg);
            }
            to {
                transform: translate(-2000px) rotate(3600deg);
            }
        }
    </style>