Buna ziua, dragi vizitatori! Următoarea lecție CSS se referă la crearea unei animații GIF care este activată atunci când mouse-ul se sprijină pe o imagine statică. Metoda care va fi subliniată în această lecție a fost inventată la sfârșitul anilor 90, când GIF a fost practic singurul purtător de animație pe Internet. Astăzi, el a dat calea conducătorului, dar rămâne destul de popular, ca metoda, a cărei viziune o voi da acum.
Pentru a completa lecția, avem nevoie de 2 fișiere (imagini): o imagine statică și o animație gif. Imaginile trebuie să aibă aceeași dimensiune.
În mod tradițional, creăm fișiere index.html și stil.css și scriem acest cod inițial în documentul web:
Acum trebuie să creați în html chiar construcția imaginii ca referință. Noi scriem următoarele:
Deci, am terminat cu html, acum îl puteți închide și puteți începe să lucrați cu stiluri. Să scriem stiluri stil.css pentru întregul bloc GIF:
gif display # 58; bloc;
lățime # 58; 500px;
înălțime # 58; 100px;
fundal # 58; url # 40; stat.gif # 41; fără repetare;
>
După cum puteți vedea, imaginea inițială (statică) este setată ca fundal a blocului cu lățimea și înălțimea acestei imagini. Acum avem nevoie ca animația noastră să nu fie vizibilă într-o situație în care mouse-ul nu este în vedere. Pentru a face acest lucru, scriem acest stil:
a.gif img vizibilitate # 58; ascuns;
>
Apoi, trebuie să vă asigurați că fundalul (imaginea statică) nu este vizibil când plasați mouse-ul pe mouse:
Ramane doar sa aratam navigatia noastra:
a.gif # 58; hover img vizibilitate # 58; vizibil;
frontieră # 58; 0;
>
Asta e tot. Metoda noastră funcționează cu succes în toate browserele.
Pentru a porni animația când faceți clic pe o legătură, nu când treceți peste aceasta, trebuie doar să înlocuiți toți parametrii hibernați cu activi.
Vă mulțumesc pentru atenție!
Compatibilitate: Internet Explorer 6 - 7; Mozilla Firefox 2.xx - 3.0; Opera 8.xx - 9.xx
---------------------------------------
Reguli pentru copierea materialelor lecției
Demo
Descărcați lecția (zip, 49 Kb)
Articole similare
Trimiteți-le prietenilor: