CSS Wave Animation With Swimming Boy
Anutrickz - Maybe many of you want to design their blog to make it look attractive and look cool using animated waves or waves effects. On this occasion I will provide a tutorial on How to Create Animated Wave Effects on Blogger . I made this tutorial for those of you who want to use the wave effect in your template to make it look as beautiful as possible. Because having a beautiful template will make visitors feel comfortable.
This animation does not burden your blog or website because Pure CSS "Doesn't Use Javascript" is safe for those of you who like speed but don't slow down your blog, you definitely have to use this to make it look attractive and up to date.
How to make water wave animation on a blog
- Open Blogger
- Click Themes> Click "Edit HTML"
- Add the following code above </head>
<style>
.swimmer { position: absolute; bottom:-3em; left:0; right:0; margin:auto; animation: swimmer 3s infinite; } @keyframes swimmer { 50%{bottom:-2em;} } section{ position:relative; width:100%; height:300px; overflow:hidden; } section .wave{ position:absolute; bottom:0; left:0; width:100%; height:100px; background:url('https://cdn.kcak11.com/codepen_assets/wave_animation/wave.svg'); background-size:1000px 100px; } section .wave.wave1{ animation:animate 30s linear infinite; z-index:1000; opacity:1; animation-delay:0s; bottom: 0; } section .wave.wave2{ animation:animate2 15s linear infinite; z-index:999; opacity:0.5; animation-delay:-5s; bottom: 10px; } section .wave.wave3{ animation:animate 30s linear infinite; z-index:998; opacity:0.2; animation-delay:-2s; bottom: 15px; } section .wave.wave4{ animation:animate2 5s linear infinite; z-index:997; opacity:0.7; animation-delay:-5s; bottom: 20px; } @keyframes animate{ 0%{ background-position-x: 0; } 100%{ background-position-x: 1000px; } } @keyframes animate2{ 0%{ background-position-x: 0; } 100%{ background-position-x: -1000px; } }
</style>
- Add the following code just above footer
<section>
<div class="wave wave1"></div>
<div class="wave wave2"></div>
<img src="https://i.giphy.com/media/Lpd3Jzzzudg0j7REiX/giphy.webp" class="swimmer"/>
<div class="wave wave3"></div>
<div class="wave wave4"></div>
</section>
- After that Save your template and see the results
Video tutorials