CSS Animated Background Effect
 |
| CSS Animated Background Effect |
HTML PART
<body>
<div class="container">
<div class="bubbles">
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:24;"></span>
<span style="--i:10;"></span>
<span style="--i:14;"></span>
<span style="--i:13;"></span>
<span style="--i:18;"></span>
<span style="--i:16;"></span>
<span style="--i:19;"></span>
<span style="--i:20;"></span>
<span style="--i:22;"></span>
<span style="--i:25;"></span>
<span style="--i:18;"></span>
<span style="--i:21;"></span>
<span style="--i:15;"></span>
<span style="--i:13;"></span>
<span style="--i:26;"></span>
<span style="--i:17;"></span>
<span style="--i:28;"></span>
<span style="--i:22;"></span>
<span style="--i:25;"></span>
<span style="--i:18;"></span>
<span style="--i:21;"></span>
<span style="--i:15;"></span>
<span style="--i:13;"></span>
<span style="--i:26;"></span>
<span style="--i:17;"></span>
<span style="--i:28;"></span>
<span style="--i:13;"></span>
<span style="--i:26;"></span>
<span style="--i:17;"></span>
<span style="--i:28;"></span>
<span style="--i:28;"></span>
</div>
</div>
</body>
CSS PART
The first part of the code is a CSS reset, which sets the margin and padding of all elements to 0 and makes sure that the box-sizing property is set to border-box.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
The second part sets the background color of the body element to a dark blue color.
body{
min-height: 100vh;
background: #0c192c;
}
The third part creates a container for the bubbles and sets its position to a relative with a width and height of 100% and overflow set to hidden.
.container{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
The fourth part styles the bubbles themselves, which are represented as span elements. They are positioned relative to their container and displayed using a flexbox.
.bubbles{
position: relative;
display: flex;
}
.bubbles span{
position: relative;
width: 30px;
height: 30px;
background: #b6dc4f;
margin: 0 4px;
border-radius: 50%;
box-shadow: 0 0 0 10px #4fc3dc44,
0 0 50px #b6dc4f,
0 0 100px #b6dc4f;
animation: animate 15s linear infinite;
animation-duration: calc(125s / var(--i));
}
The fifth part of the code styles the even bubbles with a different background color and box-shadow properties.
.bubbles span:nth-child(even)
{
background: #a960de;
box-shadow: 0 0 0 10px #ff2d7544,
0 0 50px #a960de,
0 0 100px #a960de;
}
Finally, the last part of the code sets up the animation using a keyframes rule. The animation starts at 0% with the bubbles translated down by the full height of the container and scaled to 0. At 100%, the bubbles are translated up by 10% of the container's height and scaled to 1.
@keyframes animate
{
0%
{
transform: translateY(100vh) scale(0);
}
100%
{
transform: translateY(-10vh) scale(1);
}
}
Overall, this code creates a background animation with bubbles that move up and down the height of the container.
.png)
.png)
0 Comments