<div class="container">
<nav>
<a href="#" class="icon icon-twitter-1"></a>
<a href="#" class="icon icon-github-01"></a>
<a href="#" class="icon icon-evernote"></a>
<a href="#" class="icon icon-reddit"></a>
<a href="#" class="icon icon-chn-tencent-03"></a>
<a href="#" class="icon icon-android"></a>
<a href="#" class="icon icon-brw-firefox"></a>
<a href="#" class="icon icon-creativesloth"></a>
</nav>
</div>
@import "compass/css3";
$red: #f33e6f;
$yellow: #fdb45c;
@keyframes jump {
from {
text-shadow:
1px 1px 1px #fff,
1px 0px 40px rgba(0,0,0,.1) }
to {
opacity: .4;
text-shadow:
0px 0px 0px #fff,
1px -60px 0px rgba(0,0,0,.8) }
}
@keyframes jump-active {
from {
text-shadow:
1px 1px 1px #fff,
1px 0px 40px rgba(0,0,0,.1) }
to {
opacity: 1;
text-shadow:
0px 0px 0px #fff,
1px -80px 0px black }
}
*{
box-sizing: border-box;
}
html{
height: 100%;
border-top: 8px solid #282b36;
}
body{
background: $red;
position: relative;
height: 100%;
}
.container{
width: 100%;
min-height: 100%;
background: white;
margin-top: 10px;
background-image: linear-gradient(#7a9da9,#fff5ee);
box-shadow: inset 0 0 400px hsla(0,0%,0%,.1);
}
nav{
width: 700px;
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -350px;
}
.icon{
display: block;
text-decoration: none;
color: $red;
text-align: center;
font-size: 4em;
float: left;
margin-left: 15px;
text-shadow:
1px 1px 1px #fff,
0px 0px 0px rgba(0,0,0,.8);
&:hover{
transform: scale(1.1);
animation: jump .4s infinite alternate;
}
&.active{
transform: scale(1.1);
animation: jump-active .4s infinite alternate;
}
}
@media screen and (max-width: 760px) {
nav{
width: 95%!important;
margin-left: -48%;
}
}
View Compiled
/*------------------------------------*\
SIMPLE MENU, playing with text-shadow probably useless but fun tested in Webkit only
\*------------------------------------*/
$('.icon').on('click', function(){
$('.icon').removeClass('active');
$(this).addClass('active');
})