src/collection/RainbowStarWave/base.scss
/**
 * @File   : base.scss
 * @Author : dtysky (dtysky@outlook.com)
 * @Date   : 2018-4-4 17:01:30
 * @Link: dtysky.moe
 */
 $star-quantity: 4;
 $dot-quantity: 50;
 $speed: 1s;
 .pd-rainbow-star-wave{
   width: 100%;
   height: 100%;
   background-color: #140032;
   overflow: hidden;
   margin: 0;
   
   * {
     position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
   }
 
   .wave{
     @for $i from 1 through $star-quantity{
       &:nth-child(#{$i}){
         transform: scale($i * 0.25);
       }
     }
     .line{
       width: 100px;height: 5px;
       @for $i from 0 through ($dot-quantity - 1){
         &:nth-child(#{$i + 1}){
           transform: rotate($i * -360deg / $dot-quantity) translate(100px);
           .dot{
             animation-delay: -$i * $speed / 10;
             background-color: hsla($i * 360 / $dot-quantity,100%,50%,1);
             box-shadow: hsla($i * 360 / $dot-quantity,100%,50%,1) 50px 0px 10px 10px;
           }
         }
       }
       .dot{
         width: 30px;height: 5px;
         border-radius: 50%;
         left: initial;
         animation: $speed Wave ease-in-out infinite;
       }
     }
   }
 }
 @keyframes Wave {
   80%{
     transform: translate(170px) scale(0.25);
   }
 }
 