35 išties džiuginantys CSS vaizdo efektai

CSS vaizdo efektai

Šiandien internete yra vaizdų tapo pagrindiniu dėmesio patraukėju vartotojui, kuris kreipiasi į jį visomis temomis. Pradedant fotografija, kelionėmis, bet kokio pobūdžio produktais ar scenomis, vaizdai yra vienas iš svarbiausių elementų, taigi, jei sugebėsime sukurti ryškų efektą, ta nuotrauka turės galią išlaikyti mūsų svetainėje kritusį vartotoją.

Tai tiesiog tai, ką daugelis šių efektų gali pasiekti svetainės lankytojui. CSS efektai, kurie kai kuriais atvejais tikrai patraukia akį ir kad kitose jų tikslas yra būti paprastesniais, nors ir visada pasiekti tai, ko mes visi siekiame: kad vartotojas išliktų dėmesingas viskam, ką siūlo mūsų svetainė. Pateikime dabar 33 patrauklius CSS vaizdo efektus.

Skystas susukamas vaizdas 3D

3D kubas

Šis vaizdo efektas yra tikrai nuostabus, kai suskaidyti vaizdą į 3D kubą kuris sugeba sukti apie savo vertikalumą, kad sukurtų puikų vizualinį efektą. Remiantis CSS3D, jei sugebėsite tai įdiegti savo svetainėje, lankytojas bus be žado.

Susijęs straipsnis:
Dar 35 CSS teksto efektai jūsų svetainei

3D pelės žymeklis

3D pelės žymeklis

Dar vienas puikus vizualinis efektas, norint tai pasiekti, kai paliekame pelės žymeklį virš vaizdo, tai kristi taip, lyg būtų smogta to paties. Puiki animacija dar vienam puikiam vaizdo efektui.

CSS 3D panorama

CSS 3D „Pânorama“

HTML ir CSS sukuria a puikus panoramos efektas tarsi žvelgtume iš pastato viršaus mieste.

Susijęs straipsnis:
27 pagrindiniai CSS teksto efektai jūsų svetainės tipografijai

Vaizdai „pasvirimo“ perspektyvoje

Perspektyvinis pasvirimo vaizdavimas

Un vizualinis eksperimentas kuri gali atlikti tam tikrą tikslą kaip interneto dalis.

Venecijos žaliuzės

Venecijos žaliuzės

Puikus vizualinis efektas kiekvieną kartą palikite pelės žymeklį kad jis pasikeistų tarp dviejų kontrastų, kuriuos suteikia vaizdas.

Padalyti vaizdą

Padalyti vaizdą

Užvedus pelės žymeklį virš vaizdo, jis bus išplėstas, kad jis būtų puikiai sukomponuotas.

Užveskite pelės žymeklio vaizdo efektą

„Hover Effect“ vaizdas

Tinklelio efektas sukuriamas paliekant el pelės žymeklis virš konkretaus taško iš atvaizdo.

Veidrodinis efektas 

Espejo

Nuotrauka slinkimai su veidrodiniu efektu slinkdami pelės žymeklį iš dešinės į kairę ir atvirkščiai.

Vaizdas su atspindžio efektu

Reflekso efektas

Veiksmas, kurio siekiama projektuokite atspindžio poveikį vaizdui kurį naudojome šiam CSS vaizdo efektui.

Vaizdo pakreipimas užvedant pelės žymeklį

Pakreipimo efektas

Gali pasiekti šiek tiek apsvaigti norėdami pamatyti, kaip vaizdo šonai sukuria labai ryškų dvigubą efektą.

Užveskite užliejimo efektą

Neryškus efektas

Judindami žymeklį per vaizdą, sukelia neryškų efektą kad išnyksta per kelias sekundes.

Vaizdo užvedimas

Vaizdo užvedimas

Yra poveikis poslinkis tą pačią akimirką, į kurią įdėjome rodyklę užveskite pelės žymeklį virš vaizdo.

Svyravimo efektas SVG

SVG pakimba

Puikus pakimšimo efektas atidengė paslėptą vaizdą pagal patį pavadinimą. Puiki apdaila ir puikiai tinka rodyti kūrybingą ir įdomią vaizdų galeriją.

Nuo teksto iki vaizdo užveskite pelės žymeklį

SVG efektas

Tekstas atskleidžia vaizdą, kai užvedame pelės žymeklį su ryškia animacija su aklu efektu kad atsiveria nuo vidurio.

Fono paveikslėlio dalies atskleidimas

Užveskite pelės žymeklį

Tarsi turėtume rankoje teleobjektyvo kryžius, dalis fono paveikslėlio atsiskleidžia, kai judiname pelės žymeklį.

Užveskite animaciją

Vaizdo žymeklio animacija

Puikus efektas, bet labai paprastas savo kompozicija. Jei kažko ieškai supaprastinta ir minimalistinė, šis efektas privers jus įsimylėti.

Stebėjimo užvedimo efektas

Stebimas vaizdas

Kitas paprastas efektas konkrečiam tikslui.

Vaizdo mastelis

Padidinti

Tai tipinis priartinimo efektas kurį tikrai norėsite patekti į savo svetainę dabar.

Mastelio žymeklio efektas

Užveskite pelės žymeklį

Kita tokia alternatyva priartinimo efektas, kai paliekame rodyklę pelė įsitaisė ant vaizdo.

Didinamojo stiklo efektas

Didinamojo stiklo efektas

Kaip rodo jo pavadinimas, pelės žymeklis apvers vaizdą jį didinančiame didinamajame stikle.

Nėra „JavaScript“ žymeklio

Ne JS

