Pessoal, realmente não sei como se chama esse efeito, se alguém souber, faça o favor de me avisar no tópico para eu trocar o título do tópico..
Enfim, eu lembro que na época do Flash, eu via muito esse efeito nos menus por ai.. Vejam o efeito aqui
É bem simples de ser feito com CSS puro..
Vejam:
Criamos o HTML do nosso menu
E usamos o seguinte CSS
O segredo está na propriedade transition, que faz com o efeito do hover demore para ser finalizado, causando esse efeito bacana ai
Espero que gostem..
Enfim, eu lembro que na época do Flash, eu via muito esse efeito nos menus por ai.. Vejam o efeito aqui
É bem simples de ser feito com CSS puro..
Vejam:
Criamos o HTML do nosso menu
- Código:
<ul>
<li><a href="#">teste</a></li>
<li><a href="#">teste</a></li>
<li><a href="#">teste</a></li>
<li><a href="#">teste</a></li>
<li><a href="#">teste</a></li>
<li><a href="#">teste</a></li>
<li><a href="#">teste</a></li>
<li><a href="#">teste</a></li>
<li><a href="#">teste</a></li>
<li><a href="#">teste</a></li>
<li><a href="#">teste</a></li>
<li><a href="#">teste</a></li>
<li><a href="#">teste</a></li>
<li><a href="#">teste</a></li>
<li><a href="#">teste</a></li>
</ul>
E usamos o seguinte CSS
- Código:
ul{
width: 500px;
margin: 0;
padding: 0;
background-color: #e34444;
font: 13px Verdana, sans-serif;
}
li a{
display: block;
color: #fff;
padding: .5em;
text-align: center;
-moz-transition: background-color .3s ease-in;
-webkit-transition: background-color .3s ease-in;
-o-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
li a:hover{
background-color: #ac2424;
color: #fff;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}
O segredo está na propriedade transition, que faz com o efeito do hover demore para ser finalizado, causando esse efeito bacana ai
Espero que gostem..