Water Wave Animation Using HTML, CSS
Hello! Welcome to CodeXimo.
HTML Basic
The HTML document begins with the <!DOCTYPE html> declaration, specifying the document type. The <html> tag encloses the content and metadata of the page, with the `lang` attribute set to "en" for English.
Inside the <head> section, the <meta charset="UTF-8"> tag sets the character encoding to UTF-8, ensuring proper display of text. The <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag ensures the page is responsive by setting the viewport to match the device's width. The <title>Water Wave</title> tag sets the title of the page, which appears in the browser tab. The <link rel="stylesheet" href="style.css"> tag links an external CSS file named "style.css" for styling.
In the <body>, a centered heading with the text "Water Wave" is created using <center><h1>Water Wave</h1></center>. Below the heading, a `div` with the class "circle" contains another `div` with the class "wave", representing the animated wave inside the circle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Water Wave</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center><h1>Water Wave</h1></center>
<div class="circle">
<div class="wave">
</div>
</div>
</body>
</html>CSS Styling
The CSS code starts by resetting the default margin and padding of the body element to 0 and setting the background color to white with background: #ffffff;. The `h1` heading is styled with a blue color using `color: #0000ff;`.
The .circle class positions the circle element in the center of the viewport using position: absolute;`, `top: 50%;`, `left: 50%;`, and `transform: translate(-50%, -50%) scale(1.6);. The circle has a width and height of 150 pixels, a white border of 5 pixels, and a blue box shadow. The border radius is set to 50% to create a circular shape, and the overflow: hidden; property ensures the wave remains inside the circle.
The .wave class positions the wave inside the circle and gives it a blue background with background: #4973ff;. The wave also has a circular shape due to the border-radius: 50%;` property. The `box-shadow: inset 0 0 50px rgba(0,0,0,0,5); property adds an inset shadow to the wave for a more realistic effect.
The ::before and ::after pseudo-elements are used to create two overlapping waves with different border radii and semi-transparent white backgrounds. They are positioned absolutely within the .wave element and animated using the @keyframes animate rule. The animation rotates the waves continuously for a dynamic water wave effect.
body{
margin: 0;
padding: 0;
background: #ffffff;
}
h1 {
color: #0000ff;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.6);
width: 150px;
height: 150px;
border: 5px solid #fff;
box-shadow: 0 0 0 5px #4973ff;
border-radius: 50%;
overflow: hidden;
}
.wave {
position: relative;
width: 100%;
height: 100%;
background: #4973ff;
border-radius: 50%;
box-shadow: inset 0 0 50px rgba(0,0,0,0,5);
}
.wave::before, .wave::after {
content: '';
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 50%;
transform: translate(-50%, -75%);
background: #000;
}
.wave::before {
border-radius: 45%;
background: rgba(255,255,255, .5);
animation: animate 10s linear infinite;
}
.wave::after{
border-radius: 40%;
background: rgba(255,255,255, .5);
animation: animate 10s linear infinite;
}
@keyframes animate {
0% {
transform: translate(-50%, -70%) rotate(0deg);
}
100% {
transform: translate(-50%, -80%) rotate(360deg);
}
}
Post a Comment