Nesse post vou mostrar como deixar seus ícones de redes sociais animados com css, mas você pode aplicar o efeito a qualquer coisa que quiser em seu layout.
Para fazer isso, não vou usar imagem nenhuma, mas sim uma fonte de ícones (tem quase todos que se possa imaginar) chamada FontAwesome, que mencionei nesse post, no tutorial do Helplogger. Se você já tem a fonte em seu template, beleza! Se não, adicione-a abaixo de <head> no html do seu modelo.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Para usar os ícones:
<i class='fa fa-nomedoicone'/>
Por exemplo, se quiser usar o ícone do Facebook, mude nomedoicone para facebook; se quiser uma patinha, mude nomedoicone para paw... Aqui tem a lista de todos os ícones que a fonte permite adicionar: icons.
Mas precisamos primeiro incluir um estilo geral, para que o código acima vá dentro da id que será criada; vamos personalizar: cole isso onde quiser que os ícones apareçam: <style>
#fawesomeicons a {
color: deeppink;
display: inline-block;
font-size: 20px;
margin: 0 6px 6px;
font-family: fontawesome;
}
#fawesomeicons a:hover{
color: #fcc;
}
</style>
<center>
<div id='fawesomeicons'>
<a href='http://facebook.com/' title='Facebook'><i class='fa fa-facebook'/></a>
<a href='https://plus.google.com/' title='Google+'><i class='fa fa-google-plus'/></a>
<a href='https://twitter.com/' title='Twitter'><i class='fa fa-twitter'/></a>
<a href='http://weheartit.com/' title='Weheartit'><i class='fa fa-heart'/></a>
</div>
</center>
Substitua os links pelos seus. O resultado será como na imagem abaixo:
Agora, vamos animar! É possível personalizar cada ícone separadamente. O segredo está no código que se coloca em hover, quando o mouse passa sobre o ícone. Como exemplo, vou mostrar como apliquei o efeito bounce e pulse nos ícones que uso atualmente. Cole antes de </style> do código anterior:
#fawesomeicons a .fa-facebook {
font-family:'FontAwesome';
background: deeppink;
background-size: 100px;
border-radius: 10px;
padding: 5px 15px 5px 5px;
color: white;
}
/*EFEITO BOUNCE*/
#fawesomeicons a .fa-facebook:hover {
-webkit-animation: bounce .9s 1;
-moz-animation: bounce .9s 1;
-o-animation: bounce .9s 1;
animation: bounce .9s 1;
}
@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);
animation-timing-function:cubic-bezier(0.215,.61,.355,1);
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0)}
40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);
animation-timing-function:cubic-bezier(0.755,.050,.855,.060);
-webkit-transform:translate3d(0,-30px,0);
transform:translate3d(0,-30px,0)}
70%{-webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);
animation-timing-function:cubic-bezier(0.755,.050,.855,.060);
-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}
90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}
}
@keyframes bounce{0%,100%,20%,53%,80%{-webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);
animation-timing-function:cubic-bezier(0.215,.61,.355,1);
-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);
animation-timing-function:cubic-bezier(0.755,.050,.855,.060);
-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}
70%{-webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);
animation-timing-function:cubic-bezier(0.755,.050,.855,.060);
-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}
90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}
.bounce{-webkit-animation-name:bounce;animation-name:bounce;
-webkit-transform-origin:center bottom;
transform-origin:center bottom}
Para aplicar em outro, repita o código trocando a palavra facebook pelo nome do ícone que deseja animar.
No coração, apliquei o efeito pulse:
#fawesomeicons a .fa-heart {
color: red;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}
#fawesomeicons a .fa-heart:hover{
-webkit-animation: smallToBig 300ms alternate infinite ease;
-moz-animation: smallToBig 300ms alternate infinite ease;
}
@-webkit-keyframes smallToBig{from {-webkit-transform: scale(1);}to {-webkit-transform: scale(1.1);}}
@-moz-keyframes smallToBig{from {-moz-transform: scale(1);}to {-moz-transform: scale(1.1);}}
E pode aplicar mais efeitos que quiser, como esse (shake) e outros que postei pelo blog, lembra do menu de marshmallow? Fica super fofo. Bye!
Imagem: Weheartit.com
adorei o seu blog amei 💜💜💜
ResponderExcluir