Veebilehe animatsioonid võivad meelitada rohkem kasutajaid. Küsige endalt seda - kui peaksite nägema veebilehte, millel on üsna palju animatsiooni, kas te ei tahaks rohkem uurida? Nüüd saate CSS-i üleminekute abil oma töö suurepäraste animatsioonidega ellu äratada. Ja pange tähele, need tuleb teha õigesti. Uurime CSS-i üleminekute maailma järgmises järjekorras:
- Miks CSS-i üleminekud?
- Üleminekuomand
- Mida peate täpsustama?
- Siirdeaja funktsiooni Funktsioon Atribuut
- Üleminek-viivitusvara
Miks CSS-i üleminekud?
Võtame näite. Kui peaksite elemendi värvi muutma valgest siniseks, on see muudatus peaaegu kohene. Animeeritud efekti saamiseks saate selle muudatuse järk-järgult ellu viia. Ka see näeb välja üsna visuaalselt. CSS-i üleminekute lubamise abil saate kohandada muudatuste toimumise viisi. Saate määratleda, kuidas muutused elementides toimuvad kiirenduskõverat järgivate kindlate ajaintervallide järel.
CSS-i üleminekud võimaldavad teil määratleda muudatused elemendid, konkreetsed ajaintervallid, kiirenduskõvera kiirus ja palju muud. Kõike seda saate teha ilma Flashi või JavaScripti .
Parema mõistmise huvides võite viidata allolevale pildile:
Ülaloleval pildil muutub HTML-element ühe sekundi jooksul punasest siniseks. Vahevärvi näete ka siis, kui üleminek toimub. Kui te ei kavatse CSS-i üleminekuid kasutada, märkate, et värvi muutus punasest siniseks on kohene - vahevärvi te ei näe. CSS-i üleminekute korral märkate animeeritud efekti, kui HTML-elemendid muutuvad vanast olekust uueks.
Üleminekuomand
Lühikese ülemineku atribuudi abil saate kontrollida CSS-i üleminekuid. Selle stenogrammi kasutamine pole mitte ainult lihtne, vaid see võib ka vältida sünkrooniväliseid parameetreid, mis võivad CSS-i silumiseks olla üsna masendavad.
Atribuut üleminek määrab CSS-i atribuudid, millele soovite üleminekuefekti. Ainult need CSS-i atribuudid on animeeritud.
Süntaks:
üleminek:
Algajana võite lühikirja kasutamisel silmitsi seista mõningate raskustega. Kui arvate, et stenogrammi kasutamine on teie jaoks praegu veidi keeruline, saate üleminekuomadused eraldi määrata. HTML-elemendi jaoks saate ülemineku omadused määrata ükshaaval, nagu on näidatud allpool toodud näites:
div {laius: 100px kõrgus: 100px taust: helesinine üleminekuomadus: laiuse ülemineku kestus: 2s üleminekuajastusfunktsioon: lineaarne üleminekuviive: 1s} div: hõljumine {laius: 300px}Hõljutage kursorit kasti kohal
Ülaltoodud näites oleme eraldi määranud omadused (ülemineku omadus, ülemineku kestus, siirdeaja funktsioon ja ülemineku viivitus) ja nende väärtused. Nende üleminekuomaduste kohta õpime lähiajal.
Mida peate täpsustama?
CSS-i üleminekute loomiseks peate määrama peamiselt kaks asja: CSS-i omadus, millele soovite efekti lisada, ja selle efekti kestus.Peate meeles pidama ühte asja - kui te ei määra aja kestust, on üleminekuks vaikeväärtus 0 ja sellel pole mingit mõju.
Vaatleme näiteks:
Allpool olev kood määratleb laiuse atribuudi ülemineku efekti viieks sekundiks.
div {laius: 100px kõrgus: 100px taust: sinine üleminek: laius 5s} div: hõljumine {laius: 600px}Liigutage kursor ülal oleva div-elemendi kohale, et näha üleminekuefekti.
Ülaltoodud koodis näete, et kui hõljutate kursorit sinise kasti kohal, suurendab sinine kast laiust järk-järgult viieks sekundiks. Samuti märkate, et kui eemaldate kursori siniselt kastilt, naaseb sinine kast järk-järgult (mitte silmapilkselt) oma algsesse suurusse. Samuti saate laiuse ja aja kestuse väärtusi muuta, et näha, kuidas see ülemineku omadus mõjutab HTML-elementi.
Üleminekuefekti saate lisada ka mitmele atribuudile. Seda saate teha omaduste eraldamiseks komadega. Vaatleme näiteks:
Allolevas koodis on ülemineku omadus määratud laiuse, kõrguse ja teisenduse jaoks.
div {polsterdus: 15px laius: 150px kõrgus: 100px taust: roheline üleminek: laius 2s, kõrgus 2s, teisendus 2s} div: hover {laius: 300px kõrgus: 200px teisendus: pööramine (360deg)} Tere, Maailm (Hõljutage kursorit minu kohal)
Ülaltoodud näite abil näete, kuidas roheline kast liigub, kui hõljutate kasti kohal.
Oleme määranud ainult atribuudi ja aja kestuse. Vaatame teisi parameetreid koos erinevate näidetega.
Siirdeaja funktsiooni Funktsioon Atribuut
See omadus määratleb üleminekuefekti kiiruskõvera. See võib võtta järgmisi väärtusi:
- Lihtne väärtus: See on vaikeväärtus, kus efekt on alguses aeglane, seejärel kiirem ja lõpeb aeglaselt.
- Lineaarne väärtus: See efekt ei muuda ülemineku kiirust - see hoiab kiirust algusest lõpuni ühtlane.
- Lihtsustatav väärtus: See efekt algab aeglaselt.
- Hõlbustusväärtus: Sellel efektil on aeglane lõpp.
- Lihtne sisse-välja väärtus: Sellel efektil on nii aeglane algus kui ka aeglane lõpp.
- Kuupbezieri väärtus (n, n, n, n): Funktsioonis Cubic-Bezier saate määrata oma väärtuste komplekti.
Allolev kood näitab lineaarsete, kergete, hõlpsate, hõlpsate ja kergete väärtuste üleminekuefekte.
div {laius: 100px kõrgus: 100px taust: roosa üleminek: laius 2s} # div1 {üleminekuajastus-funktsioon: lineaarne} # div2 {üleminekuajastus-funktsioon: lihtsus} # div3 {üleminekuajastus-funktsioon: lihtsus-sisse } # div4 {üleminekuajastusfunktsioon: hõlbustus-välja} # div5 {üleminekuajastusfunktsioon: hõlpsalt sisse-välja} div: hõljumine {laius: 300px}Hõljutage kursorit allpool olevate div-elementide kohal
lineaarne
kergust
hõlbustus
lihtsus välja
lihtsus sisse-välja
Üleminek-viivitusvara
Mõnikord soovite, et animatsioon toimuks teatud aja möödudes. Atribuudiga Siirde Viivitus saate määrata ülemineku efekti viivituse. Viivituse saate määrata sekundites.
Võtame näite, et näha üleminekuefekti viivitust:
div {laius: 100px kõrgus: 100px taust: kollane üleminek: laius 3s üleminekuviive: 1s} div: hõljumine {laius: 300px}Hõljutage kursorit allpool oleva div elemendi kohal
Märge: Võite jälgida, et 1 sekundiline viivitus enne efekti algust
Ülalolevas koodis märkides kursoriga kollase kasti kohal, märkate (ühe sekundi jooksul), et efekti pole. Pärast ühe sekundi ootamist märkate efekti.
Sellega jõuame selle CSS-i üleminekute artikli lõppu. Nüüd saate animatsioone oma veebilehtedele lisada. Proovige neid näiteid.
Vaadake meie mis on varustatud juhendajate juhitud elava koolituse ja reaalse elu projektikogemusega. See koolitus võimaldab teil omandada oskusi, mis võimaldavad töötada tagatipuliste ja esiotsa veebitehnoloogiatega. See sisaldab koolitust veebiarenduse, jQuery, Angular, NodeJS, ExpressJS ja MongoDB kohta.
kuidas Java programmist väljuda
Kas teil on meile küsimus? Palun mainige seda blogi “CSS Transition” kommentaaride osas ja me võtame teiega ühendust.