Eredeti hatások, ha lebeg a kurzort tárgyak
CSS3 lehetőségek lenyűgöző. Ebben a leírásban, akkor használja őket, hogy hajtsák végre a kreatív ötletek. Az eredmény egy sor hatások kísérik az eseményt mutat a kurzort, hogy egy tárgy - a leírás jelenik meg a különböző stílusokat minden példa.
Megjegyzés: Ezek a hatások csak a modern böngészők támogatják SSS3.
HTML-kód
jelölés szerkezete nagyon egyszerű és intuitív. Hozzon létre egy tárolót, amely tartalmazni fogja a képeket, és minden egyéb információt.
Miután létrehozott egy jelölő kérni stílusokat. A mi hatások meghatározott osztályba kell használni a közös szabályok és különleges tulajdonságai adunk az egyes példákhoz az önálló osztályok. A szövegben a lecke előtétek böngésző gyártók fogják elhagyásával.
Most képzeljük el, 10 hatásokat. Nyisson egy demo oldalt egy külön ablakban vagy lapon, nézni és tanulni kódot.
Ha speciális osztálya view-első eleme egy osztály néző hatást. Speciális osztály kerül hozzá mindegyik példában, egy elem osztály nézet (nézet-első, nézet-második, nézet-harmadik, és így tovább).
Ebben a példában a bázis átmenetek létrehozására, amelynek nagy hatása lesz használva.
És most az alapja a hatása. Amikor az egérmutató áthalad a képet, akkor a késleltetés szimulálni egy egyszerű animációt. Az ingatlan átmenetifém-késleltetés. amelyet egy pszeudo-osztályok lebeg. Lehet változtatni, hogy megkülönböztessék a rendszeres osztályteremben. Ebben a példában nem használjuk a késedelmes rendszeres osztályban, de a pszeudo-osztályok lebeg átmeneteket enyhén késleltetett indítás. Amikor az egér elhagyja a létesítményt, fogja használni az alapértelmezett 0s, és a „hasznosítás” gyorsan megtörténik.
Itt, az osztály maszk különböző jellemzőkkel bír az épület hatása. Megyünk ki a transzformációs tulajdonságokat (lefordítani, és forgassa):
A mi hatás lefordítani átalakulás fogják használni, hogy mozog a terméket a helyére. A maszk is lehet forgatni. leírás a tételek jelennek meg egy kis késés után egymást.
A harmadik esetben fogjuk használni az átalakulás lefordítani, és forgassa megjelenítéséhez a pontok leírását:
Meglehetősen egyszerű utasításokat, hogy a hatás.
Egy negyedik példa fogják használni egyszerű méretezés és képtartalom egy transzformációs skála. A kép lesz állítva 0.2s késedelem stílus, de amikor a kurzor késlelteti 0s. Ezért, amikor az egér a hatás mutatkozik azonnal, de a késleltetés behúzását, amikor az egér kurzorral.
Egyszerű utasításokat, hogy a hatást. CSS3 mindent tud.
Ha az egérmutató kép csúszik jobbra és balra a helyén egy leírást nyúlik, mintha, mozgókép:
Inverz transzformáció is történik simán:
A hetedik hatás az ötlet, hogy egy kép körül a forgási középpont és egyidejű csökkentésére a mérete. A leírás ezután lesüllyesztjük felülről.
Ha az egér leíró elemek jelennek meg a késedelem:
Ebben a példában egy rebound hatást, amikor csökkentő elemek leírják a fenti.
Mi hozzá animáció elem maszkot, és meghatározza, hogy tartsa a elemenetov leírás:
Ahhoz, hogy hozzon létre egy rebound hatást használják translateY funkcióval és több keret:
Ebben a példában a két maszk elem, hogy megteremtse a hatása lezáró függöny:
Két maszk van különböző lehetőségek transzformációk. Is, ezek egy vonalban másképp.
Amikor az egérrel a zoom és az átláthatóság:
következtetés
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!