First, the effect picture:

First, draw two particles using :before and :after of an element. This has the advantage of having two particles per element, saving dom. The particles are absolutely centered.

 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;
    }
Copy the code

Write another for loop to generate 30 elements, giving particles random sizes:

@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; }}}}Copy the code

Next we will animate each particle randomly from all directions into the center of the circle. To make x and y directions either positive or negative, we use a random function to generate 1 and -1: random(2) * 2-3, and then move the particle from randomly different positions to the center.

@keyframes p#{$i0%} {{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; }}Copy the code

Codepen. IO/Jianxiujiuc…