Efeito swinger e efeito Dragqueen

Olá boa noite, tudo certo sumidos?（’-’*) Gente do céu eu tô muito viciada no spotify como é que eu não sabia disso antes? Quer dizer eu sabia que existia mas nunca tinha prestado muito atenção sabe? Baixei para o pc e gente eu não preciso mais ficar baixando música e criando playlists. Isso é muito bom pois não ocupa mais memória do meu precioso HD  hahaha Pois só de música eu tenho uns 5 giga, isso para apenas música é muita coisa hehe Mas então, ai vai uma dica para quem ainda não tem, baixem por favor \(*ᗢ*)☆

Amores, aproveitem que essa semana já está acabando e peçam algo na ask ok? Semana que vem volta a tortura tudo de novo (faculdade) e eu acredito que eu irei ficar um pouco ausente do blog , como sempre né? Desculpem (ToT) Mas será assim e eu acho que todo mundo já está acostumado com isso. Antes ausente que não postar nada né? Ah, e não reparem nos nomes que dei para os efeitos tá? Foi o que veio na minha cabeça no momento hahaha E até que ficou legal esses efeitos, mexi mexi e acabou dando nisso.

LIVE PREVIEW Aqui.

Vá até o seu modelo clique em editar em html, dentro procure por ]]skin; e acima dele cole o código do efeito que desejar.

Efeito Swinger

.swing {height:auto;width:auto;}
.swing img {width:60px; height:60px; background:#fff;border:1px solid #eee; padding:4px;opacity:.90;-webkit-transition: all 0.99s ease-in-out;}
.swing img:hover{
  animation: swinger linear 1s;
  animation-iteration-count: infinite;
  transform-origin: 50% 0%;
  -webkit-animation: swinger linear 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 0%;
  -moz-animation: swinger linear 1s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 0%;
  -o-animation: swinger linear 1s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 0%;
  -ms-animation: swinger linear 1s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 0%;
}
@keyframes swinger{
  0% {
    transform:  rotate(0deg) ;
  }
  20% {
    transform:  rotate(15deg) ;
  }
  40% {
    transform:  rotate(-10deg) ;
  }
  60% {
    transform:  rotate(5deg) ;
  }
  80% {
    transform:  rotate(-5deg) ;
  }
  100% {
    transform:  rotate(0deg) ;
  }
}
@-moz-keyframes swinger{
  0% {
    -moz-transform:  rotate(0deg) ;
  }
  20% {
    -moz-transform:  rotate(15deg) ;
  }
  40% {
    -moz-transform:  rotate(-10deg) ;
  }
  60% {
    -moz-transform:  rotate(5deg) ;
  }
  80% {
    -moz-transform:  rotate(-5deg) ;
  }
  100% {
    -moz-transform:  rotate(0deg) ;
  }
}
@-webkit-keyframes swinger {
  0% {
    -webkit-transform:  rotate(0deg) ;
  }
  20% {
    -webkit-transform:  rotate(15deg) ;
  }
  40% {
    -webkit-transform:  rotate(-10deg) ;
  }
  60% {
    -webkit-transform:  rotate(5deg) ;
  }
  80% {
    -webkit-transform:  rotate(-5deg) ;
  }
  100% {
    -webkit-transform:  rotate(0deg) ;
  }
}
@-o-keyframes swinger {
  0% {
    -o-transform:  rotate(0deg) ;
  }
  20% {
    -o-transform:  rotate(15deg) ;
  }
  40% {
    -o-transform:  rotate(-10deg) ;
  }
  60% {
    -o-transform:  rotate(5deg) ;
  }
  80% {
    -o-transform:  rotate(-5deg) ;
  }
  100% {
    -o-transform:  rotate(0deg) ;
  }
}
@-ms-keyframes swinger {
  0% {
    -ms-transform:  rotate(0deg) ;
  }
  20% {
    -ms-transform:  rotate(15deg) ;
  }
  40% {
    -ms-transform:  rotate(-10deg) ;
  }
  60% {
    -ms-transform:  rotate(5deg) ;
  }
  80% {
    -ms-transform:  rotate(-5deg) ;
  }
  100% {
    -ms-transform:  rotate(0deg) ;
  }
}

Efeito Dragqueen

.Drag {height:auto;width:auto;}
.Drag img {width:60px; height:60px; background:#fff;border:1px solid #eee; padding:4px;opacity:.90;-webkit-transition: all 0.99s ease-in-out;}
.Drag img:hover{
  animation: Dragqueen linear 0.7s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: Dragqueen linear 0.7s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: Dragqueen linear 0.7s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: Dragqueen linear 0.7s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: Dragqueen linear 0.7s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}
@keyframes Dragqueen{
  0% {
    opacity:0;
    transform:  rotate(-200deg) ;
  }
  100% {
    opacity:1;
    transform:  rotate(0deg) ;
  }
}
@-moz-keyframes Dragqueen{
  0% {
    opacity:0;
    -moz-transform:  rotate(-200deg) ;
  }
  100% {
    opacity:1;
    -moz-transform:  rotate(0deg) ;
  }
}
@-webkit-keyframes Dragqueen {
  0% {
    opacity:0;
    -webkit-transform:  rotate(-200deg) ;
  }
  100% {
    opacity:1;
    -webkit-transform:  rotate(0deg) ;
  }
}
@-o-keyframes Dragqueen {
  0% {
    opacity:0;
    -o-transform:  rotate(-200deg) ;
  }
  100% {
    opacity:1;
    -o-transform:  rotate(0deg) ;
  }
}
@-ms-keyframes Dragqueen {
  0% {
    opacity:0;
    -ms-transform:  rotate(-200deg) ;
  }
  100% {
    opacity:1;
    -ms-transform:  rotate(0deg) ;
  }
}

Links:

<div class="swing">

<center>

<a href="/" target="blank" title="NOME"><img src="LINK"/>

<a href="/" target="blank" title="NOME"><img src="LINK"/>

<a href="/" target="blank" title="NOME"><img src="LINK"/>

</a></a></a>

</center>

</div>

<div class="Drag">

<center>

<a href="/" target="blank" title="NOME"><img src="LINK"/>

<a href="/" target="blank" title="NOME"><img src="LINK"/>

<a href="/" target="blank" title="NOME"><img src="LINK"/>

</a></a></a>

</center>

</div>