Tartalom
- 01. Áthúzásos szöveghatás
- 02. Hozzon létre CSS-t
- 03. Helyezze el a szót
- 04. Fel és föl
- 05. Lebegve
- 06. Automatikus az emberek számára
- 07. Vegyen fel váltakozó osztályokat
Az áthúzós linkek nagyszerű módja a felhasználó figyelmének felkeltésére, különösen, ha valami szokatlant vagy eredetit csinálnak. A Közép gyermeknek nagyszerű hatása van, máshol ritkán látható, amely minden betűt megragad, és animációval osztja szét őket, ami akkor indul be, amikor a látogató lebeg a szó fölött. Az animáció segít átadni a szendvicsmárka játékos karakterét.
Ebben a cikkben bemutatjuk, hogyan lehet újra létrehozni a webhelyen gyakorolt hatást. További inspirációért tekintse meg a legjobb CSS animációs példák útmutatóját (a kódolásukra vonatkozó utasításokkal). Kicsit másképp próbálkozzon egy legjobb webhely-készítővel, vagy válassza ki a legjobb felhőtárhelyet. Ha pedig összetettebbé teszi webhelyét, győződjön meg róla, hogy webtárhelye pontban van.
01. Áthúzásos szöveghatás
Az egyik nagyszerű szövegeffektus a Közép Gyerek weboldalán a menüben található áthúzási effektusok, ahol a betűk szétválnak a szövegen, és kissé elfordulnak. Indítsa el ezt néhány egyszerű HTML-címkével.
div> div> Reggeli / div> / div>
02. Hozzon létre CSS-t
Használjon külön CSS-fájlt vagy stíluscímkéket az alábbi CSS-szabályok hozzáadásához, és tegye az oldalt a böngésző teljes méretének kitöltésével azáltal, hogy a törzs és a burkoló teljes magasságban van.
test {szélesség: 100%; magasság: 100%; margó: 0; párnázás: 0; } .wrapper {display: rács; magasság: 100%; }
03. Helyezze el a szót
A szó osztály középre helyezi a szót a rácsban. Bármely szöveg, amely a szó osztály ezt alkalmazhatja. A fel osztály minden más betűre vonatkozik, és ezek felfelé mozognak.
.word {font-size: 3em; margó: auto auto; } .word .up {display: inline-block; átalakítás: translate3d (0px, 0px, 0px) rotate (0deg); átmenet: mind a 0,5 másodperc könnyebb ki-be; }
04. Fel és föl
Most a le- osztály nagyon hasonló beállításokat oszt meg, mint a fel de a lebegő mutatja a mozgást felfelé a fel borulás. A megjelenés fokozása érdekében a felfelé is kissé elforgatják.
.word .down {display: inline-block; átalakítás: translate3d (0px, 0px, 0px) rotate (0deg); átmenet: mind a 0,5 másodperc könnyebb ki-be; } .szó: lebeg .up {átalakítás: translate3d (0px, -8px, 0px) rotate (12deg); szín: # 058b05}
05. Lebegve
Amikor a felhasználó a szöveg fölé viszi az egeret, az alsó osztály lefelé mozgatja a szöveget. Később a JavaScript-ben a szöveget külön szakaszokra osztják fel, az osztályok automatikusan felváltva kerülnek a váltakozó tartományokba.
.szó: lebegés .down {átalakítás: translate3d (0px, 8px, 0px) forgatás (-12deg); szín: # 058b05; }
06. Automatikus az emberek számára
Kicsit nehézséget okoz, hogy minden betűt váltakozó szakaszokban kell elhelyezni, különböző osztályokkal, ezért automatizáljuk a folyamatot azzal, hogy a JavaScript megkérdezi a választót, és minden betűt felvesz. Itt a str változó megragadja az aktuális betűt, amikor végigvonul a szövegen.
szkript> var elemek = document.querySelectorAll (’.word’); for (var i = 0, l = elemek.hossz; i l; i ++) {var str = elemek [i] .textContent; elemek [i] .innerHTML = ’’;
07. Vegyen fel váltakozó osztályokat
Most egy másik hurok minden betűt a saját span elemébe helyez, és hozzáadja a betűt fel vagy le- osztály a fesztávokra. Ha ezt megnézi a böngészőben, akkor a betűket felfelé és lefelé osztva látja, miközben kissé elfordul.
A hatást működés közben láthatja a Közép gyermek webhelyén.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); elemek [i] .appendChild (spn); spn.textContent = str [j]; hagyjuk pos = (j% 2)? 'fel le'; spn.classList.add (pos); }} / script>
Ez a cikk eredetileg a kreatív webdesign magazinban jelent meg Web designer.Vásárolja meg a 286. számot vagy Iratkozz fel.
