过渡动画css3 效果+实现思路

效果图

项目demo链接

思路实现

/** 这里是用scss 写的 */

/** 这里让主模块高度拉满，模块占垂直水平居中 */
body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #222;
}

.loading {
/** 颜色变量的 */
  $colors: #7ef9ff, #89cff0, #4682b4, #0f52ba, #000080;
  display: flex;
  
/** 画圆圈 */
  .dot {
    position: relative;
    width: 2em;
    height: 2em;
    margin: 0.8em;
    border-radius: 50%;
/** 主要是用来出现闪烁动画 */
    &::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: inherit;
      animation: wave 2s ease-out infinite;
      /** 动画的循环 */
    }
/** 遍历5次，赋值背景颜色 */
    @for $i from 1 through 5 {
      &:nth-child(#{$i}) {
        background: nth($colors, $i);

        &::before {
        /** 设置动画延迟 */
          animation-delay: $i * 0.2s;
        }
      }
    }
  }
}
/** 动画效果过渡 */
@keyframes wave {
  50%,
  75% {
  /** 扩大到原来的2.5倍 */
    transform: scale(2.5);
  }

  80%,
  100% {
  /** 结束帧就透明化 */
    opacity: 0;
  }
}

转译成css版本

<div class="loading">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<style>
  body {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background: #222;
  }

  .loading {
    display: flex;
  }

  .loading .dot {
    position: relative;
    width: 2em;
    height: 2em;
    margin: 0.8em;
    border-radius: 50%;
  }

  .loading .dot::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: wave 2s ease-out infinite;
  }

  @keyframes wave {
    50%,
    75% {
      transform: scale(2.5);
    }

    80%,
    100% {
      opacity: 0;
    }
  }

  .loading .dot:nth-child(1) {
    background: #7ef9ff;
  }

  .loading .dot:nth-child(1)::before {
    animation-delay: 0.2s;
  }

  .loading .dot:nth-child(2) {
    background: #89cff0;
  }

  .loading .dot:nth-child(2)::before {
    animation-delay: 0.4s;
  }

  .loading .dot:nth-child(3) {
    background: #4682b4;
  }

  .loading .dot:nth-child(3)::before {
    animation-delay: 0.6s;
  }

  .loading .dot:nth-child(4) {
    background: #0f52ba;
  }

  .loading .dot:nth-child(4)::before {
    animation-delay: 0.8s;
  }

  .loading .dot:nth-child(5) {
    background: #000080;
  }

  .loading .dot:nth-child(5)::before {
    animation-delay: 1s;
  }
</style>