35 tõeliselt virgutavat CSS-i pildiefekti

CSS-i pildiefektid

Täna on veebis pilte saanud peamiseks tähelepanu köitjaks kasutajale, kes läheneb sellele igasuguste teemade jaoks. Alates fotograafiast, reisimisest, igasugustest toodetest või mis tahes stseenidest on pildid üks olulisemaid elemente, nii et kui suudame luua silmatorkava efekti, on sellel fotol võim säilitada meie veebisaidil langenud kasutaja.

See on lihtsalt see, mida paljud neist mõjudest on võimelised veebisaidi külastajal saavutama. CSS-i mõjud, mis on mõnel juhul tõesti pilkupüüdvad ja et teistes on nende eesmärk olla lihtsam, ehkki alati saavutada see, mida me kõik soovime: et kasutaja jääks tähelepanelikuks kõigele, mida meie veebisait pakub. Jätkame 33 CSS-i pildiefektide loeteluga, mis tõmbavad jõuliselt tähelepanu.

Vedel keerduv pilt 3D

3d kuup

See pildiefekt on tõesti hämmastav, kui lagundada pilt 3D-kuubikuks mis on võimeline pöörama oma vertikaalsuse suunas, et tekitada suurepärane visuaalne efekt. CSS3D põhjal on külastaja sõnatu, kui suudate selle oma veebisaidil rakendada.

Seotud artikkel:
Veel 35 CSS-i tekstiefekti teie veebisaidile

3D hõljutuse efekt

3D hõljuki efekt

Veel üks suurepärane visuaalne efekt selle saavutamiseks, kui jätame hiirekursori pildi kohale, siis see kukkuda, nagu oleks sama tabanud. Suurepärane animatsioon veel ühe suurepärase pildiefekti jaoks.

CSS 3D-panoraam

CSS 3D pânorama

HTML ja CSS käivad käsikäes a tegemiseks suurepärane panoraamefekt nagu vaataksime linnas ühe hoone otsast.

Seotud artikkel:
27 olulist CSS-i tekstiefekti teie veebisaidi tüpograafia jaoks

Kujutised "kallutus" perspektiivis

Perspektiivne kallutamise pildistamine

Un visuaalne eksperiment mis võib olla veebiosana konkreetne eesmärk.

ribakardinad

ribakardinad

Suurepärane visuaalne efekt iga kord jätke hiirekursor nii et see muutub kahe kontrasti vahel, mille pilt annab.

Jaga pilti

Jaga pilti

Hõljutades hiirekursorit pildi kohal, see suurendatakse, et see oleks ideaalselt komponeeritud.

Hõljutage kujutise efekti

Hõljutud efekti pilt

Võrrefekt tekib lahkumisel el hiirekursor kindla punkti kohal pildilt.

Peegel efekt 

Espejo

Pilt kerib peegli efektiga kui libistame hiirekursorit paremalt vasakule ja vastupidi.

Peegeldusefektiga pilt

Refleksi efekt

Tegevus, mis otsib projitseerida pildile peegeldusefekt mida oleme selle CSS-i pildiefekti jaoks kasutanud.

Kujutise kallutamine hõljutusefektis

Kallutamisefekt

Võib jõuda natuke uimane kui näete, kuidas pildi küljed tekitavad väga silmatorkavat topeltefekti.

Hõljutage hõljutatud efekti

Hägususe efekt

Kui liigutame kursorit pildi kaudu, tekitab hägususe efekti mis kaob sekunditega.

Kujutise hõljutamine

Kujutise hõljutamine

On mõju nihe samal hetkel, millal me osuti osutasime hiirega üle pildi.

Hõljutud efekt SVG-s

SVG hõljuk

Suurepärane hõljumisefekt, mis paneb paljastas peidetud pildi nime all. Suurepärane viimistlus ja sobib loomingulise ja uudishimuliku pildigalerii kuvamiseks.

Hõljuvalt tekstist pildini

SVG efekt

Tekst näitab pilti, kui hiirekursor hõljub pilkupüüdva animatsiooniga pimeda efektiga mis avaneb keskelt.

Taustpildi osa paljastamine

Hõljutav kursor

Nagu oleks meil käes teleobjektiivi rist, hiirekursori liigutamisel ilmub osa taustpildist.

Hõljutatud animatsioon

Pilt hõljutuse animatsioon

Suurepärane efekt, kuid oma koostiselt väga lihtne. Kui otsite midagi lihtsustatud ja minimalistlik, see efekt sunnib sind armuma.

Hõljutava efekti jälgimine

Jälgimispilt

Muu lihtne efekt konkreetsel eesmärgil.

Pildi suum

Zoom

See on tüüpiline suumi efekt mida soovite kohe oma veebisaidile viia.

Suumi hõljutuse efekt

Hõljutage suumi suumimisel

Teine alternatiiv nagu suumi efekt, kui kursorist lahkume hiir pildil.

Luubi efekt

Luubi efekt

Nagu nimigi ütleb, hiirekursor pöörab pildi ümber seda suurendavas luupis.

JavaScripti hõljuk puudub

Ei JS

