Este é, sem dúvida, um dos efeitos mais divertidos de CSS 3. A propriedade
transition (transição) faz com que as mudanças de posição, cores, cantos e tamanhos de um elemento sejam gradativas. Quanto maior a duração, mais suave será o fade.Para ver o recurso em ação, coloque o cursor do mouse dentro do retângulo abaixo. Mantenha o ponteiro sobre o retângulo durante toda a transição para ver a mudança até o final.
— O que é isto?
— Apenas um teste legal!
► Exemplo simples
<style> div#facil {margin:auto; color:#000000; background:yellowgreen; width:100px; height:100px; transition:all 5s; -moz-transition:all 5s;
-o-transition:all 5s; -webkit-transition:all 5s;} div#facil:hover {background:greenyellow; width:450px;} </style>
<div id="facil">Este exemplo é mais fácil de entender.</div>
Resultado:
Este exemplo é mais fácil de entender.
► Exemplo complexo
No primeiro exemplo deste post foi utilizado o seguinte código:
<head> <style type="text/css"> div#muda {padding:10px; margin:20px; margin-left:auto; margin-right:auto; color:#40E0D0; font-size:30px; width:400px; height:100px; background-color:#40E0D0; box-shadow: 10px 10px 35px #40E0D0; border:13px solid #AFEEEE; transition:all 5s linear; -moz-transition:all 5s linear;
-webkit-transition:all 5s linear; -o-transition:all 5s linear;} div#muda:hover { margin:40px; margin-left:auto; margin-right:auto; color:white; font-size:50px; width:300px; height:300px; background-color:salmon; box-shadow: 10px 10px 10px #F08080; border:1px solid #F08080;} </style> </head> <body> <div id='muda'><span style='color:salmon;'>— O que é isto?</span><br/>— Apenas um teste legal!</div> </body>
Resultado:
— O que é isto?
— Apenas um teste legal!
Esperam que tenham gostado..
0 comentários:
Postar um comentário