Com a nova serie de efeitos eu estou aqui falando sobre a propriedade de transição de efeitos a famosa "transition" ela permite fazer efeitos realmente fantásticos com um simples passar do mouse ou algo mais complexo feito com javascript que eu utilizo muito aqui no blog, e agora irei compartilhar com vocês essa fantástica propriedade que permite movimento em imagens crescimento das mesmas, girar objetos, mudar cores de algo, fazer algo aparecer ao passar do mouse entre outras inúmeras possibilidades!Vamos agora ve-la:
Sua estrutura...
Como essa propriedade controla o tempo de transição ela vai ter varias propriedades mas eu prefiro fazer algo mais resumido que para mim tem o mesmo efeito.Olhe:
-webkit-transition: all 3s;
-moz-transition: all 3s;
-o-transition: all 3s;
transition: all 3s;
-webkit-transition: all 3s;
-moz-transition: all 3s;
-o-transition: all 3s;
transition: all 3s;
Explicando:
O "transition" se refere a propriedade de transição ou seja da mudança, o 3s significa o tempo em segundos da mudança e o "all" se refere ao o que terá o efeito, nesse caso o atributo são todos os atributos possíveis e como sempre, eu colocarei alguns exemplos:
Div, ela funciona em todos navegadores,ou quase(IE) passe o mouse!
<html>Acho que com apenas esse exemplo você pode ver o poder dessa propriedade.
<head>
<style type="text/css">
#ex{
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
border: 2px solid blue;
background: black;
color: #ffffff;
width: 210px;
-webkit-transition: all 3s;
-moz-transition: all 3s;
-o-transition: all 3s;
transition: all 3s;
}
#ex:hover{
opacity: 0.6;
border: 2px solid black;
background: blue;
font-size: 36px;
width: 420px;
height: 220px;
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
transform: rotate(720deg);
}
</style>
</head>
<body>
<br />
<div id="ex">
Div, ela funciona em todos navegadores,ou quase(IE) passe o mouse!
</div>
</body>
</html>
Ate a próxima postagem!
Nenhum comentário:
Postar um comentário
Se te ajudou essa postagem, comente!Se você gostou da postagem,Comente!Se encontrou um erro, Comente!Se tem um critica,Comente!Alias não custa nada.