Welcome to Lite UI. Test Link

Water Wave Animation Using HTML, CSS

 Hello! Welcome to CodeXimo. 

You are looking for Today i Creating Water Wave Animation Using HTML, CSS then this post is just for you.

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);
  }
}
Conclusion 

Congratulations! You've embarked on a journey to create a Water Wave Animation Using HTML, CSS. Illuminate your web design skills and captivate your audience with this enchanting tutorial.