CSS: pannelli animati con i CSS3
Un semplice effetto di animazione sui pannelli ottenuto grazie alle transizioni CSS3.
Possiamo creare l’effetto dei pannelli animati usando le transizioni CSS3 e le immagini di sfondo. Per ottenere l’effetto che vogliamo utilizzeremo le proprietà background-color e background-position. Vediamo insieme i dettagli.
Partiamo da questa semplice struttura HTML:
|
1 2 3 4 |
<div id="panel">
<h2>Lorem ipsum dolor</h2>
<p>Ideo autem aquis consectetur elit set diam nonnummi.</p>
</div> |
Useremo le transizioni CSS3 sulle due proprietà citate prima intercettando il passaggio del mouse sul pannello:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#panel {
width: 35em;
padding: 2em;
background-color: #fff;
background-image: url(img/tag.png);
background-repeat: no-repeat;
background-position: 120% 0;
border: 1px solid #c4c4c4;
margin: 0 auto;
-moz-transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#panel:hover {
background-color: #c4c4c4;
background-position: 100% 0;
} |
Potete visionare l’esempio finale qui di seguito.
Demo
Download
Nessun commento
Trackback
I commenti sono chiusi.