| 18.02.2016
CSS3 atveria neribotas galimybes UI dizaineriams, o pagrindinis privalumas yra tas, kad praktiškai bet kurią idėją galima nesunkiai įgyvendinti ir įgyvendinti realiame gyvenime, nenaudojant JavaScript.
Nuostabu, kaip paprasti žodžiai gali pagyvinti pagrindinį puslapį ir padaryti jį prieinamą vartotojams. Eikite į CSS3 ir sužinokite, kaip galite leisti elementui transformuotis ir pakeisti jo stilių, pavyzdžiui, kai žymeklis užvedamas virš jo. Devynios CSS3 animacijos programos, kurias galite rasti žemiau, padės sukurti įnoringą atmosferą svetainėje, taip pat patobulins išskirtinę svetainės išvaizdą gražiais sklandžiais perėjimais.
Norėdami gauti išsamesnės informacijos, galite atsisiųsti failų archyvus.
Visi efektai veikia galios perėjimo pagalba. perėjimas- „Perėjimas“, „perkūrimas“) ir pseudoklasė: užveskite pelės žymeklį, nurodantį elemento stilių, kai pelė užvedama virš naujo žymeklio (mūsų asistente). Savo programoms naudojome 500x309 pikselių „div“ bloką, išvesties fono spalva buvo #6d6d6d, o perėjimas iš vieno etapo į kitą užtruko 0,3 sekundės.
Body > div ( plotis: 500 tšk.; aukštis: 309 piks.; fonas: #6d6d6d; -webkit-transition: viskas 0,3s lengva; -moz-transition: viskas 0,3s lengva;; -o-transition: viskas 0,3s lengva; perėjimas : viskas 0.3s lengvumas )
1. Pakeiskite spalvą užvesdami žymeklį
Jei tokio efekto įgyvendinimas pareikalautų daug darbo su matematiniais dainos RGB reikšmių skaičiavimais. Dabar turite parašyti CSS stilių, kuriame prie parinkiklio turite pridėti pseudoklasę: užveskite pelės žymeklį ir nustatyti fono spalvą, kuri sklandžiai (per 0,3 sekundės) pakeis išvesties spalvą fonu, kai užveskite žymeklį ant blokas:
Spalva: užvedimas (fonas: #53ea93; )
2. Rėmo išvaizda
Akivaizdžiausia transformacija yra vidinis rėmelis, kuris sklandžiai atsiranda užvedus pelės žymeklį. Puikiai tinka, kad įvairūs mygtukai būtų patogesni. Norėdami pasiekti šį efektą, naudokite šią pseudoklasę: hover ir langelio šešėlio galia su įterptuoju parametru (nustato elemento vidurio šešėlį). Be to, turite nustatyti tokią pačią spalvą (mūsų atspalvyje 23 pikseliai):
Kraštinė: užveskite pelės žymeklį (dėžutės šešėlis: įterpimas 0 0 0 23 piks. #53ea93; )
3. Sūpynės
CSS animacija duota – kaltas, nes čia nenaudojama perėjimo galia. Vietoj to mus palietė:
- @keyframes – pagrindinė direktyva kuriant kadras po kadro CSS animaciją, kuri leidžia dirbti ir pan. animacijos siužeto kūrimas ir aprašymas su pagrindinių punktų sąrašu;
- animacija ir animacijos iteracijų skaičius – galia nustatyti animacijos parametrus (saldumą ir sklandumą) ir ciklų skaičių (pakartojimų). Kartais pakartokite 1.
4. Žgasanja
Sklandaus išnykimo poveikis iš esmės yra normalus elemento skaidrumo pokytis. Animacija kuriama dviem etapais: reikia nustatyti 1 matomumo lygio burbulą – tada matomumo nebus, po to užvedus pelę įveskite šias reikšmes – 0,6:
Išblukti ( neskaidrumas: 1; ) .fade:hover ( neskaidrumas: 0,6; )
Norėdami gauti geriausią rezultatą, pakeiskite reikšmes vietomis:
5. Zbilšenija
Norėdami padidinti bloką užvedus žymeklį, greitai naudojame transformaciją ir nustatome reikšmę į skalę (1.2). Tokiu atveju blokas padidės 20 šimtų išsaugodamas jo proporcijas:
Grow:hover ( -webkit-transform: scale (1.2); -ms-transform: scale (1.2); transform: scale (1.2); )
6. Keisti
Elementą pakeisti taip pat paprasta, kaip jį padidinti. Kadangi penktoje pastraipoje, norėdami padidinti skalę, turėjome įvesti reikšmę, didesnę nei 1, tada norėdami pakeisti bloką tiesiog įveskite reikšmę, kuri yra mažesnė už vieną, pavyzdžiui, skalė(0,7). Dabar, užvedus pelės žymeklį, blokas proporcingai pasikeis 30 šimtųjų jo dydžio:
Shrink:hover ( -webkit-transform: scale (0.7); -ms-transform: scale (0.7); transform: scale (0.7); )
7. Transformacija colo
Viena iš populiariausių animacijų yra tiesios linijos elementas, kuris užvedus žymeklį virsta apskritimu. Dėl papildomos CSS ribos spindulio galios, vikorista lygiaverčiai: užvedimas ir perėjimas, tai gali būti įgyvendinta be problemų:
Apskritimas: užveskite pelės žymeklį (kraštinės spindulys: 70 %; )
8. Obertanija
Praktinė animacijos versija yra pasukti elementą keliais laipsniais. Šiuo tikslu mums vėl reikia transformacijos galios, taip pat su kitomis reikšmėmis - pasuktiZ (20 laipsnių). Naudojant šiuos parametrus, blokas bus pasuktas 20 laipsnių už metų rodyklės išilgai Z ašies:
Pasukti: užveskite pelės žymeklį ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transformation: rotateZ(20deg); )
9. 3D šešėlis
Dizainerių idėjos skiriasi dėl tikslaus plokščio dizaino efekto. Ne mažiau, ši CSS3 animacija yra labai originali ir taip pat populiari interneto puslapiuose. Pasiekite trivialų efektą naudodami jau pažįstamas langelio šešėlio galias (sukurti sodrų šešėlį) ir transformuokite naudodami translateX(-7px) parametrą (siekdami užtikrinti, kad blokas būtų perkeltas horizontaliai į kairę 7 pikseliais):
Threed:hover (box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px - 6px transform: translateX( -7px); transform: translateX(- 7px);
Naršyklės palaikymas
Nuo šiandien maitinimo perėjimą palaiko šios naršyklės:
| Stalinių kompiuterių naršyklės | |
|---|---|
| Internet Explorer | Palaikoma IE 10 ir naujesnės versijos |
| Chrome | Palaikoma naudojant 26 versiją (iki 25 versijos palaikoma su -webkit- priešdėliu) |
| Firefox | Palaikoma naudojant 16 versiją (4–15 versijose naudojamas priešdėlis -moz-) |
| Opera | Palaikoma 12.1 versija |
| Safari | Palaikoma 6.1 versija (3.1–6 versijose naudojamas -webkit- priešdėlis) |
Daugumoje dabartinių naršyklių taip pat palaikomos kitos šių programų funkcijos ir variantai, pvz., transformavimas, langelio šešėlis ir kt. Tačiau jei ketinate šias idėjas panaudoti savo projektams, primygtinai rekomenduojame dar kartą patikrinti kelių naršyklių funkcijas.
Esame tikri, kad šios CSS3 animacijos programos jums bus naudingos. Linkime kūrybinės sėkmės!
Užvedimo efektai – užbaikite temą mokytis. Netgi jų įgyvendinimas gali padaryti jūsų svetainę dinamiškesnę ir gyvesnę. Šiandien apžvelgsime kai kuriuos darbo su vaizdais efektus. Tas pats pasakytina apie HTML ir CSS kodus, kurių galite išmokti iš žaidimo.
Zbilshennya
Pradedantiesiems svarbu, kad vartotojui užvedus pelės žymeklį virš vaizdo, nuotrauka padidėtų, bet ir toliau būtų prarasta jos užtvarose.
Ašis HTML-kodas:
Atminkite, kad vaizdas, kaip ir paveikslėlyje, yra 400 x 400 pikselių. Dabar stebėkimės CSS.
/*GROW*/ .grow img ( aukštis : 300 pikselių ; plotis : 300 pikselių ; -webkit-transition: viskas 1s lengva; -moz-transition: visi 1s lengva; -o-transition: visi 1s lengva; -ms-transition: 1s lengvumas: visi 1s lengvumas ) .grow img:hover ( plotis : 400px ; aukštis : 400px ; )
Iš pradžių nustatome zoologijos sodo vaizdo dydį į 300 pikselių, o vartotojui užvedus pelės žymeklį ant jo, jis padidėja iki 400 pikselių. Turime perpildymą – paslėptą, kuris leidžia pašalinti mastelio efektą.
Stisnennya
Anksčiau mes stebėdavomės, kaip vaizdai tampa didesni, kai žymeklis užvedamas virš pelės. Pažvelkime į posūkio efektą. Šis metodas iš esmės tas pats, tik šį kartą matmenis laikysite 400px ir, užvedę žymeklį, pakeisite juos į 300 pikselių.
/*SHRINK*/ .shrink img ( aukštis : 400 pikselių ; plotis : 400 pikselių ; -webkit-transition: viskas 1s lengva; -moz-transition: visi 1s lengva; -o-transition: visi 1s lengva ; perėjimas: visas 1 s lengva
Šoninė panorama
Esant dabartiniam efektui, vaizdo dydis nesikeičia, tačiau paspaudus nuotrauka nutolsta. Tai geras būdas sustiprinti objekto stiprumą.
Čia mes naudojame vikory vaizdą, kurio plotis 600px, o aukštis vos 300px – keičiame horizontalią nuotraukos padėtį ir nereikia šaldyti efektų į aukštį.
/*SIDEPAN*/ .sidepan img ( margin-left : 0px ; -webkit-transition: margin 1s easy; -moz-transition: margin 1s easy; -o-transition: margin 1s easy; -ms-transition: margin 1s easy perėjimas: margin 1s easy ) .sidepan img:hover ( margin-left : -200px ; )
Norėdami sukurti panoraminį efektą, nekeičiame vaizdo dydžio, kaip darėme praeitą kartą, o vietoj to, naudodami tą pačią paraštę, vaizdą patalpinsime kaire ranka. Jei norite, kad vaizdas būtų judinamas dešine ranka, pasirinkite paraštę į dešinę.
Vertikali panorama
Norėdami perteikti efektą rocui, pakartokime šį efektą dar kartą – tai tinka ir vertikaliam panoraminiam vaizdui kurti.
/*VERTPAN*/ .vertpan img ( margin-top : 0px ; -webkit-transition: margin 1s easy; -moz-transition: margin 1s easy; -o-transition: margin 1s easy; transfer: margin 1s easy; ) . vertpan img:hover ( paraštės viršuje : -200 pikselių ; )
Kodas praktiškai toks pat kaip ir praeitą kartą, tik dabar margin-left pakeičiame margin-top.
Transformacija
Tiesioginis poveikis yra dinamiškas.
Nakhil
Dabar darykime taip, kad užvedę pelės žymeklį virš vaizdų pamatytumėte pjūvį.
/*TILT*/ .tilt ( -webkit-transition: viskas 0 .5s lengva; -moz-transition: visi 0 .5s lengva; -o-transition: visi 0,5s lengva; -ms-transition: visi 0,5s ese; perėjimas: visi 0 .5 s lengva ms-transform: pasukti(-10deg) ;
Kaip matote, mums tereikia pasukti vaizdą dešimčia laipsnių. Tai tiesiog taip veiksminga!
Pjūvių apvalinimas
Kai nukreipiate į atvaizdą, jis pradeda suktis ir iš kuolo virsta kvadratu.
/*MORPH*/ .morph ( -webkit-transition: viskas 0 .5s lengva; -moz-transition: visi 0,5s lengva; -o-transition: visi 0,5s lengva; -ms-transition: visi 0 .5s lengvumas: visi 0 .5s lengvumas) .morph :hover ( border-radius: 50 % ; -Webkit-transform: pasukti (360 laipsnių); -Moz-transformuoti: pasukti (360 laipsnių); -o-transformuoti: pasukti (360 laipsnių); -ms-transformuoti: pasukti (360 laipsnių); transformuoti: pasukti (360 laipsnių); )
Čia įterpiama morfo klasė, kuri pradeda suktis 360 laipsnių kampu, kai pelės žymeklis užvedamas virš jos, o kraštinės spindulys palaipsniui keičiamas į 50%, o tada virsta apskritimu.
Fokusas
Kitas būdas yra naudoti kraštinės spindulį vaizdui suapvalinti. Tačiau šį kartą padidinsime ne tik ribos spindulį, bet ir kitą dalyką. Naudojant kraštinį laukelį, bus sukurtas efektas, sutelkiantis dėmesį į konkrečią vaizdo dalį.
/*FOCUS*/ .focus ( -webkit-transition: visi 1s lengva; -moz-transition: visi 1s lengva; -o-transition: visi 1s lengva; -ms-transition: visi 1s lengva; perėjimas: visi 1s lengva; ) .focus :hover ( kraštinė : 70 piks. vientisas # 000 ; sienos spindulys: 50 % ; }
Paėmėme kraštinę 10 pikselių, o juodą kraštinę pakeitėme 70 pikselių, o spindulį pasukome iki 50%, ką padarėme priekyje.
Webkit filtras
Siekiant užtikrinti maksimalų naršyklės funkcionalumą, tokiose programose nebus naudojamas WebKit priešdėlis. Šie duomenys nebepasiekiami „Safari“ ir „Chrome“. Nepaisant apribojimų, Webkit filtrai leidžia keisti veiksmus, kad pasiektumėte nuostabių efektų! Demo 
Rosmitėja
Pirmasis poveikis, kurį mes zastosovuvatimemo, yra tiesiog rosmitya. Dabar galite pasiekti kitą mažą kodų eilutę.
Visų pirma, tiems, kurie dar nėra iki galo įsigilinę į temą arba visai neįsisąmoninę, trumpai paaiškinsiu, kas yra hover. Įvairių tipų efektus (antraštes, patarimus, sklandžius perėjimus, transformaciją, pasukimą, padidinimą, poslinkį ir kt.) galima pritaikyti svetainės elementams, kai ant jų yra pelės žymeklis. Tai gali būti įgyvendinta naudojant įvairius „jQuery“ papildinius arba gryna forma.
Šiandien ruošiau didelę originalių vaizdų užvedimo efektų kolekciją, sukurtą naudojant CSS3, neprijungus javascript bibliotekų. Nekalbėsiu apie hover efektų diegimo gryname CSS3 pranašumus ir trūkumus, tai yra kita tema, tiesiog stebėkitės pavyzdžiais ir, jei reikia, vikorizuokite panašumus savo svetainėje. Visi efektai pateikiami iš pirmo žvilgsnio su demonstraciniu užpakaliu ir ataskaitos dokumentacija su išvesties įrenginiais. Vadovai daugiau ar mažiau buržuaziniai, bet viskas daugiau ar mažiau intuityviai suprantama.
Norėčiau išreikšti pagarbą, kad visos šios programos tinkamai veikia tik dabartinėse naršyklėse, kurios palaiko CSS3 galią.
Kad nesugadintumėte paslėpto paveikslo, nesugadindami mašininio efektų pavadinimų vertimo (visiems tikslams), atimant pavadinimų originalus, kaip juos pavadino leidėjas.
Labai pastebimas efektas sutelkiant dėmesį į miniatiūrą yra pavaizduotas plonų linijų atsiradimu dizaine ir kitose dalyse. Atsiranda daugybė skirtingų tipų efektų – nuo antraščių iki paveikslėlių, švelnios ir neįkyrios 3D transformacijos ir sklandžių pseudoelementų perėjimų. Šiuolaikinėse naršyklėse veikia prasčiau.
„iHover“ turi įspūdingą efektų rinkinį, kai pelės žymeklį užvedate ant gryno CSS3, naudojant Bootstrap 3. Įkvėptas Scss CSS (failo), lengvai modifikuojamas. Modulinis kodas, į darbą nereikia įtraukti viso failo. 30+ skirtingų efektų vienoje pakuotėje. Viskas gerai dokumentuota, Vikoristane efektai dar paprastesni. Viskas, ką jums reikia padaryti, tai padaryti tinkamą HTML išdėstymą ir įtraukti CSS failą prieš pradėdami dirbti.
Sukuria daugybę paprastų, bet stilingų efektų, priklausomai nuo vaizdo parašo valandos. Idėja yra ta, kad užvedus pelės žymeklį virš miniatiūros bus veiksmingai rodomas pavadinimas, autoriaus vardas ir nuorodos mygtukas. Tam tikriems efektams naudojamos vaizdinės 3D transformacijos.
Labai paprastas perėjimo efektas, be jokių specialių varpelių ir švilpukų, aplink vaizdą kadre virsta besikeičiančiu židiniu, kai svyruoja ir viskas.
miniatiūroms naudojant CSS3
Mažmenininkas išdėsto savo darbą kaip užpakalinę galeriją, kad pavaizduotų perėjimo nuo iššokančiųjų komentarų (antraštės) prie miniatiūrų poveikį. Teigiama, kad ją palaikys dabartinės naršyklės, įskaitant IE 9+. Visavertę galeriją, žinoma, sunku pavadinti, tačiau parašų atsiradimo efektas yra baigtas.
Pagrindinis CSS taisyklių rinkinys, leidžiantis sukurti neigiamą poveikį, kai pelės žymeklis rodomas virš idealiai apvalių miniatiūrų. Paketą sudaro 7 CSS3 perėjimų tipai, įskaitant mokymo ir tobulinimo dokumentus. Efektus palaiko dabartinės naršyklės.
Užvedus pelės žymeklį, apvyniojamos miniatiūros
Paprastas apvalių miniatiūrų apvyniojimo efektas, kai pelės žymeklis užvedamas virš jų, maždaug tą patį galite pamatyti mano tinklaraštyje, pranešimuose apie įrašus ant galvos. Jis įgyvendinamas naudojant kelias CSS kodo eilutes.
Kaip išversti pažodžiui: „Seksualinis poveikis nukreipus į“. Kažkas tokio seksualaus, kurio efekto vargu ar pastebėsite, nebent turite laukinę vaizduotę, tačiau efektas savaip naudingas ir didina pagarbą naujam vyrui.
Penki skirtingi efektai, rodomi, kai nukreipiate į juos. Trijų variacijų parašai, įvairaus matomumo užuolaidos ir apvyniojimas horizontaliais judesiais.
4 Pažvelkite į vaizdų antraščių animacijos efektus, įdiegtus naudojant CSS3. Skirtingos pozicijos su perėjimo efektais yra visiškai standartinės. Norėdami suprasti, kaip veikia animacija, pažiūrėkite į demonstracinio puslapio išvesties kodą nematydami pridedamos dokumentacijos.
Į galerijos tinklą įtrauktos miniatiūros su įvairiais efektais, tokiais kaip parašai, įvyniojimas, vystymas, suliejimas ir kt. Dokumentų iš šaltinio ir koregavimo yra nedaug, tačiau galite kreiptis dėl specialaus prašymo.
Šis efektas niekuo neypatingas, banalus vaizdo ryškumo pakeitimas slenkant ar net animacijos elemento pridėjimas. Turėsite patys išsiaiškinti įgyvendinimo detales, skaitydami išvesties demonstracinę versiją.
Kitas 10 vaizdų užvedimo efektų rinkinys, skirtingi miniatiūrų rodiniai užvedimo, mastelio keitimo, pasukimo, pasukimo, tamsinimo ir kt.
Įvairūs kadro animacijos efektai aplink vaizdą atrodo labai patraukliai, taip pat yra ataskaita apie koregavimą ir wiki.
Originalūs CSS3 užvedimo efektai, skirti efektyviam miniatiūrų antraštės vaizdui užvedus pelės žymeklį. CSS taisyklių rinkinyje yra 10 skirtingų efektų, kuriuos galima pritaikyti skirtingiems vaizdams. Poveikis tikrai turi įtakos, ypač kai reikia suprasti, kas daroma be CSS3 pagalbos. Išsamus vadovas, padėsiantis išsiaiškinti, kas vyksta.
Idėja yra sukurti SVG, kuris yra fono forma bet kokiam rašymui ir virsta kita forma, kai virš jo užvedama pelė. Tokiu būdu galite sukurti daugybę skirtingų parinkčių, o pavyzdyje parodyti trijų tipų perėjimo efektai. SVG naudojimo pranašumas yra tas, kad galime pakeisti formos dydį, kad jis atitiktų pradinio konteinerio dydį.
Rozsuvni vaizdai
Šio efekto esmė yra ta, kad vaizdas rodomas aukštyn ir žemyn, kad būtų rodomas antraštė. Jei pažvelgsite į stiliaus parametrus, manau, kad galite pasiekti gražių efektų, tačiau apskritai viskas atrodo gana paprasta.
Su šiuo efektu viskas paprasta, paveikslėlių antraštės matomos dešinės rankos viršuje arba apačioje, puslapio apačioje, eilutės atsiranda tamsiame fone, viskas tiesiog performatuojama naudojant CSS galią .
Kaip suprojektuota, miniatiūros yra patamsintos, kai virš jų užvedamos pelės žymeklis, rodomi vaizdai ir parašas susilieja šviesiame fone.
Antraštė prieš vaizdą pasirodo iš kampo ir išplečiama per visą vaizdo sritį įstrižai.
Yra keletas kitų sprendimų, kaip įdiegti parašus prieš miniatiūras. Internetiniame redaktoriuje galite eksperimentuoti su parametrais ir pasiekti norimų rezultatų.
Gražių efektų rinkinys užvedus pelės žymeklį virš miniatiūrų, įvairių tipų paveikslėlių antraščių išvaizda ir dizainas. Plonos linijos, kontrastingos su nedideliu patamsėjimu, sukuria lengvai suprantamus informacijos blokus.
Chimerinės formos ir efektas sustiprinami dėl animacijos efekto, kai antraštės pasirodo prieš pateikiant miniatiūras.
Vaizdo skaidrės efekto, skirto vaizduose rodyti tūrines antraštes, naudojant tik CSS3 ir HTML5, kūrimo pavyzdys.
6 paveikslėlių antraštės
6 parinktys, kaip antraštes rodyti prieš vaizdus, kai pelės žymeklį užvedate virš papildomo CSS3. Naudingiausia pamoka apie įgyvendinimą ir pritaikymą savaitgalį.
Na, pagaliau, pagaliau, negaliu negalvoti apie paprasčiausią būdą, kaip sukurti sujungiamą miniatiūros antraštę naudojant CSS3.
Apie šį metodą sužinojau vienoje iš ankstesnių pamokų: .
Ar norėtumėte kuo greičiau išsiųsti pranešimą svetainėje esančiam robotui? Dabar tai visiškai įmanoma! Dėl šių paprastų priežasčių TemplateMonster rinkoje atsirado nauja skiltis. Kolekcija bus atnaujinta, bet dabar galite sužinoti, kas tinka jūsų internetiniam projektui. Viskas, ką jums reikia padaryti, tai pasirinkti idealų paruoštą sprendimą ir pateikti reikiamą informaciją. Ir nepamirškite, kad tekstą į laiško šabloną turite rašyti rankiniu būdu.
Su pagarba Andrius
Visų pirma, tiems, kurie dar ne visai įsigilinę į temą, trumpai paaiškinsiu, kas tai yra. Įvairių tipų efektai (antraštės, patarimai, sklandūs perėjimai, transformacija, pasukimas, patobulinimas, poslinkis ir kt.) gali būti taikomi svetainės elementams, kai virš jų užvedamas pelės žymeklis. Šiuos efektus galima įdiegti naudojant įvairius „jQuery“ papildinius ir „pure .
Šiandien ruošiau didelę originalių vaizdų užvedimo efektų kolekciją, sukurtą naudojant CSS3, neprijungus javascript bibliotekų. Nekalbėsiu apie hover efektų diegimo gryname CSS3 pranašumus ir trūkumus, tai yra kita tema, tiesiog stebėkitės pavyzdžiais ir, jei reikia, vikorizuokite panašumus savo svetainėje. Visi efektai pateikiami iš pirmo žvilgsnio su demonstraciniu užpakaliu ir ataskaitos dokumentacija su išvesties įrenginiais. Vadovai daugiau ar mažiau buržuaziniai, bet viskas daugiau ar mažiau intuityviai suprantama.
Norėčiau išreikšti pagarbą, kad visos šios programos tinkamai veikia tik dabartinėse naršyklėse, kurios palaiko CSS3 galią.
Kad nesugadintumėte paslėpto paveikslo, nesugadindami mašininio efektų pavadinimų vertimo (visiems tikslams), atimant pavadinimų originalus, kaip juos pavadino leidėjas.
Labai pastebimas efektas sutelkiant dėmesį į miniatiūrą yra pavaizduotas plonų linijų atsiradimu dizaine ir kitose dalyse. Atsiranda daugybė skirtingų tipų efektų – nuo antraščių iki paveikslėlių, švelnios ir neįkyrios 3D transformacijos ir sklandžių pseudoelementų perėjimų. Šiuolaikinėse naršyklėse veikia prasčiau.
„iHover“ turi įspūdingą efektų rinkinį, kai pelės žymeklį užvedate ant gryno CSS3, naudojant Bootstrap 3. Įkvėptas Scss CSS (failo), lengvai modifikuojamas. Modulinis kodas, į darbą nereikia įtraukti viso failo. 30+ skirtingų efektų vienoje pakuotėje. Viskas gerai dokumentuota, Vikoristane efektai dar paprastesni. Viskas, ką jums reikia padaryti, tai padaryti tinkamą HTML išdėstymą ir įtraukti CSS failą prieš pradėdami dirbti.
Sukuria daugybę paprastų, bet stilingų efektų po išskirtinio vaizdo valandomis. Idėja yra ta, kad užvedus pelės žymeklį virš miniatiūros bus veiksmingai rodomas pavadinimas, autoriaus vardas ir nuorodos mygtukas. Tam tikriems efektams naudojamos vaizdinės 3D transformacijos.
Labai paprastas perėjimo efektas, be jokių specialių varpelių ir švilpukų, aplink vaizdą kadre virsta besikeičiančiu židiniu, kai svyruoja ir viskas.
Užveskite pelės žymeklį miniatiūroms naudojant CSS3
Mažmenininkas išdėsto savo darbą kaip užpakalinę galeriją, kad pavaizduotų perėjimo nuo iššokančiųjų komentarų (antraštės) prie miniatiūrų poveikį. Teigiama, kad ją palaikys dabartinės naršyklės, įskaitant IE 9+. Visavertę galeriją, žinoma, sunku pavadinti, tačiau parašų atsiradimo efektas yra baigtas.
Pagrindinis CSS taisyklių rinkinys, leidžiantis sukurti neigiamą poveikį, kai pelės žymeklis rodomas virš idealiai apvalių miniatiūrų. Paketą sudaro 7 CSS3 perėjimų tipai, įskaitant mokymo ir tobulinimo dokumentus. Efektus palaiko dabartinės naršyklės.
Užvedus pelės žymeklį, apvyniojamos miniatiūros
Paprastas apvalių miniatiūrų apvyniojimo efektas, kai pelės žymeklis užvedamas virš jų, maždaug tą patį galite pamatyti mano tinklaraštyje, pranešimuose apie įrašus ant galvos. Jis įgyvendinamas naudojant kelias CSS kodo eilutes.
Kaip išversti pažodžiui: „Seksualinis poveikis nukreipus į“. Kažkas tokio seksualaus, kurio efekto vargu ar pastebėsite, nebent turite laukinę vaizduotę, tačiau efektas savaip naudingas ir didina pagarbą naujam vyrui.
Penki skirtingi efektai, rodomi, kai nukreipiate į juos. Trijų variacijų parašai, įvairaus matomumo užuolaidos ir apvyniojimas su horizontaliais judesiais.
4 Pažvelkite į vaizdų antraščių animacijos efektus, įdiegtus naudojant CSS3. Skirtingos pozicijos su perėjimo efektais yra visiškai standartinės. Norėdami suprasti, kaip veikia animacija, pažiūrėkite į demonstracinio puslapio išvesties kodą nematydami pridedamos dokumentacijos.
Į galerijos tinklą įtrauktos miniatiūros su įvairiais efektais, tokiais kaip parašai, įvyniojimas, vystymas, suliejimas ir kt. Dokumentai iš šaltinio ir koregavimo yra menki, tačiau galite kreiptis dėl specialaus prašymo.
Šis efektas niekuo neypatingas, banalus vaizdo ryškumo pakeitimas slenkant ar net animacijos elemento pridėjimas. Turėsite patys išsiaiškinti įgyvendinimo detales, skaitydami išvesties demonstracinę versiją.
Kitas 10 vaizdų užvedimo efektų rinkinys, skirtingi miniatiūrų rodiniai užvedus, priartinant, pasukant, pasukant, tamsinant ir kt.
Įvairūs kadro animacijos efektai aplink vaizdą atrodo labai patraukliai, taip pat yra koregavimo ir wiki ataskaita.
Originalūs CSS3 užvedimo efektai, naudojami siekiant efektyviai rodyti miniatiūrų antraštes, kai pelės žymeklis užvedamas. CSS taisyklių rinkinyje yra 10 skirtingų efektų, kuriuos galima pritaikyti skirtingiems vaizdams. Poveikis tikrai turi įtakos, ypač kai reikia suprasti, kas daroma be CSS3 pagalbos. Išsamus vadovas, padėsiantis išsiaiškinti, kas vyksta.
Idėja yra sukurti SVG, kuris yra fono forma bet kokiam rašymui ir virsta kita forma, kai virš jo užvedama pelė. Tokiu būdu galite sukurti daugybę skirtingų parinkčių, o pavyzdyje parodyti trijų tipų perėjimo efektai. SVG naudojimo pranašumas yra tas, kad galime pakeisti formos dydį, kad jis atitiktų pradinio konteinerio dydį.
Rozsuvni vaizdai
Šio efekto esmė yra ta, kad vaizdas rodomas aukštyn ir žemyn, kad būtų rodomas antraštė. Jei pažvelgsite į stiliaus parametrus, manau, kad galite pasiekti gražių efektų, tačiau apskritai viskas atrodo gana paprasta.
Su šiuo efektu viskas paprasta, paveikslėlių antraštės matomos dešinės rankos viršuje arba apačioje, puslapio apačioje, eilutės atsiranda tamsiame fone, viskas tiesiog performatuojama naudojant CSS galią .
Kaip suprojektuota, miniatiūros yra patamsintos, kai virš jų užvedamos pelės žymeklis, rodomi vaizdai ir parašas susilieja šviesiame fone.
Antraštė prieš vaizdą pasirodo iš kampo ir išplečiama per visą vaizdo sritį įstrižai.
Yra keletas kitų sprendimų, kaip įdiegti parašus prieš miniatiūras. Internetiniame redaktoriuje galite eksperimentuoti su parametrais ir pasiekti norimų rezultatų.
Gražių efektų rinkinys užvedus pelės žymeklį virš miniatiūrų, įvairių tipų paveikslėlių antraščių išvaizda ir dizainas. Plonos linijos, kontrastingos su nedideliu patamsėjimu, sukuria lengvai suprantamus informacijos blokus.
Chimerinės formos ir efektas sustiprinami dėl animacijos efekto, kai antraštės pasirodo prieš pateikiant miniatiūras.
Nuostabūs perdengtų piktogramų miniatiūrose efektai rodomi skirtingomis parinktimis. Taikant vikoristiką, simbolis (+) yra apsuptas apskritimo už papildomo kraštinės spindulio: CSS taip pat galite paryškinti šrifto piktogramas, kad būtų didesnis susiliejančios skydelio informacijos turinys.
Vaizdo skaidrės efekto, skirto vaizduose rodyti tūrines antraštes, naudojant tik CSS3 ir HTML5, kūrimo pavyzdys.
6 paveikslėlių antraštės
6 parinktys, kaip antraštes rodyti prieš vaizdus, kai pelės žymeklį užvedate virš papildomo CSS3. Naudingiausia pamoka apie įgyvendinimą ir pritaikymą savaitgalį.
Na, pagaliau, pagaliau, negaliu negalvoti apie paprasčiausią būdą, kaip sukurti sujungiamą miniatiūros antraštę naudojant CSS3.
Šioje pamokoje mes ir toliau dirbame su CSS, o šaunus efektas pasiekiamas, kai užvedate pelės žymeklį virš vaizdo, vaizdas sklandžiai sukasi su šešėliais, o teksto antraštės jame yra apibrėžtos.
CSS efektas apibūdinamas transformacijos blokų sistema
Ruošiame šabloną, jame yra du failai, Index, kuriame yra CSS. CSS buvo pašalintas iš užpildymo, įdiegtas šriftas ir pridėtas prie vaizdo fono. Pačiame /img aplanke yra du failai, fonas yra užpakalių paveikslėlis.
Visi blokai, kuriuos reikia įdėti į puslapį, yra aprašyti ir užpildyti jų tekstu.
Div.dws>div.blocImg>img+div.blocText>div.text>h2+p perėjimas 
CSS užvedimo efektas
transformuoti skalę (x, y)
:hover::prieš::po
Apibūdinami pagrindiniai vaizdo stiliai / css efektas
Bloką su paveikslėliu nustatome į fiksuotą plotį ir aukštį, o perpildymo pagalba: paslėptas įtraukiame visus įrašus tarp jų ir pridedame žymeklį.
BlocImg (plotis: 600 piks.; aukštis: 338 piks.; perpildymas: paslėptas; žymeklis: rodyklė; )
Ekrano viduryje esantis blokas yra išdėstytas taip, kad būtų lengviau matyti.
Dws (pozicija: absoliuti; viršuje: 50%; kairėje: 50%; transformuoti: išversti (-50%, -50%); )
Tada paveikslėlis nustatomas į 100 % pločio ir animacija sekundę tampa sklandesnė.
BlocImg img (plotis: 100 %; perėjimas: .5s; )
Nustatykite dydžio filtrą į 1 pip. filtras: blur(1px) ir tamsinti foną, o tam pridedame .blocImg klasę prie juodos spalvos, o užvedę pelės žymeklį patį vaizdą padarysime pusiau aiškų neskaidrumą: .5; .
Dws:hover .blocImg img ( transformuoti: pasukti (-10 laipsnių) skalę (1,3); filtras: suliejimas (1 piks.); neskaidrumas: 0,5; )
Dabar pradėkime stilizuoti tekstą.
Bloko teksto įvedimas
Be abejo, bloką išdėstome tekstu .blocText ir nustatome visų kraštų paraštę iki 30 pikselių. Pagal kadrą jie sukūrė animacinį vaizdą.
BlocText (kontūras: 1 piks. vientisa oranžinė; padėtis: absoliuti; viršuje: 30 piks.; kairėje: 30 piks.; dešinėje: 30 piks.; apačioje: 30 piks.; )
Tekstui nustatykite baltą spalvą, kaip ir puikūs rašytojai, ir pridėkite paminkštinimus išilgai kraštų.
Tekstas (spalva: #fff; teksto transformacija: didžiosios raidės; užpildymas: 0 20 pikselių; )
Kito lygio antraštė nustatyta į 25 paveikslėlius.
Tekstas h2 (šrifto dydis: 25 piks.; )
Kita jo dalis turi būti oranžinės spalvos, įsmeigta iš apačios ryžiams, o apatinis fotelis turi būti 2 vnt.
Teksto h2 ilgis (spalva: oranžinė; užpildas apačioje: 3 pikseliai; kraštinė apačioje: 2 pikseliai vientisas #fff; )
Pastraipa išdėstyta absoliučiai, sumažinta 180 smailių. Nustatykite šio bloko plotį į 250 pikselių. Iš kairės pridėkite kraštinę ties 4 taškais. ir nustatome vidinius įėjimus.
Tekstas p ( padėtis: absoliuti; viršuje: 180 piks.; plotis: 250 piks.; kraštinė kairėje: 4 piks. vientisas #ffb611; užpildymas: 0 10 piks.; )
Apibūdinkite pseudoelementus::prieš ir::po
Paimkime kontūrą, kuris anksčiau buvo priskirtas .blocText klasei, ir nustatykime jį pseudoelementams.
Kuriame pseudoelementus :: before :: po ir aprašome jų pagrindinius stilius.
Mes juos nustatome visiškai, nustatome 100% plotį ir aukštį ir pasirodo per kelias sekundes.
BlocText::before, .blocText::after (turinys: ""; padėtis: absoliuti; viršuje: 0; kairėje: 0; plotis: 100%; aukštis: 100%; )
Okremo ::prieš taikydami kraštinę iš viršaus ir apačios ties 1 pik. ir nustatykite X ašies transformacijos transformaciją: skalė(0,1) .
BlocText::before ( kraštinė viršuje: 1 piks. vientisas #fff; kraštinė apačioje: 1 piks. vientisas #fff; transformacija: skalė (0,1); )
Tas pats pasakytina ir apie :: po to tik kraštinė dabar yra kairėje ir dešinėje, o transformacija yra išilgai Y ašies
BlocText::aff ( kraštinė kairėje: 1 piks. vientisas #fff; kraštinė dešinėje: 1 piks. vientisas #fff; transformacija: skalė (1,0); )
Dėl jų išvaizdos visų ašių transformacija nurodyta kaip 1.
Dws:hover .blocText::before, .dws:hover .blocText::after ( transformacija: skalė(1,1); )
Negalėsiu pridėti teksto, kuriam .text klasė turi būti nepermatoma: 0 ir pridėsiu sklandžią išvaizdą.
Ir užvedus pelės žymeklį rodomas tekstas.
Dws:hover .text ( neskaidrumas: 1; )
Jie pašalino šaunius „Hover Effects“ nuo valandos, kai nukreipė į nuotrauką.
Jei jums patiko vaizdo įrašas, pasidalykite juo su draugais socialiniuose tinkluose ir nepamirškite ką nors pakomentuoti.
Pamoką ruošė Denisas Gorelovas.
Tabletės
