Socials Water Wave

HTML
<ul class="socials"> <li><a href="#"><i class="fa fa-dribbble"></i></a></li> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-flickr"></i></a></li> <li><a href="#"><i class="fa fa-github"></i></a></li> </ul>
LESS
/* Mixins */ .transform(@arguments){ -webkit-transform: @arguments; -moz-transform: @arguments; -ms-transform: @arguments; -o-transform: @arguments; transform: @arguments; } .round(@radius: 3px){ border-radius: @radius; } .transition(@duration: 0.3s; @property: all; @timing-function: ease-in-out; @delay: 0){ -webkit-transition: @arguments; transition: @arguments; } .radial-gradient(@first-color: #fff; @second-color: #000; @position: center; @stop: 60%){ background-color: @first-color; background-image: -webkit-radial-gradient(@position, @first-color, @second-color @stop); background-image: -moz-radial-gradient(@position, @first-color, @second-color @stop); background-image: -ms-radial-gradient(@position, @first-color, @second-color @stop); background-image: -o-radial-gradient(@position, @first-color, @second-color @stop); background-image: radial-gradient(@position, @first-color, @second-color @stop); } /* Animations */ @-webkit-keyframes puff{ 0%{ opacity: 1; .transform(scale(1)); } 100%{ opacity: 0; .transform(scale(1.7)); } } @keyframes puff{ 0%{ opacity: 1; .transform(scale(1)); } 100%{ opacity: 0; .transform(scale(1.7)); } } /* Styles */ body{ color: white; background: #343434; font-family: sans-serif; text-align: center; padding-top: 26%; &:before{ content: ''; display: inline-block; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 0; .radial-gradient(circle, rgba(255, 255, 255, 0.06); transparent); } } a{ color: white; } .socials{ text-align: center; li{ display: inline-block; margin-left: 6px; margin-right: 6px; a{ color: white; display: inline-block; width: 50px; height: 50px; border: 1px solid white; .round(50em); .transition(@timing-function: ease-out); position: relative; i{ font-size: 1.5em; line-height: 2.2em; } &:after{ content: ''; display: inline-block; width: 50px; height: 50px; position: absolute; top: -1px; left: -1px; border: 1px solid #fff; .transition; .round(50em); opacity: 0; } &:before{ content: ''; display: inline-block; width: 50px; height: 50px; position: absolute; top: -1px; left: -1px; border: 1px solid #fff; .transition; .round(50em); opacity: 0; } &:hover{ .transform(scale(1.2)); &:after{ -webkit-animation: puff 0.5s ease-in alternate; animation: puff 0.5s ease-in alternate; } &:before{ -webkit-animation: puff 0.6s 0.18s ease-in-out alternate; animation: puff 0.6s 0.18s ease-in-out alternate; } } } } }
JAVASCRIPT
Expand for more options Login