Hvernig á að nýta CSS3 teiknimyndir vel: Kennsla, sýnishornskóða og dæmi

Þegar við notum JS og jQuery höfum við fulla stjórn á hreyfimyndunum og við getum búið til nokkur ógnvekjandi áhrif, en verðið er nokkuð hátt. Vinnslutími, samhæfni yfir vafra (td farsímar eru töluvert mismunandi þegar kemur að JS) og flækjustigið í sjálfu sér eru atriði sem við ættum að hafa í huga við að búa til fjörlegt viðmót.


Svo í dag sjáum við hvernig á að forðast JS með því að nota CSS teiknimyndir og umbreytingar. Við munum ræða frá mjög einföldum skrefum til nokkur ógnvekjandi áhrif, eins og harmonikkuspjöld og hreyfimyndir undirvalmynda.

Gríptu sæti, skrifblokk og alvöru vafra (allt annað en IE) og við skulum byrja.

Að hita upp

Við höfum töluvert marga kosti (og galla eins og allt í lífi okkar) við að nota CSS teiknimyndir. Ef þú þarft að selja þá til yfirmanns þíns eða viðskiptavinar er þetta það sem þú ættir að hafa í huga:

  • Þeir eru mögulega hraðari þar sem þeir geta nýtt sér hröðun vélbúnaðar (sem HTML5 útfærslur)
  • Þeir munu standa sig betur í farsímum og þurfa ekki sérstakan kóða til að fylgjast með snertiviðburðum
  • Túlka þarf JS af vafranum og möguleikarnir til að rjúfa vafrann eru miklu stærri. Svo þegar CSS mistakast, þá mistakast það hljóðlaust á meðan JS getur brotið alla síðuna
  • Þeir hafa nokkuð góðan stuðning við vafra (þessi síða hjálpar þér að athuga sérstaka tölfræði um það: http://caniuse.com/#search)

Dæmi um CSS3 teiknimyndir

Áður en við byrjum á kjöti þessarar færslu skulum við líta á nokkur falleg teiknimynd sem gerð er í hreinu CSS.

Pure CSS Twitter mistakast hvalur

Hreyfimyndun mistókst

 Gerð af Steven Dennis, sjáðu þetta í aðgerð.

Pure CSS Scrolling Coke Can
CSS 3 fjördæmi: Að fletta kókdós

Gerð af Roman Cortes, sjáðu þetta í verki.

Hreinn CSS gangandi maður

CSS 3 fjördæmi: Göngumaðurinn

 Gerð af Andrew Hoyer, sjáðu þetta í verki.

Byrjum á kóðanum. Við munum nota mikið af CSS gervi flokkum til að kalla fram hreyfimyndina. Til að vera heiðarlegur, þá mæltu margir verktaki með því að nota JS til að virkja og afvirkja hreyfimyndir, en hér munum við sjá auðveldari leiðina:

# próf {
bakgrunnur: rauður;
}
#test: sveima {
bakgrunnur: grænn;
}
#test: virkt {
bakgrunnur: blár;
}
#test: miða á {
bakgrunnur: svartur;
}

Við höfum nokkrar aðrar gervitímar til að nota, en þú hefur hugmyndina! Svo hér er það sem gerist ef þú smellir á #testþáttinn (miðað við að það sé hlekkur):

  • Eðlilegt ástand: Bakgrunnur verður rauður
  • Sveima: Þegar músin fer inn í frumsvið mun hún hafa grænan bakgrunn
  • Virkur: Þegar þú smellir á bendilinn á honum og á meðan músarhnappurinn er enn inni er bakgrunnsliturinn blár
  • Markmið: Þegar núverandi síða er með #test í slóðinni verður þessi þáttur svartur

Hvert og eitt þessara má nota til CSS-teiknimynda, til dæmis gætirðu búið til 2 hlekki til að virkja og slökkva á CSS-teiknimyndunum með því að nota gerviþáttinn sem miðar við þennan kóða:

virkja
slökkt

CSS umbreytingar

CSS umskipti munu breytast frá upphafsstigi til lokaástands. Svo þú skilgreinir í aðalvalsinum með því að nota „umskipti“ eignina tímann og hverja eign sem verður fyrir áhrifum og hvernig hreyfimyndin ætti að vera. Við skulum sjá dæmi:

