Question

我有这个代码。我真的不明白为什么它不起作用。

我正在使用SCSS并将其编译成CSS，但除动画外，一切正常。

@keyframes spin {
    form {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(3, 25, 39);
    z-index: 10;
    .loader {
        width: 70px;
        height: 70px;
        border: 10px solid $secondary-color;
        border-radius: 50%;
        border-top-color: $main-color;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        animation: 5s spin infinite linear;
    }
}

Answer 1

你的代码中有拼写错误。表格应来自。

＆＃13;

@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(3, 25, 39);
  z-index: 10;
}

.loader {
    width: 70px;
    height: 70px;
    border: 10px solid red;
    border-radius: 50%;
    border-top-color: black;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: 5s spin infinite linear;
 }

＆＃13;

<div class="preloader">
  <div class="loader"></div>
</div>

＆＃13;

带有scss的预加载器

1 个答案: