Eu descobri a pouco tempo que o css sozinho é capas de criar algumas animações bem interessantes. Uma delas eu coloquei nos links das tags. Se você usa o IE nem deve ter notado, mas se usa o Safari ou Chrome deve ter achado o máximo, como eu =D. Se vc curtiu eu dou a barbada de como criar.
.cpojer-links a {
display: inline-block;
padding: 4px;
outline: 0;
color: #3a599d;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
-o-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
.cpojer-links a:hover {
background: #3a599d;
text-decoration: none;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transform: scale(1.05) rotate(-1deg);
-moz-transform: scale(1.05) rotate(-1deg);
-o-transform: scale(1.05) rotate(-1deg);
transform: scale(1.05) rotate(-1deg);
}
.cpojer-links a:nth-child(2n):hover {
-webkit-transform: scale(1.05) rotate(1deg);
-moz-transform: scale(1.05) rotate(1deg);
-o-transform: scale(1.05) rotate(1deg);
transform: scale(1.05) rotate(1deg);
}
Esse é todo o código que vc vai precisar. Talvez vc vai querer um container diferente pra tag <a>. Mas tenho certeza que vc consegue ajeitar o seu html e esse css sem problemas pra fechar com a sua necessidade.
Essa animação, infelizmente só roda hoje no chrome, safari e opera. O Firefox não roda as transições, mas o transform sozinho já da um efeito bem agradável. Nas novas versões beta do FF e IE (4 e 9 respectivamente) a transição já funciona. Então é implementar e esperar pelo futuro preparado =D.
[Christoph Pojer via David Walsh]
2 comentários:
Woori Casino No Deposit Bonus 2021 | Free Play in Demo
Woori Casino offers a variety of free spins and no deposit gri-go.com bonuses, as well as regular nba매니아 promotions. As https://septcasino.com/review/merit-casino/ you https://octcasino.com/ can't claim this offer without being novcasino registered
Try video poker at no cost and study the fundamental of the sport. Choose from over 167 free games from main providers like NetEnt and Betsoft right right here. ITech Labs is a testing and certification lab for Online Gaming methods, specializing in compliance, software program high quality, reporting and delivery. Having testing completed by iTech Labs ensures that games and gaming methods comply with all related standards, 빅카지노 and that they are honest, dependable and resilient. Casino.org is the world’s main impartial on-line gaming authority, offering trusted on-line casino information, guides, critiques and data since 1995.
Postar um comentário