CSS Only Animated Background Particles Effects
Tags: css, beginners, tutorial, html
Published: 2023-12-28 11:02:01

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.

{% codepen https://codepen.io/re0079/pen/agGPOO %}

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

**HTML:**

```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):**

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

```scss
@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.

```scss
@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.

```scss
@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.

```scss
@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](https://groundtutorial.com/css-particle-backgrounds/) design.