Colored Dots Animated Background

This project demonstrates how to create an animated background with colored dots using pure CSS. The dots move and change colors, adding a dynamic and engaging visual effect to your web page.

Demo

You can see a live demo of the project here.

CLICK HERE TO SUBSCRIBE MY YOUTUBE CHANNEL

Features

• Pure CSS: The effect is achieved using only CSS, without any JavaScript.
• Dynamic Animation: Dots move and change colors, creating a lively and interactive background.
• Customizable: Easily adjust the size, color, and speed of the dots to fit your design needs.

Installation

To use this project, simply download or clone the repository:

git clone https://github.com/logusivam/Pure_CSS_colordot_bg.git

Alternatively, you can directly copy the HTML and CSS code into your project files.

Usage

1. Include the CSS in your HTML file:

<link rel="stylesheet" href="style.css" type="text/css" />

2. Add the following HTML structure:

                <span style="--i:11;"></span>
                <span style="--i:13;"></span>
                <span style="--i:15;"></span>
                <span style="--i:12;"></span>
                <span style="--i:17;"></span>
                <span style="--i:17;"></span>
                <span style="--i:19;"></span>
                <span style="--i:14;"></span>
                <span style="--i:16;"></span>
                <span style="--i:18;"></span>
                <span style="--i:10;"></span>
                <span style="--i:20;"></span>
                <span style="--i:21;"></span>
                <span style="--i:22;"></span>

3. Customize the design and animation in the bubble.css file as needed.

Contributing

Contributions are welcome! If you find any bugs or have suggestions for improvements, please open an issue or submit a pull request.