Hogy hogyan lehet megvalósítani elhalványul elem css3
Nézzük a példát
Azt hiszem, a legjobb, ha egyszerűen csak egy példa. Tegyük fel, hogy két azonos blokkban. A html jelölés azt javaslom, hogy kijelölje azokat a következők szerint:
Minden elem kapott két stilisztikai osztályban. Miért is? Az első osztályban definiáljuk az általános szabályok megjelenés, az azonos blokkokat, hogy így együtt írják le. Egy valós példa, akkor valószínű, hogy más. Továbbá, minden tagja megkapta a saját egyedi stílusát osztályban. Ő jól jön is.
Ezek a szabályok már regisztrált mindkét egység azonos megjelenés: magasság, szélesség, betűméret, behúzás, és a zöld háttér előtt. Az utolsó átmeneti tulajdonság csak viszonylag új, és tartalmazza a CSS3 változata. Ez jelzi a késleltetés, ami után elvégzett bizonyos szabályokat. Tény, hogy ez az, ami egy sima megjelenést.
A példában Rendeltem egy második, kérésre lehetőség van arra, hogy nagyobb vagy kisebb. Amikor megjelenik a szolgáltatás működését, akkor képes lesz arra, hogy módosítsuk az értékét.
Hogyan kell végrehajtani a CSS3 elhalványul?
Ezután két lehetőség van. Tegyük fel, hogy meg kell, hogy elrejtse, amíg a második blokk, és ha fölé viszi az első folyamatosan megjeleníteni. A leggyakoribb eleme, hogy elrejtse a szabály display: none. de ez nem ad, amire szüksége van - egy sima megjelenést. Element jelennek élesen.
Ezért fogunk eljárni másképp. Lásd ezt a kódot:
Mi használt másik CSS3-tulajdon - fényelnyelés. Ez meghatározza az elem az átláthatóság, amely regisztrálja, 0-tól (teljesen átlátszó), hogy 1 (teljesen átlátszatlan) elem.
Először teljesen eltávolítani a második egység a szem, ami átlátszó. Most arra van szükség, hogy megbizonyosodjon arról, hogy ha az egér megjelent az első blokk a második simán. Erre a célra, ez itt egy érdekes kombinációja választó:
Ez önmagában stílusok változás történik, amikor mutatva az első blokk, második, módosított közvetlenül. Mivel a korábban propiska átmenet nem fog élesen, de fokozatosan, hogy te és én szüksége van. Értékének megváltoztatásával az átmenet lehet élesebb megjelenés, vagy fordítva tovább lassítani.
De egy ilyen sebességű egység úgy tűnik, ha a beállított érték átmenet: 1s. By the way, az érték lehet állítani ezredmásodpercben, ha akarja.
Vigyük a kurzort a blokk
Használja a gyakorlatban
Oké, ahol jól jöhet az életben? Például, a fejlesztés a legördülő menüből. Mint látható, a CSS3 és a fade elemei ma is, hogy az ilyen navigációs alkalmazása nélkül is a szkripteket. Ez javítja a teljesítményt a internetes forrás.
Akkor egy másik példát. Például, hogy lebeg a „Kapcsolat” űrlap jelenik meg, amelynek segítségével rögzítse az üzenetet. Ez csak valami, amit csak találtak, de a valóságban lehet kitalálni sokkal érdekesebb dolgokat, amelyek használata sima átmenetet.
Alkalmazási példa - fading képet magyarázatok
Nézzünk egy egyszerű példát. Van egy kép, és azt szeretnénk, hogy ez sima ólom magyarázatot. Itt egy kép:
Helyezze azt a dobozt, és adjunk hozzá egy bekezdés egy magyarázat:
Továbbra is felvenni a stílusok:
És hogy mi történt:
Ugrás egy motorkerékpár
Mint látható, a blokk jelenik egy magyarázat simán köszönhetően egy adott tulajdonság átmenet. Az első példában ezt a cikket, én csak egy paramétere az ingatlan - az időben. Ezúttal a paraméter inkább:
átmenet: bal 0.3s lineáris;
top - a neve az ingatlan, amelyre alkalmazni szeretné a hatást planvny. Ebben az esetben, a sima lesz alkalmazva csak a felső, és nem több, mint bármely más tulajdonság.
0.3s - ez érthető, az átmeneti időben.
lineáris - átviteli függvény. Ez egy külön, és nem a legkönnyebb téma. By the way, még mindig vannak olyan jellemzői: könnyű, Kis, könnyű ki. Próbálja ki, akkor biztosan észre egy kis különbség.
Ez nagyon lassú haladás tette lehetővé az átmeneti tulajdonság. ha nem, akkor a felirat tűnik hirtelen, hogy már nem úgy néz ki, hűvös. De ment a bekezdés szöveget abszolút pozicionálás. Ezen és más típusú helymeghatározó el tudja olvasni ezt a cikket.
Érdekes a világ helyszíni építési
Ön előfizetett. És köszönöm.