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>
Querem ver os perfis de quem posta aqui? cliquem na imagem᠉
Continue

6 comentários:

  1. Olá. O spotify é bom mesmo pra gente como a gente que cria uns dez playlist pra ouvir e a memória do hd acaba. A única coisa ruim é que se a gente não pagar depois de um mês ele meio que "trava" não sei se no computador é assim. O efeito ficou maravilhoso, achei tão legal. Beijos!

    Eleutheromania

    ResponderExcluir
    Respostas
    1. Sim cara, Ele é perfeito! Não sei como não tinha ele antes já T^T

      Obrigada, fico feliz que tenha gostado ;) Beijos!

      Excluir
  2. Yoo! ~mudando a saudação, porque, né?~

    Ai que pessoa criativa, meodeus! Sempre criando efeitos, tutos... Que mente abençoada! Além da super criatividade, acho incrível vocês que entendem de html, juntar um código com o outro e conseguir criar um efeito super legal. Eu não tenho capacidade para isso (~Eu já disse isso várias vezes, né? Mas fazer o que? É a realidade~).
    Adorei esses efeitos (~adorei os nomes também hahaha~), principalmente o efeito "Dragqueen". Achei muito lindinho! Com certeza vou usar!
    Sério que tu também tem 5GB de música? Eu tenho uns 6giga e pokinho hahaha. Fico feliz que eu não sou a única viciada em música!
    Interessante esse negócio de spotify. Sempre ouço as pessoas falando bem dele... acho que vou baixar também, já que você gostou tanto, quem sabe eu goste também, né? E como você disse, assim não fica ocupando memória do HD. E olha que legal, ele cria playlists também? Gostei u_u Vou testar!
    Ai, que pena que a sua faculdade vai voltar, estava gostando/me acostumando em te ver por aqui com tanta frequência T^T De qualquer forma, boa volta as aulas! #Fighting
    Enfim, obrigada pelos efeitos, Roh! Até a próxima!
    ~ Chuuuu

    ResponderExcluir
    Respostas
    1. ASUAHSUAHUSHA nem sou tão criativa assim não, as vezes fico semanas pensando no que postar e fico testando altas coisas. Nem sempre é fácil criar coisas, muitas vezes é até cansativo.
      Gostou dos nomes? AUSHUAHSuahs eu achei tão nada a ver, mas foram os únicos nomes que vieram a minha mente então aguentem!
      Pois é, eu também lamento, faculdade é ótimo mas também é froids, mas, é a vida né?

      beijos!

      Excluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)

Layout e codificação por Roh A.Ramos Os blogs que mais ajudaram com os tutoriais foram: CHIHDVCA Tecnologia do Blogger ♡ 2012 a 2017