Question

我试图制作一些动画片。用8个小圆圈我做了一个大圆圈。这是关于我如何放置圈子的css代码。有一种方法可以用Sass（mixin，循环或函数）来简化这个css吗？

span:nth-child(1) {
   margin-top: -100px;
}
span:nth-child(2) {
   margin-top: -70px;
   margin-left: 70px;
}
span:nth-child(3) {
   margin-left: 100px;
}
span:nth-child(4) {
   margin-top: 70px;
   margin-left: 70px;
}
span:nth-child(5) {
   margin-top: 100px;
}
span:nth-child(6) {
  margin-top: 70px;
  margin-left: -70px;
}
span:nth-child(7) {
  margin-left: -100px;
}
span:nth-child(8) {
  margin-top: -70px;
  margin-left: -70px;
}

Answer 1

您可以使用@for循环：

$steps: -100px, -70px, 0, 70px, 100px, 70px, 0, -70px;

@for $n from 1 through 8 {
  span:nth-child(#{$n}) {
    margin-top: nth($steps, $n);
    margin-left: nth($steps, ($n + 1) % 8 + 1); // This is explained in the comments
  }
}

更新：使用三角法

您可能希望使用三角法精确地根据top的值计算left和$n值（您可以在多个Sass扩展中找到trig函数，例如指南针，或谷歌有关自己滚动的详细信息），这将使代码更清晰。

如果您可以访问pi，sin和cos功能（例如使用指南针），则可以根据{{计算圆圈周围位置的精确值1}}：

$n

@for $n from 1 through 8 { span:nth-child(#{$n}) { margin-top: 100px * sin($n * pi() / 4); margin-left: 100px * cos($n * pi() / 4); } }将我们* pi() / 4的{{1}}值$n .. 1 ..转换为2 .. {{1 }} .. 3 ..这是PI/4 .. PI/2 .. 3PI/4的弧度等价物。这正是我们所需要的。

更新2：灵活的小圆圈数

使其更加灵活 - 不再限于8个小圆圈：

45 degrees

90 degrees是相当于360度的弧度。我们将其除以圆的数量（以弧度表示每个圆之间的角度），并将其乘以135 degrees以获得每个圆的弧度值。

工作演示：http://codepen.io/anon/pen/grfFD

使用Sass简化CSS（在css中使用小圆圈制作圆圈）

1 个答案:

更新：使用三角法

更新2：灵活的小圆圈数