用sass函数写加载动画,超实用

最新推荐文章于 2024-08-26 16:53:52 发布

刹那烟火//

最新推荐文章于 2024-08-26 16:53:52 发布

阅读量1.2k

点赞数

分类专栏： sass

本文链接：https://blog.csdn.net/holily_/article/details/91043362

版权

sass 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<template>
    <div class="preloader loading">
      <span class="slice"></span>
      <span class="slice"></span>
      <span class="slice"></span>
      <span class="slice"></span>
      <span class="slice"></span>
      <span class="slice"></span>
    </div>
</template>

<script>
export default {
  components: {},

  data() {
    return {};
  },

  computed: {},

  mounted() {},

  created() {},

  methods: {}
};
</script>
<style  lang="scss">
 @for $i from 1 through 6 {
    @keyframes preload-show-#{$i} {
      from {
        transform: rotateZ(60 * $i + deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    @keyframes preload-hide-#{$i} {
      to {
        transform: rotateZ(60 * $i + deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }

    @keyframes preload-cycle-#{$i} {
      $startIndex: $i * 5;
      $reverseIndex: (80 - $i * 5);

      #{$startIndex * 1%} {
        transform: rotateZ(60 * $i + deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
      #{$startIndex + 5%},
      #{$reverseIndex * 1%} {
        transform: rotateZ(60 * $i + deg) rotateY(0) rotateX(0deg);
        border-left-color: #f7484e;
      }

      #{$reverseIndex + 5%},
      100% {
        transform: rotateZ(60 * $i + deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
  }

  @keyframes preload-flip {
    0% {
      transform: rotateY(0deg) rotateZ(-60deg);
    }
    100% {
      transform: rotateY(360deg) rotateZ(-60deg);
    }
  }

  body {
    background: #efefef;
  }

  .preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 20px;
    display: block;
    width: 3.75em;
    height: 4.25em;
    margin-left: -1.875em;
    margin-top: -2.125em;
    transform-origin: center center;
    transform: rotateY(180deg) rotateZ(-60deg);

    .slice {
      border-top: 1.125em solid transparent;
      border-right: none;
      border-bottom: 1em solid transparent;
      border-left: 1.875em solid #f7484e;
      position: absolute;
      top: 0px;
      left: 50%;
      transform-origin: left bottom;
      border-radius: 3px 3px 0 0;
    }

    @for $i from 1 through 6 {
      .slice:nth-child(#{$i}) {
        transform: rotateZ(60 * $i + deg) rotateY(0deg) rotateX(0);
        animation: 0.15s linear 0.9 - $i * 0.08s preload-hide-#{$i} both 1;
      }
    }

    &.loading {
      animation: 2s preload-flip steps(2) infinite both;
      @for $i from 1 through 6 {
        .slice:nth-child(#{$i}) {
          transform: rotateZ(60 * $i + deg) rotateY(90deg) rotateX(0);
          animation: 2s preload-cycle-#{$i} linear infinite both;
        }
      }
    }
  }
</style>