.próf {
/ * tímasetningaraðgerð tímabils aðgerð, * /
litur: blár;
umskipti: litur 2s, leturstærð 2s vellíðan;
}
.próf: sveima {
litur: rauður;
}
.próf: virkt {
leturstærð: 200%;
}

Þegar þú sveima á .prófsþáttinn mun það smám saman breyta litnum úr bláum í rauða (hvaða fallega litatöflu, ha?). Þegar þú smellir á frumefnið eykst leturstærð smám saman í 200% af sjálfgefnu letri.

Við höfum einnig eignina „tímasetningu tímasetningar“, sett sem auðveldar út, og hvernig þeim „tíma“ sem er í boði fyrir hreyfimyndina verður varið. Hér eru möguleg gildi:

  • Línuleg: Sami hraði frá upphafi til enda
  • Auðvelt í: Hægt að byrja
  • Auðvelt: hægur endir
  • Auðvelt: Hægt að byrja, hratt í miðjunni, síðan hægt
  • Auðveld inn-út: Hæg byrjun, hægur endir
  • Cubic-bezier (a, b, c, d): Sérsniðinn hraði

Kassalaga Bezier aðgerðin mun búa til sérsniðið fjör með 4 tölum sem eru breytileg frá 0 til 1, sem táknar stærðfræðilega ferilinn fyrir hreyfimyndahraða X lengd.

Til að fá betri samhæfingu vafra ættir þú að íhuga að nota forskeyti smásala fyrir óperur, Firefox og vefkít eins og þessa:

div {
breidd: 400px;
-o-umskipti: breidd 2s;
-moz-umskipti: breidd 2s;
-webkit-umskipti: breidd 2s;
umskipti: breidd 2s;
}

Einnig gætirðu notað fjölmiðlafyrirspurnirnar til að skilgreina mismunandi umbreytingar eftir breidd vafra (farsímum, spjaldtölvum). Þetta er einfalt dæmi:

líkami {
leturstærð: 1em;
}
@ Media skjár og (hámarksbreidd: 800 pixlar) {
líkami {
leturstærð: 0,8 em;
}
}
@ Media skjár og (hámarksbreidd: 400 pixlar) {
líkami {
Leturstærð: 0,7 em;
}
}

Hér verður leturstærð breytt skyndilega þegar þú eykur breidd vafrans. Þessi kóða mun koma í veg fyrir að það gerist og mun verða mun sléttari umskipti:

líkami {
-o-umskipti: leturstærð .5s línuleg;
-moz-umskipti: leturstærð .5s línuleg;
-webkit-umskipti: leturstærð .5s línuleg;
umskipti: leturstærð .5s línuleg;
}

Þú getur notað þetta líka ef þú ert með mismunandi skjái eða stærðir fyrir andlitsmynd / landslag, ef þú vilt breyta breidd, litum, paddings, valmynd skjá.

CSS Teiknimynd – Raunveruleikinn byrjar

Teiknimyndin er röð umbreytinga sem skilgreind eru í einum val. Til að skilgreina CSS hreyfimyndir þarftu að fylgja 2 skrefum.

@Keyframe reglan er notuð til að skilgreina röð hreyfimyndaskrefa og hún er skilgreind með einstöku nafni og þeim stíl sem lýsa því hvernig þetta fjör virkar. Eins og venjulega vantar okkur smá forskeyti smásala, eins og í þessu dæmi:

