Animations, Landing Page

CSS waves effect and CSS animation | CSS waves animation

Today we have developed a CSS waves effect. In the last post, we discussed how to create an Animated Tab Bar in Html and CSS. So, lets us start with how to create waves in HTML and CSS.

Waves in HTML and CSS:

As you can see in the image we created waves in Html and CSS and they are moving up and down.

For the movement of these waves, we have taken the help of HTML and CSS languages. First of all, we have taken a solid background of white colors. Then we have taken another color of green. After that, we divided the page into two sections upper and lower sections. Provided the radius to the upper part from the left and right bottom corners. Then add the animation inside the corners of the upper side.

In both the upper and lower side we have added the text. This text can be applied using headings from <h1> to <h6>. Then <p> tag can also be used with it for adding the text.

How to create a CSS waves effect?

For creating waves in HTML and CSS we have to download a code editor. The code editor is an IDE and it provides an environment to write the code of any programming language. We will use vs code or sublime text editor or brackets for writing our code.

Source code of HTML:

It is a markup language and it is used to create the skeleton of a website. It is also a part of the website and you can use it in any part of the website. The Code of the Html file is given below and you can use it for this project.

<div class="header">

<!--Content before waves-->
<div class="inner-header flex">
<!--Just the logo.. Don't mind this-->
<svg version="1.1" class="logo" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" xml:space="preserve">
<path fill="#FFFFFF" stroke="#000000" stroke-width="10" stroke-miterlimit="10" d="M57,283" />
<g><path fill="#fff"
d="M250.4,0.8C112.7,0.8,1,112.4,1,250.2c0,137.7,111.7,249.4,249.4,249.4c137.7,0,249.4-111.7,249.4-249.4
C499.8,112.4,388.1,0.8,250.4,0.8z M383.8,326.3c-62,0-101.4-14.1-117.6-46.3c-17.1-34.1-2.3-75.4,13.2-104.1
c-22.4,3-38.4,9.2-47.8,18.3c-11.2,10.9-13.6,26.7-16.3,45c-3.1,20.8-6.6,44.4-25.3,62.4c-19.8,19.1-51.6,26.9-100.2,24.6l1.8-39.7		c35.9,1.6,59.7-2.9,70.8-13.6c8.9-8.6,11.1-22.9,13.5-39.6c6.3-42,14.8-99.4,141.4-99.4h41L333,166c-12.6,16-45.4,68.2-31.2,96.2	c9.2,18.3,41.5,25.6,91.2,24.2l1.1,39.8C390.5,326.2,387.1,326.3,383.8,326.3z" />
</g>
</svg>
<h1> CSS Waves</h1>
</div>

<!--Waves Container-->
<div>
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
</g>
</svg>
</div>
<!--Waves end-->

</div>
<!--Header ends-->

<!--Content starts-->
<div class="content flex">
<p>JD Khan | 2021 | FantacyDesigns</p>
</div>
<!--Content ends-->

xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" xml:space="preserve">

<g><path fill="#fff"

d="M250.4,0.8C112.7,0.8,1,112.4,1,250.2c0,137.7,111.7,249.4,249.4,249.4c137.7,0,249.4-111.7,249.4-249.4

C499.8,112.4,388.1,0.8,250.4,0.8z M383.8,326.3c-62,0-101.4-14.1-117.6-46.3c-17.1-34.1-2.3-75.4,13.2-104.1

c-22.4,3-38.4,9.2-47.8,18.3c-11.2,10.9-13.6,26.7-16.3,45c-3.1,20.8-6.6,44.4-25.3,62.4c-19.8,19.1-51.6,26.9-100.2,24.6l1.8-39.7 c35.9,1.6,59.7-2.9,70.8-13.6c8.9-8.6,11.1-22.9,13.5-39.6c6.3-42,14.8-99.4,141.4-99.4h41L333,166c-12.6,16-45.4,68.2-31.2,96.2 c9.2,18.3,41.5,25.6,91.2,24.2l1.1,39.8C390.5,326.2,387.1,326.3,383.8,326.3z" />

</g>

</svg>

<h1> CSS Waves</h1>

</div>

<div>

viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">

<defs>

</defs>

</g>

</svg>

</div>

</div>

<p>JD Khan | 2021 | FantacyDesigns</p>

</div>

Source code of CSS:

It is a markup language and it is used for designing websites so that they look attractive and responsive across all devices. Its code for design is given below and used for waves in CSS files.

@import url(//fonts.googleapis.com/css?family=Lato:300:400);

body {
  margin:0;
}

h1 {
  font-family: 'Lato', sans-serif;
  font-weight:300;
  letter-spacing: 2px;
  font-size:48px;
}
p {
  font-family: 'Lato', sans-serif;
  letter-spacing: 1px;
  font-size:14px;
  color: #333333;
}

.header {
  position:relative;
  text-align:center;
  background-image: linear-gradient(to right top, #43c078, #5ec86d, #78d061, #92d654, #aedc46);
  color:white;
}
.logo {
  width:50px;
  fill:white;
  padding-right:15px;
  display:inline-block;
  vertical-align: middle;
}

.inner-header {
  height:65vh;
  width:100%;
  margin: 0;
  padding: 0;
}

.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

.content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: white;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}

100

101

102

103

104

105

@import url(//fonts.googleapis.com/css?family=Lato:300:400);

body {

margin:0;

}

h1 {

font-family: 'Lato', sans-serif;

font-weight:300;

letter-spacing: 2px;

font-size:48px;

}

p {

font-family: 'Lato', sans-serif;

letter-spacing: 1px;

font-size:14px;

color: #333333;

}

.header {

position:relative;

text-align:center;

background-image: linear-gradient(to right top, #43c078, #5ec86d, #78d061, #92d654, #aedc46);

color:white;

}

.logo {

width:50px;

fill:white;

padding-right:15px;

display:inline-block;

vertical-align: middle;

}

.inner-header {

height:65vh;

width:100%;

margin: 0;

padding: 0;

}

.flex { /*Flexbox for containers*/

display: flex;

justify-content: center;

align-items: center;

text-align: center;

}

.waves {

position:relative;

width: 100%;

height:15vh;

margin-bottom:-7px; /*Fix for safari gap*/

min-height:100px;

max-height:150px;

}

.content {

position:relative;

height:20vh;

text-align:center;

background-color: white;

}

/* Animation */

.parallax > use {

animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;

}

.parallax > use:nth-child(1) {

animation-delay: -2s;

animation-duration: 7s;

}

.parallax > use:nth-child(2) {

animation-delay: -3s;

animation-duration: 10s;

}

.parallax > use:nth-child(3) {

animation-delay: -4s;

animation-duration: 13s;

}

.parallax > use:nth-child(4) {

animation-delay: -5s;

animation-duration: 20s;

}

@keyframes move-forever {

0% {

transform: translate3d(-90px,0,0);

}

100% {

transform: translate3d(85px,0,0);

}

/*Shrinking for mobile*/

@media (max-width: 768px) {

.waves {

height:40px;

min-height:40px;

}

.content {

height:30vh;

}

h1 {

font-size:24px;

}

Download source code:

Sometimes it’s difficult for new developers to create Html and CSS files and then connect them with each other using link tags in HTML files. For those, we have created a folder and in this folder all the necessary code files are present. So, download the code file from the below button and they use this code in your project.

Task:

As you can see we have applied the wave effect in these sections. The upper layer is moving and showing wave effects in HTML and CSS language. Now change the position of waves. Make the upper part static and enable the below section to show the wave effect.

Thanks for reading this article.

Go to top

Download Source CodeClick to Download