scss [css：加载动画] css关键帧动画示例。 #css #sass

Posted 2021-05-18

/* basic animation */
.animated {
  animation: wave 0.5s linear infinite 0.6s;
}
@keyframes wave{
  0% { width: 10%; }
  50% { width: 50%; }
  100% { width: 100%; }
}

/* loading animation sample */
.c-loading {
  // # usage.
  // <div class="c-loading">
  //   <div class="c-loading__wave">
  //     <span></span>
  //   </div>
  // </div>
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  z-index: 9999;
  margin: auto;
  background:rgba(0,0,0,.3);
  .c-loading__wave {
    position: relative;
    margin: 25% auto;
    width: 7rem;
    height: 7rem;
    &:before,&:after {
      content: "";
    }      
    span,&:before,&:after {
      position: absolute;
      display: block;
      border-radius: 5px;
      width: 1.2rem;
      height: 100%;
      transition: 0.2s;
      background: $color--tertiary;
    }
    &:before {
      top: 50%;
      left: 0;
      transform: translate(0, -50%);
      animation: wave 0.9s linear infinite;
    }
    &:after {
      top: 50%;
      right: 0;
      transform: translate(0, -50%);
      animation: wave 0.9s linear infinite 0.6s;
    }
    span {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: wave 0.9s linear infinite 0.3s;
    }
    @keyframes wave {
      0% { height: 100%; background-color:lighten($color--tertiary,25%); }
      40% { height: 10%; background-color:lighten($color--tertiary,50%); }
      80% { height: 100%; background-color:lighten($color--tertiary,25%); }
      100% { height: 100%; background-color:lighten($color--tertiary,0%); }
    }
  }//.c-loading__wave
}