JavaScripti pole saate taastada suumi efekti pilt muutuva ruudustikuga.

CSS ülekatte efekt

Hõljuma

Un puhas CSS-efekt kihi jaoks mis on kinnitatud meie pildile.

Hovy piltide jaoks

Hovy pildid

Teil on kasutajaelementide jaoks CSS-i animatsioonide kogu. Kõiki neid näete lingil, et saada endale sobivam. Teil on valida mitu efekti suurepärase kvaliteediga.

Kujutise ülekate

read

Kvaliteetse joonanimatsiooniga silma peal on pilkupüüdev kihilisus. Veel üks, mis võib saada teie lemmikuks.

Pildiefekti ülekate

Ringikujuline hõljuk

Naaseme teise efektiga ülekate HTML-is ja CSS-is milles peategelased on ümmargused jooned.

Kujutise ülekatte efekt

Hõljuma

Silmatorkav ülekatteefekt, mida saab kasutada erinevate veebielementide jaoks. Koos vähe loovust saab integreerida kaartidel nagu need, mis on selles artiklis.

Hõljutatud efekt ikoonianimatsiooniga

Hõljutage kursori ikooni

Kvaliteetne ikoonianimatsiooniga, mis lisab teid esimestesse muudatustesse. Ta suudab tuua tekst suurepäraselt esile.

Hõljutud efekt koos subtiitritega

Subtítulos

Veel üks suurepärane hõljumisefekt koos subtiitrid, mis ilmuvad väga sujuva animatsiooniga ja saavutatud.

3D hõljuva suuna efektid

3D-suund

Üks kõige stimuleerivamaid pildiefekte, mida näete kogu loendis. The hiirekursor saab 3D kuubi juhendiks.

Kujutise skaala

Kujutise skaala

Teine lihtne efekt, kuid väga efektne ilma paljude õitsenguteta.

iOS-i variefekt koos Reactiga

ios varjud

Un efekti ilma suurema kärata, kuid selle varjuefektis on väga konkreetne, kuna tundub, nagu oleks see "maast" üles tõstetud.

Shadow Style iOS 10

ios vari

Hiirekursoril on "push" efekt pildil, mis toodab suurt realismi. Väga huvitav.

Kujutise ülemineku efekt

Mosaiigid

Un imeline üleminekuefekt milles pilt laguneb ruudustikuvõrguks. Saate kontrollida efekti ilmnemise aega ja palju muud.

Kerige pildi üleminekut

rullraamat

Un väga trendikas ja loominguline üleminekuefekt oma veebisaidile. Ärge jätke selle CSS-i kohtumist vahele.

Pildi kerimine hiirerattal

üleminek

Sa pead seda tegema rakendada seda hetkel, kui kasutate hiireratast vahelduva animatsiooniga ühelt pildilt teisele vahetamiseks. Suurejooneline.


Artikli sisu järgib meie põhimõtteid toimetuse eetika. Veast teatamiseks klõpsake nuppu siin.

6 kommentaari, jätke oma

Jäta oma kommentaar

Sinu e-postiaadressi ei avaldata. Kohustuslikud väljad on tähistatud *

*

*

  1. Andmete eest vastutab: Miguel Ángel Gatón
  2. Andmete eesmärk: Rämpsposti kontrollimine, kommentaaride haldamine.
  3. Seadustamine: teie nõusolek
  4. Andmete edastamine: andmeid ei edastata kolmandatele isikutele, välja arvatud juriidilise kohustuse alusel.
  5. Andmete salvestamine: andmebaas, mida haldab Occentus Networks (EL)
  6. Õigused: igal ajal saate oma teavet piirata, taastada ja kustutada.

  1.   Sandy Hernandez DIJO

    Tere. Mulle meeldisid teie postitatud efektid väga. Juhuslikult saate teada, kuidas efekt tekib, kui asetate kursori pildile ja see liigub alt üles, mis on ideaalne veebilehtede eelvaate kuvamiseks. Jätan teile näite, mida mõtlen, rubriigis «VIIMASED VEEBISEHELE TÖÖD
    »Veebisaidilt selectawebs.com
    Thanks in advance

  2.   Omar DIJO

    Suurepärane leht ja postitus, see on olnud minu jaoks väga kasulik, kuna vajasin portaali sisenemisrakenduste jaoks mingeid efekte. Suur aitäh nende kaastööde eest.

  3.   rotger gabriel DIJO

    Suurepärased efektid. Olen iseõppija, mulle on veebiarenduse idee alati väga meeldinud, tahaksin väga teie nõuandeid, kuidas alustada ja mis järjekorras õppima minna. lugupidamisega

  4.   kitsas DIJO

    Tere, aitäh sisu eest. Täna avastage oma leht. See on ime. Lugemisele ja päringutele, mida selles saab teha, pole lõppu. ;)

    1.    Manuel Ramirez DIJO

      Tere, Natalia! Mul on hea meel, et teile meeldivad siin Creativos Online'i lugemised. Kõike paremat!

  5.   Mendoza DIJO

    Hei, suurejooneline heade efektide loetelu, oleks väga lahe näha, kuidas neid elementoriga WordPressile rakendada