19. lecke css
Szia kedves látogató! CSS következő lecke fordítják létrehozásának gif-animáció, akkor aktiválódnak, amikor az egérrel egy statikus kép. A módszer fogja körvonalazni a leckét, amikor feltalálták a '90 -es évek végén, amikor a gif gyakorlatilag az egyetlen szállító az animáció az interneten. Ma adta el a vezető, de továbbra is nagyon népszerű, mint módszer, a látás, amit most jelen.
Elvégezni a leckét, szükségünk lesz 2 fájl (képek): egy állóképes és gif-animáció. A kép legyen az azonos méretű.
Hagyományosan fájlok létrehozását index.html és style.css és írjon egy web dokumentum start kód:
Most létre kell hoznunk a html design is, mint a referencia képet. Írunk a következő:
Tehát végül a html, akkor most zárja be, és kap munkát stílusok. Írunk style.css stílusok az egész blokk gif:
gif kijelző # 58; blokkot;
szélesség # 58; 500px;
magassága # 58; 100px;
háttér # 58; url # 40; stat.gif # 41; no-repeat;
>
Amint látható, a kezdeti (statikus) kép van beállítva, mint a háttér blokk szélessége és magassága a kép. Most arra van szükség, hogy a mi animáció nem látható az a helyzet, amikor az egér lebeg. Írunk ezt a stílust:
a.gif img láthatóság # 58; rejtett;
>
Ezután meg kell győződnünk arról, hogy a háttérben (állókép) látni, ha az egér:
Továbbra is csak megmutatni a navigáció:
a.gif # 58; lebeg img láthatósága # 58; látható;
határon # 58; 0;
>
Ez minden. A módszer sikeresen működik minden böngészőben.
Ahhoz, hogy az animáció akkor kezdődik, amikor a linkre kattint, és nem akkor, amikor felett lebeg, akkor csak ki kell cserélni a paramétereket hiover aktív.
Köszönjük a figyelmet!
Kompatibilitás: Internet Explorer 6-7; Mozilla Firefox 2.xx - 3,0; Opera 8.xx - 9.xx
---------------------------------------
Szabályok másolása leckeanyagokat
demó
Lecke letöltése (zip, 49 Kb)