Azi sarbatorim 1 zi de nastere.
Cum sa faci o rotatie si un zoom in CSS 3?
Tehnologia browserelor evoluează iar o dată cu ea, aplicarea unor efecte asupra paginilor noastre web se face din ce în ce mai simplu. Simpla rotaţie a unei fotografii se poate realiza în Javascript de foarte mulţi ani, dar complexitatea codului este una ridicată. De o dificultate similară se “bucură” şi zoom-ul în Javascript.
Aici a intervenit CSS 3, tehnologie relativ nouă, dar care este suportată tot mai bine de browserele moderne.
Codul CSS
Primul pas constă în crearea animaţiei de bază:
COD:
@-webkit-keyframes rotater {
0% { -webkit-transform:rotate(0) scale(1) } /*-webkit-transform este animatorul animaţiei */
50% { -webkit-transform:rotate(360deg) scale(2) }
100% { -webkit-transform:rotate(720deg) scale(1) }
}
Aplicăm animaţia evenimentului hover a unei imagini:
COD:
a.advert:hover {
-webkit-animation-name:rotater;
-webkit-animation-duration:500ms;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function:ease-out;
-moz-transform:rotate(720eg) scale(2);
-moz-transition-duration:500ms;
-moz-transition-timing-function: ease-out;
}
Aici sunt folosiţi mai mulţi parametri, printre care -webkit-animation-duration ce specifică durata animaţiei, -webkit-animation-iteration-count numărul rotaţiilor, -webkit-animation-timing-function specifică modul în care se relaxează imaginea.
Puteti vedea un demo aici.
Articol preluat de la www.worldit.info
Exista 23 articole asemanatoare, apasati aici pentru lista.
- Lista tag-urilor CSS in ordine alfabetica
- Cum sa elimini comentariile din codul PHP
- Adaugarea si preluarea valorilor proprietatilor CSS
- Resetarea setarilor CSS din diferite browsere
- Ce lucruri poti face cu CSS 3?
- Introducere in Design Patterns - MVC (partea III)
- Introducere in Design Patterns - MVC (partea II)
- Introducere in Design Patterns - MVC (partea I)
- Creaza un website elegant in HTML5 si CSS 3
- Crearea Foilor de Stil
- Scrierea codului CSS
- Cateva trucuri si sfaturi pentru CSS
- Procesarea directoarelor eficient in PHP
- Cum sa extrageti rapid un rand aleatoriu din baza de date?
- Tutorial html
- div, span si etichete CSS
- Pseudoclase de stiluri CSS si modalitati de modificare a cursorului
- Exemplu de stil CSS in fisier extern
- Exemplu de stiluri inline
- Exemple de stiluri identificate
- Exemplu de clase de stiluri
- Exemplu de stiluri dedicate
- Introducere in CSS
| Nu exista comentarii la acest articol. Fii primul care isi spune parerea. |
