CSS Only Animated Background Particles Effects

In the realm of web design, capturing the attention of users often involves incorporating visually stunning and dynamic elements.

CSS-only animated background particles effects have emerged as a popular choice for designers seeking to add an extra layer of interactivity and charm to their websites.

CSS Background Particles Animation

In this article, we'll explore the magic of CSS-only animated particles effects and showcase how they can elevate the aesthetics of your web projects.

The overall effect is an animated particle background where each color moves and rotates randomly across the screen.

HTML:

<div class="purple"></div>
<div class="medium-blue"></div>
<div class="light-blue"></div>
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="cyan"></div>
<div class="light-green"></div>
<div class="lime"></div>
<div class="magenta"></div>
<div class="lightish-red"></div>
<div class="pink"></div>

These HTML div elements represent different colors, and each div is given a class corresponding to its color name. These elements will be used as particles in the animated background.

CSS (SCSS):

$colors: (
  purple: #241379,
  medium-blue: #2185bf,
  light-blue: #1fbce1,

  // ... other color definitions ...

  pink: #ff4293
);

// ... other CSS styles ...

@each $color-name, $color-hex in $colors {
  // ... styling and animation rules for each color ...
}

Here, you are defining a map of colors using the SCSS variable $colors. Each color is associated with a name and a hex code.

@function random-num($min, $max) {
  @return floor(random() * ($max - $min) + $min);
}

This SCSS function random-num generates a random number between $min and $max. It's used later to create random sizes and positions for the particles.

@function random-calc($number) {
  $max: 100 - $number;
  $min: $number * -1;
  @return random-num($min, $max);
}

Another SCSS function random-calc takes a number and calculates a random number within a range that depends on this input. This is used for creating animated random positions for particles.

@keyframes #{$color-name} {
  50% {
    transform: translate3d($random3 + vw, $random4 + vh, 0);
  }
  100% {
    transform: translate3d($random5 + vw, $random6 + vh, 0);
  }
}

This defines a keyframe animation #{$color-name} for each color, creating a movement between two sets of random positions for the particles.

@keyframes #{$color-name}-pseudo {
  33% {
    transform: translate3d(random-calc($random3) + vw, random-calc($random4) + vh, 0) rotate((random(360)) + deg);
  }
  100% {
    transform: translate3d(random-calc($random5) + vw, random-calc($random6) + vh, 0) rotate((random(360)) + deg);
  }
}

Similarly, this defines a keyframe animation #{$color-name}-pseudo for each color's pseudo-elements (::before and ::after), creating animated movements and rotations.

CSS-only animated background particles effects offer a versatile and lightweight way to breathe life into your web design projects. Hope you like this CSS Particle Backgrounds design.