dev [CODE] SocialIcons

[Luiiiz]

Já possui um tempo que fiz esse menu social,

e hoje resolvi postar aqui para vocês.

OBS: Precisa de Jquery

 

 

 

Link Codepen(Para copiar melhor o link e ver como funciona):

https://codepen.io/Luiiiiz/pen/Ojoeoa

 

 

 

HTML

 

 

<div class="MainSocials">
  <ul>
    <li><a href="#facebook" class="fa fa-facebook"></a></li>
    <li><a href="#twitter" class="fa fa-twitter"></a></li>
    <li><a href="#google" class="fa fa-google-plus"></a></li>
    <li><a href="#play" class="fa fa-play"></a></li>
    <li><a href="#close" class="fa fa-close" id="close"></a></li>
  </ul>
</div>

 

 

 

 

CSS

 

 

.container {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
 
.item {
  width: 100px;
  height: 10px;
  position: absolute;
}
 
.item1 {
  background-color: #f1c40f;
  top: 0;
  left: 0;
  z-index: 1;
  animation: item1 1.8s infinite;
}
 
.item2 {
  background-color: #e67e22;
  top: 0;
  right: 0;
  animation: item2 1.8s infinite;
}
 
 
@keyframes item1 {
  0%, 100% {transform: translate(0, 0); height: 10px; width: 20px;} 
  25% {transform: translate(50px, 0px); height: 10px; width: 100px;} 
  50% {transform: translate(50px, 50px); height: 100px; width: 100px;}
  75% {transform: translate(50px, 0px); height: 10px; width: 100px;}
}
 
@keyframes item2 {
  0%, 100% {transform: translate(0, 0); height: 10px; width: 20px;} 
  25% {transform: translate(-50px, 0);  height: 10px; width: 100px;}
  50% {transform: translate(-50px, -50px); height: 100px; width: 100px;} 
  75% {transform: translate(-50px, 0px); height: 10px; width: 100px;} 
}

 

 

 

JS

 

 

$(function() {
    $( "#close" ).click(function() {
        $( ".MainSocials" ).delay(1).fadeToggle();
    });
});