10 CSS bibliotēkas labāka attēla lidojuma efektam
Lietotāju izīrēšana viegli un skaidri zināt, kura tīmekļa lapas daļa ir noklikšķināma ir svarīga UX dizaina sastāvdaļa. Vecais, bet zelta veids, kā to izdarīt, bija mainīt teksta krāsu un pasvītrot to. Mūsdienās, izmantojot CSS, ir daudz vairāk veidu, kā nodrošināt hover efektus, īpaši attēliem.
Izstrādātāji tagad var pievienojiet pārejas efektus vai animāciju, kad tiek aktivizēts lidojuma notikums. Mēs skatāmies uz virziena slaidiem, palielināsim dažādus ātrumus, izbalēšanu un izbalēšanu, viru efektiem, atklātas gaismas, wobbles, bounces un vairāk.
Šajā apkopojumā ir vairāk nekā 250 hover efekti iedvesmot jūs. Jūs varat arī paņemt kodu avotā.
Image Hover Effects (16 efekti)
Šajā lapā jūs atradīsiet jauku kolekciju, kurā ir 16 hover attēlu efekti ar parakstiem. Satveriet HTML un CSS kodu katram efektam, novietojot virs attēliem, pēc tam noklikšķinot uz Rādīt kodu.
Image Caption Hover Animācija (4 efekti)
Šeit ir 4 atdzist parakstu animācijas, kas tiek rādītas, kad viens pārspēj virs attēla. Ietekme tiek veidota, izmantojot tīras CSS3 pārejas un pārveidojot, un ne JavaScript, lai palielinātu pārlūkprogrammas saderību.
iHover (35 efekti)
iHover ir CSS3 darbināmu hover efektu kolekcija. Pastāv 20 apļa iedarbības efekti un 15 kvadrātveida svārstību efekti. Lai izmantotu efektus, jums būs nepieciešams uzrakstīt HTML marķējumu un iekļaut CSS failus.
Pārvietojiet attēlu (44 efekti)
Šī bibliotēka satur 44 efektus, kas veikti ar tīru CSS. Dažas no šīm sekām ietver izbalēšanu, nospiešanu, slaidus, eņģes, atklātas, tālummaiņas, izplūšanu, flips, krokas un slēģus vairākos virzienos. Ir paplašināta 216 efekta versija, ko var iegādāties par € 14.
Hover Effect Ideas (30 efekti)
Šis attēls, ko demonstrē Codrop veiktais demo, dod jums iedvesmu, veicot vienmērīgu pāreju starp attēliem un tā parakstiem. Kopumā ir 30 efekti uz divām kopām ar konsultācijām un pirmkodu.
Novietojiet CSS (108 efekti)
Hover CSS ļauj jums pievienot hover efektus jebkuram elementam, piemēram, pogai, saitei vai attēlam. Ietekme ietver 2D pārejas, fona pārejas, robežu, ēnu un spīduma pārejas un vairāk. Bibliotēka ir pieejama CSS, Sass un LESS.
Animatisms (100+ efekti)
Pogām, pārklājumiem, detaļām, parakstiem, attēliem un sociālo mediju pogām ir vairāk nekā 100 attēlu kustības animācijas. Visus efektus nodrošina CSS3.
Paraksts Hover Effect (7 efekti)
Šajā kolekcijā ir 7 dažādas sekas. Visas pārejas izskatās ļoti patīkamas un gludas. Dodieties uz apmācības sadaļu, lai uzzinātu, kā piemērot šos efektus savā projektā.
CSS Image Hover efekti (15 efekti)
Vienkāršu hover efektu kolekcija, piemēram, tālummaiņa, slaidu, pagriešana, pelēka skala, izplūdums, necaurredzamība un citas pamata sekas. Jūs varat izmantot šos efektus, pievienojot CSS klasi pirms skaitlis tag.
Virzība uz 3D virziena virzienu
Tas ir super atdzist efekts, kas atklās jūsu pēdējo peles kustību. Attēlu virsraksti tiks atvērti no viena no četrām norādēm, pamatojoties uz pēdējo kursora pozīciju.
Hover Animācija
Šeit ir robežu lidojuma animācija, kas iedvesmota no UNIQLO. Pēc hover notikuma attēla robeža kļūs animēta.
Flīzes ar animētu lidojumu
Viens no flīžu dizainiem, tas ir lēns tālummaiņa, slaidi, pop-ins, blāvi pārklāj cita starpā.
SVG klips-Path Hover Effect
Super awesome rentgena starmešu attēls, kas iedarbina SVG klipa ceļš un CSS pārejas. Darbojas ar Chrome, Opera un Safari.
