Mūsdienās attēli tīmekļa vietnēs ir kļuvuši par galveno elementu lietotāju piesaistīšanā visa veida saturam. Sākot ar fotogrāfijām un ceļojumiem līdz pat jebkura veida produktiem un ainām, attēli ir viens no svarīgākajiem elementiem, tāpēc, ja varam radīt pārsteidzošu efektu, šim fotoattēlam būs spēks noturēt lietotāju, kurš ir nonācis mūsu vietnē.
Tieši to daudzi no šiem efektiem spēj panākt vietnes apmeklētājiem. CSS efekti dažos gadījumos ir patiesi uzmanību piesaistoši , bet citos tie ir vienkāršāki, vienlaikus vienmēr sasniedzot to, ko mēs visi tiecamies: noturēt lietotāja uzmanību ar visu, ko piedāvā mūsu vietne. Pāriesim pie 33 CSS attēlu efektu uzskaitījuma, kas spēcīgi piesaista uzmanību.
Šķidruma vērpšanas attēls 3D
Šis attēla efekts ir patiesi pārsteidzošs, sadalot attēlu 3D kubā , kas var rotēt ap savu vertikālo asi, radot satriecošu vizuālo efektu. Balstoties uz CSS3D, ja varat to ieviest savā tīmekļa vietnē, jūs atstāsiet savus apmeklētājus bez vārdiem.
3D kursora efekts
Vēl viens lielisks vizuālais efekts tiek panākts, liekot attēlam nokrist tā, it kā uz to būtu trāpīts ar peles rādītāju, kad virs tā novietojat kursoru . Lieliska animācija vēl vienam lieliskam vizuālajam efektam.
CSS 3D panorāma
HTML un CSS darbojas kopā, lai radītu lielisku panorāmas efektu , it kā mēs skatītos no ēkas jumta pilsētā.
Attēli "slīpuma" perspektīvā
Vizuāls eksperiments , kas var kalpot konkrētam mērķim kā tīmekļa elements.
Venēcijas žalūzijas
Lielisks vizuālais efekts katru reizi, kad virs tā novietojat peles rādītāju, liekot tam pārslēgties starp divām kontrastējošām krāsām attēlā.
Sadalīt attēlu
Novietojot peles rādītāju virs attēla, tas palielināsies, lai iegūtu perfektu kompozīciju.
Novietojiet attēla efektu
Režģa efekts tiek radīts, ja peles rādītājs tiek novietots virs noteikta attēla punkta.
Spoguļa efekts
Attēls pārvietojas ar spoguļa efektu, kad mēs pabīdām peles rādītāju no labās uz kreiso un otrādi.
Attēls ar atstarošanas efektu
Darbība, kuras mērķis ir projicēt atstarošanas efektu uz attēlu, ko izmantojām šim CSS attēla efektam.
Attēla slīpums kursora kursora efektā
Var būt nedaudz reibinoši redzēt, kā attēla malas rada pārsteidzošu dubulto efektu.
Hover blur effect
Pārvietojot rādītāju pāri attēlam, rodas izplūšanas efekts , kas dažu sekunžu laikā pazūd.
Attēla kursors
Pārvietošanās efekts rodas tajā pašā brīdī, kad novietojam peles rādītāju virs attēla.
Lidojuma efekts SVG
Lielisks kursora efekts atklāj attēlu, kas paslēpts zem paša nosaukuma. Augsta kvalitāte un ideāli piemērots radošas un intriģējošas attēlu galerijas demonstrēšanai.
No teksta uz attēlu lidināties
Teksts atklāj attēlu, kad virs tā novietojam peles rādītāju, ar pārsteidzošu animāciju, kurā redzams akls efekts , kas atveras no vidus.
Fona attēla daļas atklāšana
It kā mūsu rokās būtu teleobjektīva skats , daļa fona attēla atklājas, pārvietojot peles rādītāju.
Hover animācija
Spēcīgs, tomēr vienkāršs savā kompozīcijā. Ja meklējat kaut ko minimālistisku un neuzbāzīgu , šis efekts jums patiks.
Izsekošanas kursora efekts
Vēl viens vienkāršs efekts konkrētam mērķim.
Attēla tālummaiņa
Šis ir tipisks tālummaiņas efekts , ko noteikti vēlēsities ieviest savā tīmekļa vietnē.
Tālummaiņas kursora efekts
Vēl viena alternatīva ir tālummaiņas efekts, kad atstājam peles rādītāju virs attēla.
Lupas efekts
Kā norāda nosaukums, peles rādītājs virs attēla pārvērtīsies par palielināmo stiklu, to palielinot.
Nav JavaScript kursora
Bez JavaScript var atjaunot attēla tālummaiņas efektu ar mainīgu režģi.
CSS pārklājuma efekts
Tīrs CSS efekts slānim , kas ir uzmontēts virs mūsu attēla.
Hovijs par bildēm
Mums ir CSS animāciju bibliotēka lietotāja elementiem. Jūs varat tās visas apskatīt saitē, lai atrastu sev piemērotāko. Ir pieejami vairāki augstas kvalitātes efekti.
Attēla pārklājums
Ar augstas kvalitātes līniju zīmēšanas palīdzību tas piedāvā pārsteidzošu slāņošanas efektu . Vēl viens, kas varētu viegli kļūt par jūsu iecienītāko.
Attēla pārklājuma efekts
Esam atgriezušies ar vēl vienu HTML un CSS pārklājuma efektu , kurā centrā ir apļveida līnijas.
Attēla pārklājuma efekts
Pārsteidzošs pārklājuma efekts, ko var izmantot dažādiem tīmekļa elementiem. Ar nelielu radošumu to var integrēt tādās kartītēs kā šajā rakstā redzamās.
Lidojuma efekts ar ikonu animāciju
Augsta kvalitāte ar ikonu animāciju, kas jūs aizraus jau no paša sākuma. Tā spēj lieliski uznirstošajā tekstā.
Lidojuma efekts ar subtitriem
Vēl viens lielisks kursora efekts ar subtitriem, kas parādās ar ļoti vienmērīgu un labi izpildītu animāciju .
3D virziena virziena efekti
Viens no visiedvesmojošākajiem attēlu efektiem, ko redzēsiet visā sarakstā. Peles rādītājs kļūs par "3D kuba" vadlīniju.
Attēlu skala
Vēl viens vienkāršs, bet pārsteidzošs efekts bez daudzām liekām detaļām.
iOS ēnu efekts ar React
Tas ir efekts bez īpašas pompozitātes , taču diezgan konkrēts radītajā ēnu efektā, jo šķiet, ka tas paceļas no "zemes".
Ēnu stils iOS 10
Peles rādītājam ir "grūdiena" efekts uz attēlu, kas rada ļoti reālistisku izskatu. Ļoti interesanti.
Attēla pārejas efekts
Satriecošs pārejas efekts , kas sadala attēlu kvadrātu režģī. Varat kontrolēt efekta ilgumu un citas funkcijas.
Ritināt attēla pāreju
Ļoti moderns un radošs pārejas efekts jūsu vietnei. Nepalaidiet garām šo CSS.
Attēla ritināšana ar peles ritenīti
Tev tas būs jāievieš, kad izmantosi peles ritenīti , lai pārslēgtos starp attēliem, ar lielisku pārejas animāciju. Apbrīnojami.