如何避免我的圈子彼此重叠（CSS）？

Question

我正在尝试制作游戏板，但是在修改屏幕时，圆圈在另一侧，我想知道如何避免这种情况，而不必缩小圆圈的大小

使用vuejs进行循环 但是您可以再次这样做

    <div class="wrapper">
        <div class="circle-container">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        .
        .
        .
        </div>
    </div>

我尝试设置最大值和最小值，但我无法使其正常工作。

I have this

The problem

<div class="wrapper">
    <div class="circle-container">
        <div class="circle" v-for="i in 30"></div>
    </div>
</div>

我的CSS代码

.wrapper {
        width: 100%;
        height: 500px;
        margin: 30px auto;
    }

    .circle-container {
        margin: 0;
        position: relative;
        width: 100%;
        height: 100%;

    }

    .circle {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        opacity: 0.7;
    }

.circle:nth-child(1) {
        -webkit-transform: rotate(0deg) translateX(30vw);
        -moz-transform: rotate(0deg) translateX(30vw);
        -ms-transform: rotate(0deg) translateX(30vw);
        -o-transform: rotate(0deg) translateX(30vw);
        transform: rotate(0deg) translateX(30vw);
        background: #ff504f;
    }

    .circle:nth-child(2) {
        -webkit-transform: rotate(12deg) translateX(30vw);
        -moz-transform: rotate(12deg) translateX(30vw);
        -ms-transform: rotate(12deg) translateX(30vw);
        -o-transform: rotate(12deg) translateX(30vw);
        transform: rotate(12deg) translateX(30vw);
        background: yellowgreen;
    }

    .circle:nth-child(3) {
        -webkit-transform: rotate(24deg) translateX(30vw);
        -moz-transform: rotate(24deg) translateX(30vw);
        -ms-transform: rotate(24deg) translateX(30vw);
        -o-transform: rotate(24deg) translateX(30vw);
        transform: rotate(24deg) translateX(30vw);
        background: yellowgreen;
    }

。 。 。 。 30次