<template>
  <div class="rainbow">
    <figure class="rainbow__wrap">
      <div
        v-for="item in 5"
        :key="item"
        class="rainbow__wrap__dot"
        :class="{ 'rainbow__wrap__dot--white': item === 1 }"
      ></div>
    </figure>
  </div>
</template>

<script>
export default {
  name: 'Rainbow'
}
</script>

<style lang="less" scoped>
// 父容器尺寸
@parentWidth: 100px;
@parentHeight: 100px;
// 元素尺寸
@dotWidth: 100px;
@dotHeight: 100px;
@dotColorOne: #33b5e5;
@dotColorTwo: #99cc00;
@dotColorThree: #ffbb33;
@dotColorFour: #ff4444;

// 无限旋转
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  10% {
    width: @dotWidth;
    height: @dotHeight;
  }
  66% {
    width: @dotWidth / 2.6;
    height: @dotHeight / 2.6;
  }
  100% {
    transform: rotate(360deg);
    width: @dotWidth;
    height: @dotHeight;
  }
}
// 上下 y轴上元素动画
@keyframes dotsY {
  66% {
    opacity: 0.1;
    width: @dotWidth / 2.6;
  }
  77% {
    opacity: 1;
    width: 0;
  }
}
// 左右 x轴上元素动画
@keyframes dotsX {
  66% {
    opacity: 0.1;
    height: @dotHeight / 2.6;
  }
  77% {
    opacity: 1;
    height: 0;
  }
}
// 透明变化
@keyframes flash {
  33% {
    opacity: 0;
    border-radius: 0%;
  }
  55% {
    opacity: 0.6;
    border-radius: 100%;
  }
  66% {
    opacity: 0;
  }
}
.rainbow {
  width: @parentWidth;
  height: @parentHeight;
  position: relative;
  &__wrap {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    animation: rotate 2.4s linear infinite;
    width: @dotWidth;
    height: @dotHeight;
    &__dot {
      position: absolute;
      margin: auto;
      width: @dotWidth / 2.6;
      height: @dotHeight / 2.6;
      border-radius: 100%;
      transition: all 1s ease;
      opacity: 0.8;
      &--white {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        animation: flash 2.4s linear infinite;
        opacity: 0;
      }
      &:nth-child(2) {
        top: 0;
        bottom: 0;
        left: 0;
        background: @dotColorOne;
        animation: dotsY 2.4s linear infinite;
      }
      &:nth-child(3) {
        left: 0;
        right: 0;
        top: 0;
        background: @dotColorTwo;
        animation: dotsX 2.4s linear infinite;
      }
      &:nth-child(4) {
        top: 0;
        bottom: 0;
        right: 0;
        background: @dotColorThree;
        animation: dotsY 2.4s linear infinite;
      }
      &:nth-child(5) {
        left: 0;
        right: 0;
        bottom: 0;
        background: @dotColorFour;
        animation: dotsX 2.4s linear infinite;
      }
    }
  }
}
</style>