Nėra „JavaScript“ galite atkurti mastelio keitimo efektą vaizdas su kintamu tinkleliu.

CSS perdangos efektas

Užveskite pelę

Un grynas CSS efektas sluoksniui kuris pritvirtintas prie mūsų turimo vaizdo.

Hovy už vaizdus

Hovy nuotraukos

Turite CSS animacijų biblioteką, skirtą vartotojo elementams. Visus juos galite pamatyti nuorodoje, kad gautumėte sau tinkamiausią. Galite rinktis iš kelių efektų puikios kokybės.

Vaizdo perdanga

linijos

Su aukštos kokybės linijine animacija, yra patrauklus akį traukiantis sluoksniavimas. Kitas, kuris gali tapti jūsų mėgstamiausiu.

Vaizdo perdangos efektas

Apskritasis pelės žymeklis

Grįžtame su dar vienu efektu perdanga HTML ir CSS kurioje pagrindinės veikėjos yra apskritos linijos.

Vaizdo perdangos efektas

Užveskite pelę

Ryškus perdangos efektas, kurį galima naudoti skirtingiems interneto elementams. Su mažai kūrybiškumo galima integruoti kortelėse kaip ir šiame straipsnyje.

Užveskite pelės žymeklį su piktogramos animacija

Užveskite pelės žymeklį

Aukštos kokybės su piktogramų animacija, kuri jus paskatins per pirmuosius pakeitimus. Jis sugeba paryškinti tekstą.

Užveskite pelės žymeklį su subtitrais

Subtitrai

Kitas puikus svyravimo efektas su subtitrai, kurie rodomi su labai sklandžia animacija ir pasiekta.

3D pelės žymeklio krypties efektai

3D kryptis

Vienas iš labiausiai stimuliuojančių vaizdo efektų, kurį pamatysite visame sąraše. The pelės žymeklis taps «3D kubo» vadovu.

Vaizdo skalė

Vaizdo mastelis

Kitas paprastas efektas, bet labai efektingas be daugybės klestėjimų.

„iOS“ šešėlių efektas su „React“

ios šešėliai

Un efektas be didelių fanfarų, bet labai konkretus jo sukurtas šešėlio efektas, nes atrodo, kad jis būtų pakeltas nuo „žemės“.

„Shadow Style“ „iOS 10“

ios šešėlis

Pelės žymeklis turi „stumti“ efektą vaizdą, kuris sukuria didelį tikroviškumą. Labai įdomu.

Vaizdo perėjimo efektas

Mozaikos

Un nuostabus perėjimo efektas kuriame vaizdas suskaidomas į tinklelių tinklelį. Galite kontroliuoti laiką, per kurį atsiranda poveikis, ir dar daugiau.

Slinkite vaizdo perėjimą

ritinys

Un labai madingas ir kūrybiškas perėjimo efektas jūsų svetainei. Nepraleiskite susitikimo šioje CSS.

Vaizdo slinkimas pelės ratuku

Perėjimas

Teks įgyvendinkite jį tuo metu, kai naudojate pelės ratuką perjungti iš vieno vaizdo į kitą su puikia perėjimo animacija. Įspūdingas.


Straipsnio turinys atitinka mūsų principus redakcijos etika. Norėdami pranešti apie klaidą, spustelėkite čia.

6 komentarai, palikite savo

Palikite komentarą

Jūsų elektroninio pašto adresas nebus skelbiamas. Privalomi laukai yra pažymėti *

*

*

  1. Atsakingas už duomenis: Miguel Ángel Gatón
  2. Duomenų paskirtis: kontroliuoti šlamštą, komentarų valdymą.
  3. Įteisinimas: jūsų sutikimas
  4. Duomenų perdavimas: Duomenys nebus perduoti trečiosioms šalims, išskyrus teisinius įsipareigojimus.
  5. Duomenų saugojimas: „Occentus Networks“ (ES) talpinama duomenų bazė
  6. Teisės: bet kuriuo metu galite apriboti, atkurti ir ištrinti savo informaciją.

  1.   Sandy Hernandez sakė

    Sveiki. Man labai patiko tavo paskelbti efektai. Atsitiktinai sužinosite, kaip padaromas efektas, kai rodyklė dedama ant paveikslėlio ir ji juda iš apačios į viršų, idealiai tinkama rodyti tinklalapių peržiūrą. Čia yra pavyzdys, ką turiu omenyje, skyriuje «PASKUTINĖS SVETAINĖS DARBOS
    »Iš svetainės selectawebs.com
    Ačiū iš anksto

  2.   Omar sakė

    Puikus puslapis ir įrašas, jie man buvo labai naudingi, nes man reikėjo tam tikrų efektų, skirtų portalo prieigos skydui prie vidinių programų. Labai ačiū už šiuos indėlius.

  3.   roteris gabrielis sakė

    Puikūs efektai. Esu savamokslė, man visada labai patiko interneto kūrimo idėja, labai norėčiau jūsų patarimo, kaip pradėti ir kokia tvarka eiti mokytis. linkėjimais

  4.   siauras sakė

    Sveiki, ačiū už jūsų turinį. Atraskite savo puslapį šiandien. Tai stebuklas. Skaitymas ir klausimai, kuriuos jame galima pateikti, nesibaigia. ;)

    1.    Manuelis Ramirezas sakė

      Sveika, Natalija! Džiaugiuosi, kad jums patinka skaitymai čia, „Creativos Online“. Sveikinimas!

  5.   Mendoza sakė

    Ei, įspūdingas gerų efektų sąrašas, būtų labai šaunu pamatyti, kaip juos pritaikyti WordPress su elementor