Menő CSS lebegő effektusok, amelyek háttérkivágást, maszkokat és 3D-t használnak

Most egy sor bejegyzést végigjártunk a CSS lebegő effektusok érdekes megközelítéseiről. Kezdtük a egy csomó CSS-t használó példa background ingatlanait, majd továbbment a text-shadow ingatlan hol technikailag nem használtunk árnyékokat. CSS változókkal is kombináltuk, ill calc() a kód optimalizálása és az egyszerű kezelés érdekében.

Ebben a cikkben ezt a két cikket építjük fel, hogy még összetettebb CSS lebegő animációkat hozzunk létre. Beszélünk háttérkivágásról, CSS-maszkokról, és még arról is, hogy a 3D-s perspektívák segítségével megáztatjuk a lábunkat. Más szavakkal, ezúttal fejlett technikákat fogunk felfedezni, és feszegetjük annak határait, hogy a CSS mire képes a lebegő effektusokkal!

---

Íme egy kis ízelítő abból, amit készítünk:

Hover effektusok segítségével background-clip

Beszéljünk róla background-clip. Ez a CSS-tulajdonság elfogadja a text kulcsszó értéke amely lehetővé teszi számunkra, hogy gradienseket alkalmazzunk a szöveg egy elemet a tényleges helyett háttér.

Így például megváltoztathatjuk a szöveg színét a lebegtetéskor, ahogyan azt használnánk color tulajdonság, de így animáljuk a színváltozást:

Csak annyit tettem, hogy hozzáadtam background-clip: text az elemhez és transition a background-position. Nem kell ennél bonyolultabbnak lennie!

De jobban járunk, ha több színátmenetet kombinálunk különböző háttérkivágási értékekkel.

Ebben a példában két különböző színátmenetet és két értéket használok background-clip. Az első háttérszínátmenet a szöveghez van vágva (hála a text érték) állítsa be a színt, míg a második háttérszínátmenet létrehozza az alsó aláhúzást (hála a padding-box érték). Minden más egyenesen innen van másolva az első cikkben végzett munka ennek a sorozatnak.

Mit szólnál egy lebegő effektushoz, ahol a sáv felülről lefelé csúszik úgy, hogy úgy néz ki, mintha a szöveget beolvasták, majd kiszínezték:

Ezúttal megváltoztattam az első színátmenet méretét a vonal létrehozásához. Ezután elcsúsztatom a másik színátmenettel, amely frissíti a szöveg színét, hogy illúziót keltsen! Elképzelheti, mi történik ebben a tollban:

Csak a felszínét kapargattuk annak, hogy mit tehetünk a magunkkal background-clipping erők! Ezt a technikát azonban valószínűleg kerülni szeretné az éles környezetben, mivel a Firefox köztudottan a sok bejelentett hiba kapcsolatos background-clip. A Safarinak támogatási problémái is vannak. Így csak a Chrome-ban marad szilárd támogatás ezekhez a cuccokhoz, úgyhogy lehet, hogy nyitva hagyja, ahogy folytatjuk.

Térjünk át egy másik lebegő effektusra background-clip:

Valószínűleg azt gondolja, hogy ez rendkívül egyszerűnek tűnik ahhoz képest, amit az imént tárgyaltunk – és igaza van, nincs itt semmi divatos. Nem csinálok mást, mint egy gradienst csúsztatva, miközben növelem a másik méretét.

De azért vagyunk itt, hogy megnézzük a fejlett lebegő effektusokat, igaz? Változtassuk meg egy kicsit, hogy az animáció más legyen, amikor az egérkurzor elhagyja az elemet. Ugyanaz a lebegési effektus, de más a vége az animációnak:

Menő ugye? boncolgassuk a kódot:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

