Hello readers, today in this blog you are going to learn how to create a Background bubbles animation using HTML and CSS.
On the blog, I saw the Single Page background bubbles animation, and I hope you understood the little image of this design. I did my best to make this blog understandable to all readers. If this blog has been of some help to you, don't forget to leave a comment.
 |
| Background Bubbles Animation |
I have provided all the codes for this project below and also provided this project download link where you can easily download the source files of this project. You can use this project with your own creative customization and you can take this project to the next level with your creativity.
Background Bubbles Animation Using Html and Css
First, You need to create two files: html file and css file. After creating the files just copy the given code and paste code in your project where you create these files.
- HTML
First, create an HTML file named (index.html) and paste the given code into your HTML file. Remember that you must create a file with a ( .html ).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bubble-animation --> css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="bubbles">
<span style="--i:10"></span>
<span style="--i:12"></span>
<span style="--i:14"></span>
<span style="--i:16"></span>
<span style="--i:21"></span>
<span style="--i:23"></span>
<span style="--i:19"></span>
<span style="--i:17"></span>
<span style="--i:15"></span>
<span style="--i:18"></span>
<span style="--i:20"></span>
<span style="--i:22"></span>
<span style="--i:26"></span>
<span style="--i:24"></span>
<span style="--i:10"></span>
<span style="--i:12"></span>
<span style="--i:14"></span>
<span style="--i:16"></span>
<span style="--i:21"></span>
<span style="--i:23"></span>
<span style="--i:19"></span>
<span style="--i:17"></span>
<span style="--i:15"></span>
<span style="--i:18"></span>
<span style="--i:20"></span>
<span style="--i:22"></span>
<span style="--i:26"></span>
<span style="--i:24"></span>
<span style="--i:10"></span>
<span style="--i:12"></span>
<span style="--i:14"></span>
<span style="--i:16"></span>
<span style="--i:21"></span>
<span style="--i:23"></span>
<span style="--i:19"></span>
<span style="--i:17"></span>
<span style="--i:15"></span>
<span style="--i:18"></span>
<span style="--i:20"></span>
<span style="--i:22"></span>
<span style="--i:26"></span>
<span style="--i:24"></span>
<span style="--i:10"></span>
<span style="--i:12"></span>
<span style="--i:14"></span>
<span style="--i:16"></span>
<span style="--i:21"></span>
<span style="--i:23"></span>
<span style="--i:19"></span>
<span style="--i:17"></span>
<span style="--i:15"></span>
<span style="--i:18"></span>
<span style="--i:20"></span>
<span style="--i:22"></span>
<span style="--i:26"></span>
<span style="--i:24"></span>
</div>
</div>
</body>
</html>
- CSS
Second, You need to create a CSS file named (style.css) and paste the given code into your CSS file.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #030629;
min-height: 100h;
}
.container {
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
}
.bubbles {
position: relative;
display: flex;
}
.bubbles span {
height: 10px;
width: 10px;
background-color: #A400B5ED;
margin: 0 4px;
border-radius: 50%;
box-shadow: 0 0 0 10px #550E5C6E,
0 0 50px #DE23D9,
0 0 100px #DE23D9;
animation: animate 15s linear infinite;
animation-duration: calc(125s / var(--i));
}
.bubbles span:nth-child(even) {
background-color: #E9EBFF;
box-shadow: 0 0 0 10px #7F08328C,
0 0 50px #DD4166,
0 0 100px #DD4166;
}
@keyframes animate {
0% {
transform: translateY(100vh) scale(0);
}
100% {
transform: translateY(-10vh) scale(1);
}
}
If your code does not work or you encounter any error/problem, please download the source code files from the given download button. It is free and the .zip file will be downloaded and then you have to extract it. If you face any problem while downloading or after downloading the source code files, feel free to comment or contact us through the contact page.