If you're looking to add some life to your website, a background animation can do wonders. Today, I'll show you how to create a beautiful, animated bubble background using just HTML and CSS. This simple effect can add a modern and dynamic touch to your site. Let's dive into the code!
HTML Structure
<body>
<div class='container'>
<div class='bubbles'>
<span style='--i:11;'></span>
<span style='--i:12;'></span>
<span style='--i:14;'></span>
<span style='--i:16;'></span>
<span style='--i:13;'></span>
<span style='--i:15;'></span>
<span style='--i:20;'></span>
<span style='--i:24;'></span>
<span style='--i:23;'></span>
<span style='--i:22;'></span>
<span style='--i:20;'></span>
<span style='--i:11;'></span>
<span style='--i:12;'></span>
<span style='--i:14;'></span>
<span style='--i:16;'></span>
<span style='--i:13;'></span>
<span style='--i:15;'></span>
<span style='--i:20;'></span>
<span style='--i:24;'></span>
<span style='--i:23;'></span>
<span style='--i:22;'></span>
<span style='--i:20;'></span>
<span style='--i:11;'></span>
<span style='--i:12;'></span>
<span style='--i:14;'></span>
<span style='--i:16;'></span>
<span style='--i:13;'></span>
<span style='--i:15;'></span>
<span style='--i:20;'></span>
<span style='--i:24;'></span>
<span style='--i:23;'></span>
<span style='--i:22;'></span>
<span style='--i:20;'></span>
<span style='--i:11;'></span>
<span style='--i:12;'></span>
<span style='--i:14;'></span>
<span style='--i:16;'>
</div>
</div>
</body>
In the HTML, we have a container div that holds another div with the class bubbles. Inside the bubbles div, there are multiple span elements representing each bubble. The --i variable will be used to control the animation speed of each bubble.
CSS Styling
*
{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
min-height:100vh;
background: #0c192c;
}
.container{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
}
.bubbles{
position:relative;
display:flex;
}
.bubbles span{
position:relative;
width:30px;
height:30px;
background:#4fc3dc;
margin:0 4px;
border-radius:50%;
box-shadow:0 0 0 10px #4fc3dc44,0 0 50px #4fc3dc,
0 0 100px #4fc3dc;
animation:animate 15s linear infinite;
animation-duration:calc(60s/var(--i))
}
.bubbles span:nth-child(even){
background:#ff2d75;
box-shadow:0 0 0 10px #4fc3dc44,
0 0 50px #ff2d7544,
0 0 100px #ff2d75;
}
@keyframes animate{
0%{
transform: translateY(100vh) scale(0);
}
100%{
transform: translateY(-10vh) scale(1);
}
}
Let's break down the CSS:
Global Styles: We start by resetting the margin, padding, and setting box-sizing to border-box for all elements to ensure consistent styling.
Body and Container: The body has a dark blue background (#0c192c) and a minimum height of 100vh to cover the entire viewport. The .container takes up the full viewport height and width and hides any overflow content.
Bubbles: The .bubbles div is set to display: flex to arrange the bubble spans horizontally. Each span (bubble) is styled with a specific size, color, and box-shadow to give it a glowing effect. The animation property animates each bubble with a duration dependent on the --i variable.
Even Bubbles: Bubbles at even positions are given a different color (#ff2d75) and matching shadows for a more dynamic effect.
Keyframes: The @keyframes rule defines the animation. Bubbles start at the bottom (translateY(100vh)) and scale from 0 to their full size, moving upward out of the viewport (translateY(-10vh)).
With just a few lines of HTML and CSS, you've created an eye-catching bubble animation for your website's background. This effect can be easily customized by adjusting the bubble colors, sizes, and animation speeds. Feel free to experiment and make it your own!
Adding such dynamic visuals can greatly enhance the user experience and make your site stand out.
Happy coding!
Top comments (0)