css3 写一个 多点 环绕中心 圆周运动的 动画

要满足 随机生成 多点，且环绕一个中心， 需要理解 transform-origin 属性， 以及 tranform:roate(1turn)
如果要保证 环绕的点 在运动中不相互覆盖，需要更改2点

1. 生成的点在 同一轨道（只需用勾股求两点之间的距离一致与否） 速度需保证一致
2. 不同轨道 保证 轨道之间的 距离 大于 点的 宽度 和 高度 + 需要的间距

HTML

    <div class="container">
        <div class="portrait"></div>
    </div>

CSS

.container {
        width: 600px;
        height: 600px;
        position: relative;
        box-sizing: border-box;


    }

    .circle {
        position: absolute;
        left: 50%;
        top: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #aaa;
        transform-origin: 0 150px;
        animation: spin 3s infinite linear
    }

    .portrait {
        width: 50px;
        height: 50px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -75px;
        margin-top: -75px;
        background: #000;
        border-radius: 50%;
    }

    @keyframes spin {
        to {
            transform: rotate(1turn);
        }
    }

JS

        var list = []

        for (var i = 0; i < 10; i++) {
            //生成随机点的 坐标，若绕保证不覆盖，请按前面的要求进行合理更改
            var item = {
                left: Number((Math.random() * 100).toFixed(2)),
                top: Number((Math.random() * 100).toFixed(2))
            }
            list.push(item)
        }

        var portrait = document.getElementsByClassName('portrait')[0],
            portraitLeft = portrait.getBoundingClientRect().left,
            portraitTop = portrait.getBoundingClientRect().top,
            portraitCenter = {
                left: portraitLeft + 50 / 2,
                top: portraitTop + 50 / 2
            }



        list.map(item => {
            var xdis = Math.abs(portraitCenter.left - item.left)
            var ydis = Math.abs(portraitCenter.top - item.top)
            //这里 动画的时间 就是速度， 时间越小，速度越快
            var time = Number((Math.random() * 10).toFixed(2)) + 's'

            setTimeout(() => {
                $(".container").append(
                    `<div class="circle" style="left:${item.left}px;top:${item.top}px;transform-origin:${xdis}px ${ydis}px;animation:spin ${time} infinite linear ;"></div>`
                )
            }, 500);
            

        })