Do you want to create a Cool looking CSS wave animation for your next project? If yes then here is a step-by-step tutorial on how to do that.
This is a custom Waifu version, However, you can modify it.
Let’s start:
Basic HTML Structure
As you might already know that every webpage is made of HTML structure. And this project is no exception. We will start by creating a basic HTML structure –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Waves Animation (Waifu version)</title>
</head>
<body>
<main></main>
<footer></footer>
</body>
</html>
This is the basic HTML structure that I use for every Project. (Feel free to Copy it)
In this code, we have a main section and a footer section which I have created using the main and the footer elements.
Let’s move to the fun part.
Creating the waves in SVG using HTML
We will use SVG to create the waves for your footer. If you are wondering what is an SVG (Scalable Vector Graphic) then read this article on Wikipedia – SVG
Also Read – How to create book flip animation CSS
Let’s move on to the code part
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Waves Animation (Waifu version)</title>
</head>
<body>
<main></main>
<footer>
<!--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(194,155,119,0.7)"
/>
<use
xlink:href="#gentle-wave"
x="48"
y="3"
fill="rgba(194,155,119,0.5)"
/>
<use
xlink:href="#gentle-wave"
x="48"
y="5"
fill="rgba(194,155,119,0.3)"
/>
<use
xlink:href="#gentle-wave"
x="48"
y="7"
fill="rgba(194,155,119, 1)"
/>
</g>
</svg>
</div>
<!--Waves end-->
</footer>
</body>
</html>
As you can see I have used the svg element of HTML to create our waves. You can use vector graphic tools to create the Waves, But for now, we will stick to the HTML version of SVG.
If you want to know more then here is an article from W3Schools – HTML SVG Graphics
Let’s also create an area to add our footer text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Waves Animation (Waifu version)</title>
</head>
<body>
<main></main>
<footer>
<!--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(194,155,119,0.7)"
/>
<use
xlink:href="#gentle-wave"
x="48"
y="3"
fill="rgba(194,155,119,0.5)"
/>
<use
xlink:href="#gentle-wave"
x="48"
y="5"
fill="rgba(194,155,119,0.3)"
/>
<use
xlink:href="#gentle-wave"
x="48"
y="7"
fill="rgba(194,155,119, 1)"
/>
</g>
</svg>
</div>
<!--Waves end-->
<!-- Footer Content starts-->
<div class="footer-content flex">
<p style="color: white">
Made with ❤️ By  
<a href="http://www.rareprogrammer.com/" style="color: #9c5b52">
RareProgrammer</a
>
</p>
</div>
<!-- Footer Content ends-->
</footer>
</body>
</html>
Let’s admit it, We all want to add that sweet credit or copyright section on our website.
Now, let’s move on to the creative part,
Yep! It’s CSS time 🙂
Add CSS
Let’s start with some basic style, and by adding a picture of our Waifu as the background
body {
margin:0;
background: url("Waifu.jpg") no-repeat center center fixed;
background-size: cover;
}
footer>p {
font-family: sans-serif;
letter-spacing: 1px;
font-size:14px;
color: #333333;
}
.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;
margin-top: auto;
}
.footer-content {
position:relative;
text-align:center;
background-color: #c29b77;
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
.waves {
height:40px;
min-height:10px;
}
}Here I have also taken care of the mobile version by using the CSS @media at-rule.
But, right now Our footer is at the very top of our website.
Why is that?
That’s because we have no content in our body except the footer. We can fix this issue temporally with CSS.
We will add the below code to our CSS file
body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}Refresh the page and the footer should be at the bottom of the screen.
Let’s move to the animation part:
Adding CSS for Wave animation
We can easily create animation in CSS with the CSS @keyframes at-rule.
Here is the code with the animation –
body {
margin:0;
background: url("Waifu.jpg") no-repeat center center fixed;
background-size: cover;
}
/* This is to make the Footer stick to the bottom of the screen (Remove it in the production version) */
body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* ----------------------------------------------------------------------------------- */
footer>p {
font-family: sans-serif;
letter-spacing: 1px;
font-size:14px;
color: #333333;
}
.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;
margin-top: auto;
}
.footer-content {
position:relative;
text-align:center;
background-color: #c29b77;
}
/* 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:10px;
}
}Boom! There you have it. Your very own CSS Wave animation Footer with a Waifu background.
Source Code
The source code is available on Github, Here is the link – CSS-Wave-Waifu-version