Három háttérrétegünk van – két színátmenet és a background-color segítségével határozzuk meg --_c változó, amely kezdetben átlátszóra van állítva (#0000). Lebegtetés közben a színt fehérre változtatjuk és a --_c változó a fő színre (--c).

Íme, mi történik ezzel kapcsolatban transition: Először is mindenre alkalmazunk egy átmenetet, de késleltetjük a color és a background-color by 0.5s a csúszó hatás létrehozásához. Közvetlenül ezután változtatjuk a color és a background-color. Előfordulhat, hogy nem vesz észre vizuális változást, mert a szöveg már fehér (hála az első színátmenetnek), és a háttér már a fő színre van állítva (a második színátmenetnek köszönhetően).

Ezután az egér kihúzásakor azonnali módosítást alkalmazunk mindenre (figyeljük meg a 0s késés), kivéve a color és a background-color amelyeknek van átmenet. Ez azt jelenti, hogy az összes színátmenetet visszaállítjuk a kezdeti állapotukba. Ismét valószínűleg nem fog látni vizuális változásokat, mert a szöveg color és a background-color már megváltozott lebegtetéskor.

Végül a fakítást alkalmazzuk a színre és a background-color az animáció egérrel kihúzható részének létrehozásához. Tudom, lehet, hogy nehéz megfogni, de jobban elképzelheti a trükköt különböző színek használatával:

Vigye az egérmutatót a fentiekre sokszor, és látni fogja azokat a tulajdonságokat, amelyek lebegtetve animálnak, és azokat, amelyek az egéren kívül animálnak. Ezután megértheti, hogyan értünk el két különböző animációt ugyanarra a lebegési effektusra.

Ne felejtsük el az általunk használt DRY kapcsolási technikát a sorozat korábbi cikkeiben, hogy segítsen csökkenteni a kód mennyiségét azáltal, hogy csak egy változót használ a kapcsolóhoz:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

Ha kíváncsi arra, hogy miért nyúltam az RGB szintaxishoz a fő színhez, az azért van, mert játszanom kellett az alfa átlátszósággal. Én is használom a változót --_t a használt redundáns számítás csökkentésére transition ingatlan.

Mielőtt a következő részre lépnénk, itt van még néhány példa azokra a lebegési effektusokra, amelyekre egy ideje támaszkodtam background-clip. Túl hosszú lenne mindegyiket részletezni, de az eddig tanultak alapján könnyen megértheti a kódot. Jó inspiráció lehet, ha néhányat egyedül is kipróbálhat anélkül, hogy megnézné a kódot.

Tudom, tudom. Ezek őrült és szokatlan lebegő effektusok, és tudom, hogy a legtöbb helyzetben túl sok. De így kell gyakorolni és megtanulni a CSS-t. Ne feledje, mi feszegetve a határokat CSS lebegő effektusok közül. A lebegő effektus újdonság lehet, de útközben új technikákat tanulunk, amelyeket egészen biztosan más dolgokra is fel lehet használni.

Húzó effektusok CSS használatával mask

Találd ki? A CSS mask tulajdonság a színátmeneteket ugyanúgy használja, mint a background A property nem, így látni fogja, hogy amit most készítünk, az elég egyszerű.

Kezdjük egy díszes aláhúzással.

használom background cikk-cakk alsó szegély létrehozásához abban a demóban. Ha animációt akarnék alkalmazni erre az aláhúzásra, fárasztó lenne pusztán a háttértulajdonságok használatával megtenni.

Írja be a CSS-t mask.

A kód furcsán nézhet ki, de a logika továbbra is ugyanaz, mint az összes korábbi háttéranimációnál. Az mask két színátmenetből áll. Az első színátmenet egy átlátszatlan színnel van meghatározva, amely lefedi a tartalmi területet (hála a content-box érték). Az első színátmenet láthatóvá teszi a szöveget, és elrejti az alsó cikk-cakk szegélyt. content-box a mask-clip érték, amely ugyanúgy viselkedik, mint background-clip

linear-gradient(#000 0 0) content-box

A második gradiens az egész területet lefedi (hála padding-box). Ennek a szélessége a --_p változó, és az elem bal oldalára kerül.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

Most már csak az értékét kell megváltoztatnunk --_p mutasson rá, hogy a második színátmenethez csúsztatható hatást hozzon létre, és felfedje az aláhúzást.

.hover:hover { --_p: 100%; color: var(--c);
}

A következő bemutató a maszkrétegeket háttérként használja, hogy jobban lássa a trükk végét. Képzelje el, hogy a zöld és a piros részek az elem látható részei, míg minden más átlátszó. Ezt fogja tenni a maszk, ha ugyanazokat a színátmeneteket használjuk vele.

Egy ilyen trükk segítségével könnyedén létrehozhatunk sok variációt, ha egyszerűen más színátmenet-konfigurációt használunk a mask ingatlan:

A demó minden példája kissé eltérő színátmenet-konfigurációt használ a mask. Vegye figyelembe azt is, hogy a kódban elválik a háttérkonfiguráció és a maszk konfigurációja. Önállóan kezelhetők és karbantarthatók.

Változtassuk meg a háttérkonfigurációt úgy, hogy a cikk-cakk aláhúzást hullámos aláhúzásra cseréljük:

Lebegő effektusok újabb gyűjteménye! Megtartottam az összes maszkkonfigurációt, és megváltoztattam a hátteret, hogy más alakzatot hozzak létre. Most már érted, hogyan voltam képes hogy elérje a 400 lebegő hatást pszeudoelemek nélkül – és még mindig lehet több!

Például miért nem valami ilyesmit:

Íme egy kihívás számodra: Az utolsó demóban a szegély egy színátmenet a mask tulajdon, hogy felfedje azt. Kitalálod az animáció mögött meghúzódó logikát? Első pillantásra bonyolultnak tűnhet, de nagyon hasonlít ahhoz a logikához, amelyet a legtöbb egyéb, színátmeneteken alapuló lebegési effektusnál megvizsgáltunk. Írd meg a magyarázatodat kommentben!

Lebegő effektusok 3D-ben

Azt gondolhatja, hogy lehetetlen 3D-s effektust létrehozni egyetlen elemmel (és anélkül, hogy pszeudoelemekhez folyamodnánk!), de a CSS-nek van módja ennek megvalósítására.

Amit ott látsz, az nem valódi 3D hatás, hanem a 3D tökéletes illúziója a 2D térben, amely egyesíti a CSS-t. background, clip-pathés transform tulajdonságait.

Az első dolgunk az, hogy meghatározzuk a változóinkat:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

Ezután létrehozunk egy átlátszó szegélyt, amelynek szélessége a fenti változókat használja:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

Az elem felső és jobb oldalának egyenlőnek kell lennie a --b érték, míg az alsó és a bal oldalnak egyenlőnek kell lennie az összeggel --b és a --d (ami az --_s változó).

A trükk második részéhez meg kell határoznunk egy gradienst, amely lefedi az összes korábban meghatározott határterületet. A conic-gradient erre fog működni:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

A trükk harmadik részéhez hozzáadunk még egy színátmenetet. Ez két félig áttetsző fehér színértéket fog használni, amelyek átfedik az első előző gradienst, hogy a fő szín különböző árnyalatait hozza létre, így az árnyékolás és a mélység illúzióját keltve.

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

Az utolsó lépés az a CSS clip-path levágni a sarkokat a hosszú árnyék érzéséhez:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

Ez minden! Most csináltunk egy 3D-s téglalapot két színátmeneten és a clip-path amelyeket CSS-változók segítségével könnyen beállíthatunk. Most már csak animálni kell!

Figyelje meg az előző ábra koordinátáit (pirossal jelölve). Az animáció létrehozásához frissítsük ezeket:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

A trükk az, hogy elrejti az elem alsó és bal oldali részét, így csak egy téglalap alakú elem marad, mélység nélkül.

Ez a toll elszigeteli a clip-path az animáció egy részét, hogy lássa, mit csinál:

Az utolsó érintés az, hogy az elemet az ellenkező irányba mozgassa a gombbal translate - és az illúzió tökéletes! Íme a hatás, ha különböző egyéni tulajdonságértékeket használ különböző mélységekhez:

A második lebegő effektus ugyanazt a szerkezetet követi. Mindössze annyit tettem, hogy frissítettem néhány értéket, hogy bal felső mozgást hozzak létre a jobb felső mozgás helyett.

Hatások kombinálása!

Mindenben, amivel foglalkoztunk, az a fantasztikus, hogy mindegyik kiegészíti egymást. Itt van egy példa, ahová hozzáteszem a text-shadow hatása a második cikkből sorozatban a background animációs technika az első cikkből az imént tárgyalt 3D trükk használata közben:

A tényleges kód eleinte zavaró lehet, de folytasd, és boncolgasd egy kicsit tovább – észre fogod venni, hogy ez csupán e három különböző hatás kombinációja, nagyjából összemosva.

Hadd fejezzem be ezt a cikket egy utolsó lebegtetési effektussal, amelyben kombinálom a hátteret, a klipútvonalat és egy csipetnyi perspective egy másik 3D hatás szimulálásához:

Ugyanezt a hatást alkalmaztam a képekre, és az eredmény elég jó volt a 3D szimulálásához egyetlen elemmel:

Szeretnéd közelebbről megnézni, hogyan működik az utolsó demó? Írtam rá valamit.

Csomagolta

Hoppá, végeztünk! Tudom, ez sok trükkös CSS, de (1) a megfelelő webhelyen vagyunk az ilyesmihez, és (2) a cél az, hogy a különböző CSS-tulajdonságokkal kapcsolatos ismereteinket új szintre toljuk, lehetővé téve számukra, hogy egymást.

Felmerülhet a kérdés, hogy mi a következő lépés innen, miután lezárjuk a fejlett CSS lebegő effektusok kis sorozatát. Azt mondanám, hogy a következő lépés az, hogy átvesszük mindazt, amit tanultunk, és más elemekre, például gombokra, menüelemekre, hivatkozásokra stb. alkalmazzuk. Meglehetősen egyszerűnek tartottuk a dolgokat, amíg a trükkjeinket egy címsorelemre korlátoztuk, pontosan ezért ; a tényleges elem nem számít. Fogadja el a koncepciókat, és fuss velük, hogy új dolgokat alkosson, kísérletezzen velük és tanuljon meg!

---

Menő CSS lebegő effektusok, amelyek háttérkivágást, maszkokat és 3D-t használnak eredetileg megjelent CSS-trükkök. Neked kellene kapja meg a hírlevelet.

• Coinsmart. Európa legjobb Bitcoin- és kriptográfiai tőzsdéje.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. SZABAD HOZZÁFÉRÉS.
• CryptoHawk. Altcoin radar. Ingyenes próbaverzió.
• Forrás: https://css-tricks.com/css-hover-effects-background-masks-3d/