/ * sama kóða fyrir hvern söluaðila * /
@ -o-keyframe my-animation { …
@ -moz-keyframe my-animation { …
@ -webkit-keyframe my-animation { …
/ * fjörheiti * /
@keyframe my-animation {
/ * rammaval *
0% {
/ * rammastíll * /
Vinstri: 0px;
Efst: 0px;
}
25% {
Vinstri: 200px;
Efst: 0px;
}
50% {
Vinstri: 200px;
Efst: 200px;
}
75% {
Vinstri: 0px;
Efst: 200px;
}
100% {
Vinstri: 0px;
Efst: 0px;
}
}

Svo, hver stíll er skilgreindur af ramma / tímaramma (eins og þeim römmum úr leiftimynd) sem prósentu og þeim stíl sem ætti að nota þar. Þessi lykilrammi segir til dæmis að frumefnið muni fara til vinstri, síðan efst, síðan til hægri og síðan neðst.

Eftir að þú hefur fylgt skrefi 1 og búið til lykilrammann þinn geturðu í raun notað það á frumefni. Þá notum við nokkurn veginn sömu rökfræði og við höfum gert með CSS umskiptin, munurinn er sá að nú er „umskipti“ okkar miklu flókið teiknimynd.

Til að nota það notum við teiknimyndareignina og hún hefur 7 undireiginleika:

  • Nafn: það einstaka auðkenni
  • Lengd: Hve langan tíma tekur það frá 0% til 100%
  • Tímasetningaraðgerð: nokkurn veginn það sama og tímasetningaraðgerð
  • Seinkun: Hve langan tíma tekur að byrja 0%
  • Íteration-count: Hversu margar endurtekningar munum við hafa („óendanlega“ fyrir óendanlega lykkju)
  • Stefna: eðlileg eða til skiptis (öfugt)
  • Spilunarástand: ef hreyfimyndin er í gangi eða gert hlé á henni

Þetta mun nota hreyfimyndina okkar á #testþáttinn þegar það er markmið síðunnar:

#test: miða á {
/ * fjörheiti | tímalengd | tímasetning-aðgerð | töf | iteration-count | átt | play-state * /
fjör: mitt fjör 10s línulegt 0s óendanlega venjulegt hlaup;
}

Með þetta í huga getum við búið til nokkur æðisleg dæmi.

CSS einleikur

Við munum búa til fellanleg spjöld sem nota CSS teiknimyndirnar. Hér er grunn HTML uppbygging:

Flipi 1

TEXTUR 1

Flipi 2

TEXT 2

Flipi 3

TEXT 3

Þetta mun bara búa til spjöldin og hlekkinn sem kveikir hvert þeirra. Og hérna er galdurinn gerður:

/ * hvaða div sem er inni í harmonikkunni * /
.harmonikku div {
/ * er sjálfgefið falin * /
hæð: 0;
yfirfall: falið;
/ * svarta töfra * /
umskipti: hæð 1s;
}
/ * þegar nefnd div er markmiðið * /
.harmonikkusvið: miða {
/ * hæð: sjálfvirkt farartæki virkar ekki, en þetta virkar fínt * /
hæð: 80px;
}

Frekar einfalt, ha? Og þú hefur eytt öllu lífi þínu í að nota JS í þessu? :)

Aðeins CSS valmynd með undirvalmyndum

Og þetta er annað frekar einfalt forrit. Þú ert vissulega með siglingavalmynd á síðunni þinni og oft þurfum við að nota nokkrar undirvalmyndir þar. Besta leiðin til að sýna og fela hluti er að nota jQuery, ekki satt? Hugsaðu aftur eftir að þú hefur prófað þennan kóða:

  • 1. liður
    • Liður 1.1
    • Liður 1.2
  • 2. liður
    • Liður 2.1
    • Liður 2.2

Og töframaðurinn byrjar hér:

a {
/ * að gera krækjurnar aðeins betri * /
sýna: loka;
padding: 4px;
}
nav {
texta-samræma: miðja;
}
/ * hvaða valmynd sem er (þar með talinn sá aðal) * /
nav ul {
sýna: inline-block;
listastíll: enginn;
}
nav>ul>li {
/ * láréttir hlutir (lóðrétt mun virka líka) * /
fljóta: vinstri;
}
nav li div {
/ * fella saman hvaða undirvalmynd sem er * /
hæð: 0;
yfirfall: falið;
/ * Houdini tilfinningar * /
umskipti: hæð 1s;
}
nav li: sveima>div {
hæð: 56px;
}

Leggja saman

Þetta er vissulega bara byrjunarleiðbeiningar. Það eru fullt af öðrum flottum áhrifum sem hægt er að nota með CSS eingöngu hreyfimyndum og margt sem vissulega er ennþá að koma.

Hefurðu notað þetta áður? Geturðu hugsað um annað gott forrit fyrir CSS teiknimyndir? Deildu hugsunum þínum með athugasemdunum!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map