A weboldalon található animációk több felhasználót vonzhatnak. Tegye fel ezt a kérdést magának - ha olyan weboldalt látna, amely elég sok animációt tartalmaz, nem szeretne többet felfedezni? A CSS átmenetekkel néhány remek animációval életre keltheti munkáját. És ne feledd, ezeket jól kell csinálni. Fedezzük fel a CSS Transitions világát a következő sorrendben:
- Miért CSS Transitions?
- Az átmeneti tulajdonság
- Mit kell megadnia?
- A Transition-timing-function Funkció tulajdonság
- Az átmenet-késleltetés tulajdonság
Miért CSS Transitions?
Vegyünk példát. Ha egy elem színét fehérről kékre változtatná, akkor ez a változás szinte azonnali. Az animáltabb hatás érdekében fokozatosan hajthatja végre ezt a változást. Ez vizuálisan is vonzónak tűnik. A CSS átmenetek engedélyezésével testre szabhatja a változások bekövetkezését. Megadhatja, hogy az elemek változásai hogyan történjenek egy adott időintervallumban, amelyek egy gyorsulási görbét követnek.
A CSS átmenetekkel meghatározhatja a változásokat elemek, a meghatározott időintervallumok, a gyorsulási görbe sebessége és még sok más. Mindezt megteheti Flash vagy JavaScript .
A jobb megértés érdekében hivatkozhat az alábbi képre:
A fenti képen a HTML elem vörösből kékre változik egy másodperc alatt. A köztes színt is látni fogja, amikor az átmenet megtörténik. Ha nem CSS átmeneteket fog használni, akkor észreveszi, hogy a szín vörösről kékre azonnal változik - nem fogja látni a köztes színt. A CSS átmenetekkel animált hatást észlel, amikor a HTML elemek a régi állapotról az újra váltanak.
Az átmeneti tulajdonság
A gyorsírás átmeneti tulajdonság segítségével vezérelheti a CSS átmeneteket. Ennek a gyorsírásnak a használata nemcsak egyszerű, de elkerülheti a szinkronon kívüli paramétereket is, amelyek meglehetősen frusztrálóak lehetnek a CSS hibakeresésében.
Az átmenet tulajdonság megadja azokat a CSS tulajdonságokat, amelyekre az átmenet hatást szeretné elérni. Csak ezek a CSS tulajdonságok vannak animálva.
Szintaxis:
átmenet:
Kezdőként nehézségekbe ütközhet a gyorsírás használata során. Ha úgy gondolja, hogy a gyorsírás használata kissé bonyolult az Ön számára, akkor külön megadhatja az átmenet tulajdonságait. HTML elem esetén megadhatja az átmenet tulajdonságait egyenként, az alábbi példában látható módon:
div {szélesség: 100 képpont magasság: 100 képpont háttér: világoskék átmenet tulajdonság: szélesség átmenet időtartama: 2 s átmenet időzítés függvény: lineáris átmenet késleltetés: 1 s} div: lebeg {szélesség: 300 képpont}Vigye az egérmutatót a doboz fölé
A fenti példában külön megadtuk a tulajdonságokat (átmenet-tulajdonság, átmenet-időtartam, átmenet-időzítés-függvény és átmenet-késleltetés). Rövidesen megismerjük ezeket az átmeneti tulajdonságokat.
Mit kell megadnia?
A CSS-átmenetek létrehozásához elsősorban két dolgot kell megadnia: a CSS tulajdonságot, amelyhez effektust kíván hozzáadni, és ennek a hatásnak az időtartamát.Egy dolgot szem előtt kell tartania - ha nem adja meg az időtartamot, az átállás alapértelmezett értéket vesz fel 0 , és nem lesz semmilyen hatása.
Vegyünk egy példát:
Az alábbi kód meghatározza a szélesség tulajdonság átmeneti hatását öt másodpercig.
div {szélesség: 100 képpont magasság: 100 képpont háttér: kék átmenet: szélesség 5 s} div: lebeg {szélesség: 600 képpont}Vigye a kurzort a fenti div elem fölé, hogy lássa az átmeneti hatást.
hogyan készítsünk képernyőképet a szelén webmeghajtóban a java használatával
A fenti kódban látni fogja, hogy amikor a kurzort a kék mező fölé viszi, a kék mező fokozatosan növeli szélességét, öt másodpercig. Azt is észreveszi, hogy amikor eltávolítja a kurzort a kék mezőből, a kék mező fokozatosan (nem azonnal) visszatér eredeti méretéhez. Megváltoztathatja a szélesség és az időtartam értékeit is, hogy lássa, hogyan befolyásolja ez az átmenet tulajdonság a HTML elemet.
Az átmeneti effektust több tulajdonsághoz is hozzáadhatja. Ezt úgy teheti meg, hogy vesszővel választja el a tulajdonságokat. Vegyünk egy példát:
Az alábbi kódban az átmenet tulajdonság meg van adva a szélesség, a magasság és az átalakítás szempontjából.
div {kitöltés: 15px szélesség: 150px magasság: 100px háttér: zöld átmenet: szélesség 2s, magasság 2s, átalakítás 2s} div: lebeg {szélesség: 300px magasság: 200px átalakítás: forgatás (360deg)} Helló Világ (Vigye az egérrel rám)
A fenti példával láthatja, hogyan mozog a zöld mező, amikor a mező fölé viszi az egeret.
Csak a tulajdonságot és az időtartamot adtuk meg. Nézzük meg a többi paramétert különféle példákkal.
A Transition-timing-function Funkció tulajdonság
Ez a tulajdonság határozza meg az átmeneti hatás sebességgörbéjét. A következő értékeket veheti fel:
- Könnyű érték: Ez az alapértelmezett érték, ahol a hatás az elején lassú, majd gyorsabb és lassan véget ér.
- Lineáris érték: Ez a hatás nem változtatja meg az átmenet sebességét - az elejétől a végéig állandó marad a sebesség.
- Könnyű érték: Ez a hatás lassan indul el.
- Könnyítési érték: Ennek a hatásnak lassú a vége.
- Könnyű be- és kikapcsolási érték: Ennek a hatásnak lassú a kezdete és a lassú vége is.
- Köbös-bezier érték (n, n, n, n): A cubic-bezier függvényben megadhatja saját értékkészletét.
Az alábbi kód a lineáris, könnyű, könnyű be-be, a kimenő és a kimenő értékek átmeneti hatásait mutatja.
div {szélesség: 100 képpont magasság: 100 képpont háttér: rózsaszín átmenet: szélesség 2s} # div1 {átmenet-időzítés-függvény: lineáris} # div2 {átmenet-időzítés-függvény: könnyedség} # div3 {átmenet-időzítés-függvény: könnyebb-be } # div4 {átmenet-időzítés-függvény: könnyed-kimenet} # div5 {átmenet-idő-függvény: könnyed-be-ki} div: lebeg {szélesség: 300 kép)Vigye az egérmutatót az alábbi div elemek fölé
lineáris
könnyedség
könnyû bejutás
könnyűség
könnyű be-be
Az átmenet-késleltetés tulajdonság
Néha azt szeretné, hogy egy animáció bizonyos időtartam után következzen be. Az átmenet-késleltetés tulajdonság lehetővé teszi az átmenet-hatás késésének megadását. A késleltetést másodpercben adhatja meg.
Vegyünk egy példát az átmenet hatásának késleltetésére:
div {szélesség: 100 képpont magasság: 100 képpont háttér: sárga átmenet: szélesség 3s átmenet-késleltetés: 1 s} div: lebeg {szélesség: 300 képpont}Vigye az egérmutatót az alábbi div elem fölé
Jegyzet: Megfigyelheti azt a 1 másodperces késleltetést a hatás megkezdése előtt
A fenti kódban, amikor a kurzorral a sárga mező fölé viszi az egeret, észreveszi (egy másodpercig), hogy nincs hatása. Egy másodperc várakozás után észreveszi a hatást.
Ezzel véget értünk ennek a CSS Átmenetek cikknek. Most animációkat adhat hozzá weboldalaihoz. Próbálja ki ezeket a példákat.
Nézze meg a mi oldalunkat amely oktató által vezetett élő képzéssel és valós projekt-tapasztalattal jár. Ez a képzés elsajátítja a back-end és a front-end webes technológiákkal való együttműködés képességeit. Ez magában foglalja a webfejlesztés, a jQuery, az Angular, a NodeJS, az ExpressJS és a MongoDB képzését.
hogyan készítsünk képernyőképet a szelén webmeghajtóban a java használatával
Van egy kérdésünk? Kérjük, említse meg a „CSS Transition” blog megjegyzés rovatában, és kapcsolatba lépünk Önnel.