纯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...