关于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...