SCSS 点击波纹效果

 .click {
   position: absolute;
   border-radius: 50%;
   background: rgba(255, 255, 255, .6);
   z-index: 0;
   animation: ripple 500ms linear 1;
   animation-delay: 50;
 }

 @mixin area {
   $width: 30px;
   $height: 30px;
   width: $width;
   height: $height;
   margin-left: - $width/2;
   margin-top: - $height/2;
 }

 @keyframes ripple {
   /*scale the element to 250% to safely cover
    the entire link and fade it out*/
   0% {
     @include area;
     transform: scale(0);
   }
   65% {
     @include area;
     opacity: 0;
     transform: scale(2.5);
   }
   100% {
     @include area;
     opacity: 0;
     transform: scale(2.5);
   }
 }