Így a képaláírásokat kép segítségével CSS3 - indigó blog
Tehát, mi lesz hat különböző példákat aláírást a képeket. HTML-része a projekt néz ki (expand látni):
Minden stílus tartjuk egy külön dokumentumban style.css. ne töltse be HTML-oldal. Feltétlenül szerepeljen egy linket hozzá a tag
Hozzunk létre egy CSS stílus:
Adjunk hozzá néhány közös jellemzője a mi box-ok és float: left, hogy összehangolják a bal szélén az elem pihenni dobozok követték egymást. Ne feledkezzünk meg a túlfolyó ingatlan rejtett érték - köszönhetően minden, ami a dobozon kívül lesz rejtve.
Szintén beállítani az átmenet -nak összes kép:
Első rész
Most jön az aláírásokat: valamilyen közös jellemzője, és természetesen, átmeneti tulajdonság is, hogy azokat kell alkalmazni. Ahelyett, hogy a fényelnyelés paramétert. van egy jobb felidézni a RGBA színű modell, ahol az alfa-csatorna felelős az átláthatóságot a szín, definiáljuk az értéke 0,7. hogy a háttérben az aláírás enyhén átlátszó, anélkül, hogy a szöveget:
Az első példa talán az egyik legegyszerűbb - felirat jelenik alulról felfelé, ha az egérmutató. Mert az ő, akkor egy fix magasságú 40px és alacsonyabb pozícióban az elem -40px. hogy volt elrejtve a kép alatt, amikor a kurzor nincs vége:
A második kiviteli alakban, az aláírás egybeesik a szélessége és magassága a kép - 200 × 200 px, és a „levelek” fentről lefelé:
Ebben a példában úgy véljük, a hatás a sima bomlás. Annak megállapítására, az eredeti állapot a nulla érték átláthatóság opacity:
A negyedik címe „utazás” az egyik oldalról a másikra:
Itt kell alkalmazni a forgatás hatása, míg a forgatás nem csak alá kell írnia, de maga a kép. Ehhez hozzá kell adnunk az átalakítás tulajdonság. beállít egy forgatási értéket a -180deg:
Az utóbbi esetben használjuk az úgynevezett méretezés hatása. És ha az előző verzió a szöveg jelenik meg egy időben a háttérben, de most ez fog megjelenni a késedelem és alkatrészek - első fejezet h3. és az alábbi szöveget p:
Második rész: ébredés
Ebben a részben a leckében határozza meg a viselkedését minden elem, amikor a kurzor a képernyőn.
viselkedés 1
Az első példa aláírás „utazott” alulról ha lebeg, használja a transzformáció tulajdonság, és azt mondják eleme mozog az Y tengely mentén:
viselkedés 2
A második államháztartási kell „szabadság” felülről lefelé, amelyhez ezúttal egy pozitív értéket a translateY funkciók:
viselkedés 3
Az igazat megvallva, ez a példa a legegyszerűbb, ha a kurzor a kép, a fedettség értéke 1 így látható aláírás:
4 viselkedés
Mint már említettük, a negyedik fejléc fog csúszni az egyik oldalról a másikra. Ezért meg kell mozgatni nem csak a szöveget, hanem képeket.
Amikor az egérrel az elem fog mozogni mindaddig, amíg nem tűnik 100%. Vegye figyelembe, hogy a vízszintes görgetéshez, akkor használja a translateX:
viselkedés 5
Ha a kurzor, a konténer div a kép, és a cím gördül az óramutató járásával ellentétesen - -180deg. rejtőzik, és felfedi a kép felirata:
viselkedés 6
Ez a példa, amely több hatás azonnal. Amikor a kurzor a képen, ez növeli - a felelős ezért a skála érték (1,3):
Tudod letölt egy archív fájlt is ezt a kódot magad. Reméljük, hogy ezt a leckét jól jöhet. Van érdekes kísérletekkel és siker!