Как я могу избежать повторения элементов, которые меняют только одну вещь в CSS?

Question

Мой код такой, и я хотел бы знать, есть ли способ избежать повторения элементов и изменить только «вращение», что меня интересует.

Я обнаружил в Интернете, что вы можете использовать «Счетчик»-increment ", но я не знаю, как реализовать это в моем коде

Я использую vuejs, чтобы не повторять 30 делений

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




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

    .circle-container {
        margin: 60px;
        position: relative;
        width: 100%;
        height: 100%;
    }

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

    .circle:nth-child(1) {
        -webkit-transform: rotate(0deg) translateX(500%);
        -moz-transform: rotate(0deg) translateX(500%);
        -ms-transform: rotate(0deg) translateX(500%);
        -o-transform: rotate(0deg) translateX(500%);
        transform: rotate(0deg) translateX(500%);
        background: #42A5F5;
    }

    .circle:nth-child(2) {
        -webkit-transform: rotate(12deg) translateX(500%);
        -moz-transform: rotate(12deg) translateX(500%);
        -ms-transform: rotate(12deg) translateX(500%);
        -o-transform: rotate(12deg) translateX(500%);
        transform: rotate(12deg) translateX(500%);
        background: #ffe63d;
    }

    .circle:nth-child(3) {
        -webkit-transform: rotate(24deg) translateX(500%);
        -moz-transform: rotate(24deg) translateX(500%);
        -ms-transform: rotate(24deg) translateX(500%);
        -o-transform: rotate(24deg) translateX(500%);
        transform: rotate(24deg) translateX(500%);
        background: #ffe63d;    }

Продолжить в 30 раз, увеличивая 12deg

Answer 1

Поскольку вы используете Vue.js для динамической вставки div, вы можете сохранить универсальный CSS и полагаться на некоторый встроенный стиль, который вы генерируете с помощью div.Вы можете легко использовать переменную, которую вы увеличиваете на 12deg для каждого деления.

.wrapper {
  display: flex;
  width: 100%;
  height: 200px;
  margin: 30px auto;
}

.circle-container {
  margin: 60px;
  position: relative;
  width: 100%;
  height: 100%;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  opacity: 0.7;
  transform: rotate(var(--d,0deg)) translateX(500%);
  background: #ffe63d;
}

<div class="wrapper">
  <div class="circle-container">
    <div class="circle" ></div>
    <div class="circle" style="--d:12deg"></div>
    <div class="circle" style="--d:24deg"></div>
    <div class="circle" style="--d:36deg"></div>
    <div class="circle" style="--d:48deg"></div>
  </div>
</div>

Answer 2

Использование scss с @for:

См. Рабочий код

См. Компиляцию scss для css

   .wrapper {
  display: flex;
  width: 100%;
  height: 200px;
  margin: 30px auto;


.circle-container {
  margin: 60px;
  position: relative;
  width: 100%;
  height: 100%;
}

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

  background: #ffe63d;
}
}
@for $i from 1 through 30 {
    .circle:nth-child(#{$i}){
      transform: rotate($i *12deg) translateX(500%);
    }

}

Answer 3

Вы можете рассмотреть пользовательский миксин:

@mixin transform-rotate-translate($degrees, $percentage) {
  -webkit-transform: rotate($degrees) translateX($percentage);
  -moz-transform: rotate($degrees) translateX($percentage);
  -ms-transform: rotate($degrees) translateX($percentage);
  -o-transform: rotate($degrees) translateX($percentage);
  transform: rotate($degrees) translateX($percentage);
}

Теперь вы можете вызывать его в любом элементе:

.circle:nth-child(1) {
  @include transform-rotate-translate(0deg, 500%);
}

.circle:nth-child(2) {
  @include transform-rotate-translate(12deg, 500%);
}

.circle:nth-child(3) {
  @include transform-rotate-translate(24deg, 500%);
}