Az ingatlan css átmenet részletesen példákkal Blog Jaroslav Perelygina
Blog Jaroslav Perelygina
Lássuk, hogyan is regisztrál:
És ez így néz ki:
Azt is megteheti, hogy a blokk, ha lebeg felette, amellett, hogy a háttérszín és a szöveg színe, és változott a szélesség. Erre mi írjuk a CSS kódot az alábbiak szerint:
Itt van, hogyan fog kinézni ebben az esetben:
Minden semmit, de, mint látható, a tulajdonságok változnak az értékek túl gyorsan, ugyanabban a pillanatban, és nem úgy néz ki, nagyon szép. Mit kell tenni? Ez nagyon egyszerű: a CSS átmenet tulajdon.
Körülbelül az átmenet ingatlan
átmenet tulajdonság kapcsolódik az átmenet az egyik stílus a másik sima. Például, ha a szín egység lebeg az egér nem változik drasztikusan, és egy bizonyos idő. Átmeneti, mellesleg, oroszul azt jelenti: „átmeneti”. Az ingatlan a következő bejegyzést:
Ehelyett ezeket az értékeket lehet alkalmazni a természetben és mások. A legtöbb böngésző még nem érzékelik az ingatlan annak formális, így az előtag kell használni.
A példákban megadott rövid változata a felvétel, részletes jelentése a következő:
Az átmenet-tulajdonság tulajdonság értéke, amellyel kiterjeszteni az átmeneti hatást. Például: színes, háttér-szín, szélesség, magasság, balra, a fedettség, a láthatóság és még sokan mások. Megadhat több ingatlan vesszővel elválasztva. Ha azt szeretnénk, hogy érvényes az átmenet azonnal minden lehetséges tulajdonságokat, majd átmenet-tulajdon kell adnia az összes értéket. Az átmenet-időtartam jelzi az időt, amely alatt az átmenet kerül sor az átmenet-késleltetési idő, amely után az átmenet megkezdődik. Az átmenet-időzítés-funkció jelzi a típusú átalakulás, az ingatlan tartózkodási.
Az ingatlan átmenet-időzítés-funkció határozza meg, hogyan kell változtatni a közbenső értékek az átmenet során, más szóval, az átmenet sebessége változhat idővel, amely meghatározott átmeneti idejű tulajdonság. Például az átmenet gyorsan elindul, de a végén a lassú, vagy nem változik a sebesség minden alkalommal. Transition-időzítés-funkció lehet a következő értékeket:
- lineáris - átmenet sebessége nem változik az elejétől a végéig. Egyenértékű köbös-Bezier (0,0,1,1).
- enyhíteni - a lassú kezdés, majd a gyorsítási és lassítási végén. Egyenértékű köbös-Bezier (0.25,0.1,0.25,1).
- könnyű az - a lassú kezdés. Egyenértékű köbös-Bezier (0.42,0,1,1).
- kiúsztatás - a lassulás a végén. Egyenértékű köbös-Bezier (0,0,0.58,1).
- enyhíteni-in-out - lassú rajt és a cél. Egyenértékű köbös-Bezier (0.42,0,0.58,1).
- köbös-Bezier (N, N, N, N) - lehetővé teszi, hogy állítsa be a saját értékeit 0-1.
Vidd az egeret a következő mondat és nézd meg magad, milyen az átmenet egy adott funkciót.
Mint látható, attól függően, hogy mennyire fontos az átmenet-időzítés funkció tulajdon, az átmenet történhet nagyon különböző módokon. Bár néha ez a különbség nem nagyon észrevehető, például, ha egy átmeneti időtartamú van beállítva, hogy egy kis idő érték, vagy blokk, amelynek hatására kis méretű, és így tovább.
Példák segítségével átmeneti tulajdonságai
Annak érdekében, hogy megértsük, hogyan kell használni az átmenet ingatlan, íme néhány példa. Kezdjük a legegyszerűbb. Emlékezz egység változó szélességű és színű, ha lebeg felette a legelején a bejegyzést? Most ugyanezt csinálja csak a használata a tulajdonságok az átmenet.
1. példa.
A példában egy lineáris függvény került alkalmazásra, akkor az éhomi használni fogja fel. Akkor természetesen használja a márka. Az átmenet-tulajdonság értéke az összes használtak, azaz minden lehetséges tulajdonságait, nevezetesen a háttér színét, a szöveg színét és vastagságát, változtatni a rendszeren belül egyszerre és ugyanazon funkciót. Ahhoz, hogy az egyes ingatlanok megváltozott sok szempontból, hogy elő kell írni egy vessző a szavak között, különböző jelentéssel. Íme:
Ebben az esetben az összes olyan tulajdonságot megváltoztatták értékeket egy időben, kezdve a háttérszín és befejező szélesség. Minden ingatlan saját funkciója van állítva.
2. példa.
A színek és méretek rendezni. Most ismét egy eltűnőben a mozgásmondatban.
A tulajdonságait fényelnyelés és a margin-left mozdul, és eltűnik két másodpercen belül.
3. példa.
Egy másik egyszerű példa. Ez alkalommal, a szöveg jelenik meg az árnyékban fehér, de ebben az esetben ez inkább emlékeztet megvilágítás, mint egy árnyék, de a tulajdonságot nevezzük így.
Mi már végrehajtotta azt a tulajdonságait szöveg árnyék.
4. példa.
Bit bonyolítja a feladatot erő a forgó egység.
Ennek a végrehajtására Például volt szükség, hogy növeljék a szélesség és magasság értékeket a blokk az ál: aktív.
Felhasználási módját CSS átmeneti tulajdonságai valójában nagyon, nagyon, biztos vagyok benne, hogy lesz még a jövőben. Hoztam csak a legegyszerűbb példa annak bizonyítására, az átmenet akcióban. Linkek, mellesleg, a blogomban színe megváltozik, ha lebeg az egeret őket használja azt. Azt hiszem rendelni fáradt szürke téglalap, de ez is nagyon jól mutat minden, amit akartam. Együtt más funkciók és grafikák átmenet lehet akár nagyon érdekes dolog. Próbálja ki!
Oszd meg barátaiddal: