Skip to content

Instantly share code, notes, and snippets.

@nhatnx
Forked from bhargav2785/dabblet.css
Created December 4, 2017 04:46
Show Gist options
  • Save nhatnx/d6a7970de618a6e264eb3e1fe09bcb1e to your computer and use it in GitHub Desktop.
Save nhatnx/d6a7970de618a6e264eb3e1fe09bcb1e to your computer and use it in GitHub Desktop.
Pure CSS wave effect *
/** Pure CSS wave effect **/
div.wave{
position: relative;
width: 100%;
}
div.wave > span{
float: left;
width: 10%;
height: 200px;
animation: animate 1.5s ease-in-out alternate infinite;
}
div.wave > span:nth-child(1){
background-color: #B58900;
}
div.wave > span:nth-child(2){
background-color: #F7877C;
animation-delay: .2s;
}
div.wave > span:nth-child(3){
background-color: #0E7DA8;
animation-delay: .4s;
}
div.wave > span:nth-child(4){
background-color: #C4EADF;
animation-delay: .6s;
}
div.wave > span:nth-child(5){
background-color: #B4A4CB;
animation-delay: .8s;
}
div.wave > span:nth-child(6){
background-color: #FBD92F;
animation-delay: 1s;
}
div.wave > span:nth-child(7){
background-color: #268BD2;
animation-delay: 1.2s;
}
div.wave > span:nth-child(8){
background-color: #859900;
animation-delay: 1.4s;
}
div.wave > span:nth-child(9){
background-color: #BBFFFF;
animation-delay: 1.6s;
}
div.wave > span:nth-child(10){
background-color: #FFE8E8;
animation-delay: 1.8s;
}
@keyframes animate{
to { height: 100px; }
}
<div class='wave'>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
// alert('Hello world!');
{"view":"separate","fontsize":"60","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment