Here’s a step-by-step explanation of the HTML and CSS code you provided:
Step 1: HTML Structure
The HTML code begins with the <!DOCTYPE html> declaration, which specifies the document type. The document’s root element is <html>, and it contains two main sections: <head> and <body>.
Step 2: Head Section
The <head> section contains metadata about the document and external resources used. In this case, it includes the following elements:
<meta charset="utf-8">: Specifies the character encoding for the document.<meta name="viewport" content="width=device-width, initial-scale=1">: Sets the viewport properties for responsive design.<title>Background Animation</title>: Sets the title of the web page, which appears in the browser’s title bar.
Step 3: CSS Styling
The CSS styles are defined within <style> tags. The CSS code sets various styles for different elements in the document. Here’s a breakdown of the main styles used:
*: Applies the styles to all elements, setting padding and margin to 0 and using the border-box sizing model.body: Sets the background color to black and the text color to white, with a minimum height of 100vh (viewport height)..container: Positions the container element relatively and sets its width and height to 100% and 100vh, respectively. It also hides any overflow.h1: Centers the heading text, gives it a margin, sets its position to relative, and adjusts the font size..bubbles: Positions the bubbles container relatively and sets its display to flex, allowing the bubbles to be arranged horizontally..bubbles span: Styles the individual bubbles. It sets their position to relative, width and height to 30px, and applies a background color and box shadow. It also sets an animation for the bubbles to create the background animation effect. The--icustom property is used to control the animation duration for each bubble, and its value is set using thestyleattribute in the HTML.
Step 4: Body Section
The <body> section contains the actual content of the web page. It starts with a <div> element with a class of “container” that wraps the heading and the bubbles.
- Inside the container, there’s an
<h1>heading element with the text “Background Animation”. - After the heading, there’s a
<div>element with a class of “bubbles”. Inside this div, there are multiple<span>elements, each representing a bubble. Thestyleattribute of each<span>sets the--icustom property to control the animation duration for that specific bubble.
That’s it! This HTML and CSS code creates a web page with a background animation effect using bubbles. The bubbles move from the bottom to the top of the page, creating a visually appealing animation.
Source codes:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Background Animation</title>
<style type=”text/css”>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
background: black;
color: white;
}
.container{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
h1{
text-align: center;
margin: 30px auto;
position: relative;
font-size: 40px;
}
.bubbles{
position: relative;
display: flex;
}
.bubbles span{
position: relative;
width: 30px;
height: 30px;
background: #2196F3;
margin: 0 3px;
border-radius: 50%;
box-shadow: 0 0 0 10px #2196F344, 0 0 50px #2196F3, 0 0 100px #2196F3;
animation: animate 15s linear infinite;
animation-duration: calc(125s/ var(–i));
}
.bubbles span:nth-child(even){
background: #FFC107;
box-shadow: 0 0 0 10px #FFC10744, 0 0 50px #FFC107, 0 0 100px #FFC107;
}
@keyframes animate
{
0%{
transform: translateY(100vh) scale(0);
}
100%{
transform: translateY(-10vh) scale(1);
}
}
</style>
</head>
<body>
<div class=”container”>
<h1> Background Animation </h1>
<div class=”bubbles”>
<span style=”–i:1;”> </span>
<span style=”–i:3;”> </span>
<span style=”–i:8;”> </span>
<span style=”–i:11;”> </span>
<span style=”–i:5;”> </span>
<span style=”–i:7;”> </span>
<span style=”–i:2;”> </span>
<span style=”–i:9;”> </span>
<span style=”–i:12;”> </span>
<span style=”–i:17;”> </span>
<span style=”–i:14;”> </span>
<span style=”–i:19;”> </span>
<span style=”–i:10;”> </span>
<span style=”–i:21;”> </span>
<span style=”–i:18;”> </span>
<span style=”–i:23;”> </span>
<span style=”–i:20;”> </span>
<span style=”–i:25;”> </span>
<span style=”–i:22;”> </span>
<span style=”–i:11;”> </span>
<span style=”–i:8;”> </span>
<span style=”–i:9;”> </span>
<span style=”–i:2;”> </span>
<span style=”–i:3;”> </span>
<span style=”–i:6;”> </span>
<span style=”–i:7;”> </span>
<span style=”–i:4;”> </span>
<span style=”–i:13;”> </span>
<span style=”–i:14;”> </span>
<span style=”–i:15;”> </span>
<span style=”–i:16;”> </span>
<span style=”–i:10;”> </span>
<span style=”–i:21;”> </span>
<span style=”–i:18;”> </span>
<span style=”–i:23;”> </span>
<span style=”–i:20;”> </span>
<span style=”–i:25;”> </span>
<span style=”–i:22;”> </span>
</div>
</div>
</body>
</html>
