Question

我的代码是这样，我想知道是否有什么方法可以避免重复元素，而只需更改“旋转”即可。

我在网上发现可以使用“计数器增量”，但是我不知道如何在我的代码中实现它

我使用vuejs不重复30个div

        <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次增加12度

Answer 1

在03MS0002中使用scss：

See working code

See compile scss to css

@for

Answer 2

您可以考虑使用自定义混合：

@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%);
}

Answer 3

由于您使用的是Vue.js动态插入div，因此您可以保持CSS泛型，并依赖于您使用div生成的某些内联样式。您可以轻松地使用每个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>

如何避免重复只会改变CSS中一件事的元素？

3 个答案: