Hello today in this blog of HTML  &  CSS and project we are going to CSS Water Wave Background Animation Effects HTML CSS. let's get started.

There are lots of websites with lots of features on the internet and of course, we have made. All the website has different features and specialty. But many websites have limited colors that's why people always feel bored by the limited color on the website right? that's why in this HTML CSS  project in our today's website.

Let's have a look at the given image of our website design. On the top side, we have a navigation menu bar, a home section with some text, and a beautiful button. At the right side of the navigation menu bar, we can see an icon that is for to switch the website.

css wave animation,how to create waves with pure css,wavy background animation effects,css wavy background,css animation effects,css water wave effects,css3 animated wave,css wave animation tutorial,background wave animation effects,css wave effects

Index.html file here

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
   
</head>
<body>
     <section class="home">
            <h3> I am Front-end Developer</h3>
            <img class="home-img" src="https://github.com/Sacsam005/assets_codepen/blob/main/assets/person.png?raw=true" alt="person">
            <div class="wave"></div>
            <div class="wave wave-2"></div>
            <div class="wave wave-3"></div>
     </section>
</body>
</html>





style.css are here:-

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300&display=swap');

* {
  oveflow-x: hidden;
   margin: 0 auto;
   font-family: 'Chakra Petch', sans-serif;
}


.home {
  position: relative;
}

h3 {
  font-size: 3rem;
  text-align: center;
}
img {
  width: 50%;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 1rem 0;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 30rem;
  width: 110%;
  background: url(https://github.com/Sacsam005/assets_codepen/blob/main/assets/Path%201.png?raw=true)
    repeat-x;
  background-size: 250rem 30rem;
  animation: wave 10s linear infinite;
}

@keyframes wave {
  0% {
    background-position-x: 0;
  }

  0% {
    background-position-x: -250rem;
  }
}

.wave.wave-2 {
  opacity: 0.5;
  animation-delay: 0.2s;
  animation-direction: reverse;
}

.wave.wave-3 {
  opacity: 0.7;
  animation-duration: 5s;
}

@media (max-width: 450px) {
  html {
    font-size: 50%;
  }
}