关于javascript:纯CSS打造粒子放射动画

先上效果图：

首先，先用一个元素的 :before 和:after画两个粒子。这样的益处是一个元素就能有两个粒子，节俭 dom。粒子都是相对定位在核心。

 i {
    &:before,
    &:after {
      position: absolute;
      top: 50%;
      left: 50%;
      background: radial-gradient(#fff, #fff 10%, rgba(255, 255, 255, 0) 56%);
      border-radius: 50%;
      content: "";
      opacity: 0;
    }

再写一个 for 循环生成 30 个元素，给粒子设随机的大小：

@for $i from 1 through 30 {
  .particle {i:nth-child(#{$i}) {
      &:before {$w: #{random(5) + 10}px;
        width: $w;
        height: $w;

      }
      &:after {$w: #{random(6) + 3}px;
        width: $w;
        height: $w;

      }
    }
  }
}

接下来咱们要给每个粒子生成随机的从各个方向进入圆心的动画。为了能让 x 与 y 轴的方向有的是 正有的是 负，咱们用随机函数来生成 1 和 -1：random(2) * 2 - 3，
而后让粒子从随机不同的地位移向核心。

@keyframes p#{$i} {
    0% {
      transform: translate3d(#{(random(800) ) * (random(2) * 2-3)}px, #{(random(800) ) * (random(2) * 2-3)}px, 0
      );
      opacity: 0;
    }
    10% {opacity: 1;}
    100% {transform: translate3d(0, 0, 0) scale(0.6);
      opacity: 0;
    }
}

预览地址：https://codepen.io/jianxiujiu…