There was talk on our internal chat ( https://chat.vanila.io) about how https://itmeo.com/ have beautiful animation, and a member asked if someone can hack it. :) So I decide to examine their code and make just animation snippet code out of it.
Created
April 9, 2021 13:33
-
-
Save Timtaran/1b56710573f0d6786af69617e9d26907 to your computer and use it in GitHub Desktop.
CSS Wave Animation with a .png
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="waveWrapper waveAnimation"> | |
| <div class="waveWrapperInner bgTop"> | |
| <div class="wave waveTop" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-top.png')"></div> | |
| </div> | |
| <div class="waveWrapperInner bgMiddle"> | |
| <div class="wave waveMiddle" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')"></div> | |
| </div> | |
| <div class="waveWrapperInner bgBottom"> | |
| <div class="wave waveBottom" style="background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')"></div> | |
| </div> | |
| </div> | |
| <head> | |
| <p>Hi</p> | |
| </head> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @keyframes move_wave { | |
| 0% { | |
| transform: translateX(0) translateZ(0) scaleY(1) | |
| } | |
| 50% { | |
| transform: translateX(-25%) translateZ(0) scaleY(0.55) | |
| } | |
| 100% { | |
| transform: translateX(-50%) translateZ(0) scaleY(1) | |
| } | |
| } | |
| .waveWrapper { | |
| overflow: hidden; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| top: 0; | |
| margin: auto; | |
| } | |
| .waveWrapperInner { | |
| position: absolute; | |
| width: 100%; | |
| overflow: hidden; | |
| height: 100%; | |
| bottom: -1px; | |
| background-image: linear-gradient(to top, #8AE061 20%, #3BD8BB 80%); | |
| } | |
| .bgTop { | |
| z-index: 15; | |
| opacity: 0.5; | |
| } | |
| .bgMiddle { | |
| z-index: 10; | |
| opacity: 0.75; | |
| } | |
| .bgBottom { | |
| z-index: 5; | |
| } | |
| .wave { | |
| position: absolute; | |
| left: 0; | |
| width: 200%; | |
| height: 100%; | |
| background-repeat: repeat no-repeat; | |
| background-position: 0 bottom; | |
| transform-origin: center bottom; | |
| } | |
| .waveTop { | |
| background-size: 50% 100px; | |
| } | |
| .waveAnimation .waveTop { | |
| animation: move-wave 3s; | |
| -webkit-animation: move-wave 3s; | |
| -webkit-animation-delay: 1s; | |
| animation-delay: 1s; | |
| } | |
| .waveMiddle { | |
| background-size: 50% 120px; | |
| } | |
| .waveAnimation .waveMiddle { | |
| animation: move_wave 10s linear infinite; | |
| } | |
| .waveBottom { | |
| background-size: 50% 100px; | |
| } | |
| .waveAnimation .waveBottom { | |
| animation: move_wave 15s linear infinite; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment