Question

我已经创建了CSS3动画的开头，如下所示。我试图在SCSS中使用@for和@each来创建一个循环，它将增加％的值以及每个背景图像的数量。我对高级SCSS的了解很少，所以我所尝试的一切都是基于阅读SCSS文档的无意义和反复试验 - 而且真的不值得在这里发帖。

是否可以以这种方式使用SCSS来节省必须键入每个关键帧？

.perimeterAnim {
    background-image: url('../img/perimeters/PerimeterFountains00.png');
    -webkit-animation: perimeter 5s infinite;
    -moz-animation: perimeter 5s infinite;
    -o-animation: perimeter 5s infinite;
    -ms-animation: perimeter 5s infinite;
    animation: perimeter 5s infinite;
}


@-webkit-keyframes perimeter {
    0% {
        background-image: url('../img/perimeters/PerimeterFountains00.png');
    }

    2.564102564102564% {
        background-image: url('../img/perimeters/PerimeterFountains01.png');
    }

    5.128205128205128% {
        background-image: url('../img/perimeters/PerimeterFountains02.png');
    }

    7.692307692307692% {
        background-image: url('../img/perimeters/PerimeterFountains03.png');
    }

编辑：以这种方式创建动画的原因是图像非常大，因此精灵表是不可能的。

Answer 1

Sass只能递增（或递减）@for循环1.如果你想要一个不同的间隔，你需要使用数学来实现：

@-webkit-keyframes perimeter {
  @for $i from 0 through 39 {
    #{$i * 2.564102564102564%} {
      background-image: url('../img/perimeters/PerimeterFountains#{$i}.png');
    }
  }
}

相关：Rounding numbers in Sass and adjusting the amount of decimals

使用SCSS创建循环以使用CSS3动画更改背景图像？

1 个答案: