Как я могу избежать того, чтобы мои круги были друг над другом (CSS)? - PullRequest
Новая
       12

Как я могу избежать того, чтобы мои круги были друг над другом (CSS)?

0 голосов
/ 11 декабря 2018

Я пытаюсь сделать доску для игры, но в момент изменения экрана круги находятся на другой стороне, я хотел бы знать, как этого избежать, не уменьшая размер кругов

Используйте vuejs для создания цикла Но еще раз вы можете сделать это 

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

Я попытался установить максимумы и минимумы, но не могу заставить его работать.

У меня есть

Проблема 

<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 раз

...