35 išties džiuginantys 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

Š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

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

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

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

Venecijos žaliuzės

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

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ą

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

Veidrodinis efektas 

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

Vaizdas su atspindžio efektu

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

Vaizdo pakreipimas užvedant pelės žymeklį

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

Užveskite užliejimo efektą

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

Vaizdo užvedimas

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

Svyravimo efektas SVG

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į

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

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

Užveskite animaciją

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

Kitas paprastas efektas konkrečiam tikslui.

Vaizdo mastelis

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

Mastelio žymeklio efektas

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

Didinamojo stiklo efektas

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

Nėra „JavaScript“ žymeklio

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

CSS perdangos efektas

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

Hovy už vaizdus

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

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

Vaizdo perdangos efektas

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

Vaizdo perdangos efektas

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

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

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

3D pelės žymeklio krypties efektai

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

Vaizdo skalė

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

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

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“

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

Vaizdo perėjimo efektas

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

Slinkite vaizdo perėjimą

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

Vaizdo slinkimas pelės ratuku

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