Hi, long time no see you Blogger Pakistan. So on this occasion I will share Tutorials on Making Wavy Water Animation to make it look attractive on the themes that you are currently using. If the theme is like that, then it won't be exciting, because the appearance is made, then just follow the existing tutorials and use them again and again, it becomes monotonous, so what other IDEs are there?
With this tutorial, you can get a good design idea that is different from the others. But it depends on how we want to make a blog.
How to Make a Corrugated Water Animation
First open Blog>> click Themes>> click Edit HTML
Second, add the following code just below the code </header>
<section>
<div class='nqnia nqnia1'></div>
<div class='nqnia nqnia2'></div>
<div class='nqnia nqnia3'></div>
<div class='nqnia nqnia4'></div>
</section>
Next add the css code directly above the code </style> or </b:skin>
section{
position: relative;
width: 100%;
height: 100vh;
background: #3586ff; // Change If You Added New Background Color
overflow: hidden;
}
section .nqnia{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjva3B0JgO6ii2jodFMmS4E75QGHgkLHU6pN0M1kTKzUmXACMzORQPu4debxq0RAadOGJkXdgRbLc2wi6hBviTKesz9_h6oXrBPnS0dsxUeh6T_swdrX_illvp-a8l_UsxdrHNrmBmWuUZo/s1600/wave.png);
background-size: 1000px 100px
}
section .nqnia.nqnia1{
animation: wave 30s linear infinite;
z-index: 1000px;
opacity: 1;
animation-delay: 0s;
bottom: 0;
}
section .nqnia.nqnia2{
animation: wave2 15s linear infinite;
z-index: 999;
opacity: 0.5;
animation-delay: -5s;
bottom: 10px;
}
section .nqnia.nqnia3{
animation: wave 30s linear infinite;
z-index: 998;
opacity: 0.2;
animation-delay: -2s;
bottom: 15px;
}
section .nqnia.nqnia4{
animation: wave2 5s linear infinite;
z-index: 997;
opacity: 0.7;
animation-delay: -5s;
bottom: 20px;
}
@keyframes wave{
0%{
background-position-x: 0px;
}
100%{
background-position-x: 1000px;
}
}
@keyframes wave2{
0%{
background-position-x: 0px;
}
100%{
background-position-x: -1000px;
}
}
Finally save the Theme