Css animacija kada lebdite iznad slike. Stvorite izvorne efekte lebdenja koristeći CSS3. CSS učinak pri lebdenju

Ako vam se sviđa učinak, možete jednostavno kopirati gotov kod i koristiti ga!

Oživite svoju web stranicu!

Različiti efekti lebdenja mogu dodati svježinu stranicama vaše web stranice. Prije ste za bilo kakav učinak morali raditi s javascriptom, no danas, nakon pojave CSS3 tehnologije, sve se može učiniti i bez korištenja javascripta.

Svi današnji primjeri su implementirani i optimizirani za nove moderne preglednike i sigurno će raditi u njima (na primjer, u Mozilli ili preglednicima iz obitelji WebKit). Ne možemo vas uvjeriti da će raditi u IE-u, ali u najnovijim verzijama efekti će sigurno raditi kako treba. Ali ne zaboravite da je za svaki učinak pripremljena atraktivna opcija vraćanja u slučaju da preglednik i dalje ne podržava učinak.

01. Zumiraj

Demo: Pogledati

Ovaj efekt je vrlo lako implementirati i može se postići na nekoliko načina. Koristili smo metodu u kojoj se svakoj slici dodaje parametar margine, a zatim se prilikom prelaska kursora miša taj parametar uklanja. Recimo da postavka margine počinje na 15 piksela, a pri lebdenju postaje 2 piksela, što uzrokuje da slika poskakuje. Također možete jednostavno koristiti ovaj efekt s tekstom, čak i ako su veze postavljene okomito, a ne vodoravno.

Prijelaz ovdje možete postaviti po vlastitom nahođenju, a učinak će također biti atraktivan bez ikakvog prijelaza. Na primjer, učinak smo učinili malo glatkijim, za što smo mislili da će učinku dodati nešto ljepše.

CSS kod Bump Up efekta

Primjer1 img(
rub: 5px puni #ccc;
plovak: lijevo;
margina: 15px;
-webkit-transition: margina 0,5 s olakšanje;
-moz-prijelaz: margina 0,5 s popuštanje;
-o-prijelaz: margina 0,5 s popuštanje;
}

Primjer1 img: lebdi (
margin-top: 2px;
}
02. Stack & Grow

Demo: Pogledati

Autor ovog efekta očito je želio postići nekakav efekt lava lampe, jer kada kursorom miša prijeđete preko popisa poveznica, svaka slika se polako širi i zatim se vraća na svoju originalnu veličinu.

Za implementaciju ovdje korištene su slike od 400x133 piksela. Zatim im je veličina promijenjena na 300x100 piksela pomoću CSS-a i proširena prelaskom mišem. Budući da je u primjeru cijeli popis poravnat po sredini, nova veličina slika prelomila je cijelo poravnanje. Ovaj se problem može riješiti postavljanjem negativnih margina na polovicu širine uvećanih slika.

CSS kod za Stack & Grow

/*Primjer 2*/
#kontejner (
širina: 300px;
margina: 0 auto;
}

#ex2 img(
visina: 100px;
širina: 300px;
margina: 15px 0;
-webkit-transition: sve 1s jednostavnost;
-moz-prijelaz: sve 1s lakoća;
-o-prijelaz: sve 1s lakoća;
}

#ex2 img: lebdite (
visina: 133px;
širina: 400px;
margin-lijevo: -50px;
}
03. Izbljeđivanje teksta

Demo: Pogledati

Ovdje je autor želio stvoriti nešto poput događaja tipa javascript gdje lebdite iznad jedne stavke, a učinak se prikazuje na drugoj. Ovdje su tekst i slika snimljeni i zatim stavljeni u zaseban lijevo poravnat div. Zatim su divu dodani parametri color: transparent i line-height: 0px. To nam je omogućilo da postavimo tekst uz gornji rub diva i potpuno ga sakrijemo.

Da bi se tekst ponovno pojavio, jednostavno promijenimo boju i visinu linije. Kada prijeđete pokazivačem iznad slike, tekst se ponovno pojavljuje. Vrlo smiješan i jednostavan učinak.

Fade Text In Effect CSS kod

#ex3 (
širina: 730px;
visina: 133px;
visina linije: 0px;
boja: prozirna;
veličina fonta: 50px;
obitelj-fontova: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
težina slova: 300;
transformacija teksta: velika slova;

}

#ex3: lebdjeti (
line-height: 133px;
boja: #575858;
}

#ex3 img(
plovak: lijevo;
margina: 0 15 px;
}
04. Kriva fotografija

Demo: Pogledati

Ovaj efekt je vrlo jednostavan, ali bio bi izvrstan za galeriju sličica. Za početak morate stvoriti mrežu slika, a zatim rotirati slike kada prijeđete iznad njih, što stvara atraktivan učinak.

Postoji mnogo novih CSS vrijednosti koje se ovdje mogu koristiti, pa je vrijedno razmisliti o vraćanju za više ranije verzije preglednici. Naša galerija će koristiti prijelaze, transformacije i blok sjene, međutim, na vaš zahtjev. Transformacija će biti odgovorna za rotaciju slike, a prijelazi će biti odgovorni za meki i glatki efekt.

Ovdje možete koristiti pseudo selektore.

CSS kod za Crooked Photo

#ex4 (
širina: 800px;
margina: 0 auto;
}

#ex4 img (
margina: 20px;
rub: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
okvir-sjena: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: svih 0,5s laganog izlaska;
-moz-prijelaz: svih 0,5s lakoća;
-o-prijelaz: svih 0,5s lakoća;
}

#ex4 img: lebdite (
-webkit-transform: rotiraj (-7deg);
-moz-transformacija: rotiraj(-7deg);
-o-transformacija: rotacija(-7deg);
}
05. Fade In and Reflect

Demo: Pogledati

Ovaj efekt je malo teže implementirati, pa smo morali malo petljati s njim da postignemo pristojan učinak. Zadana pozicija slike je blago prozirna. Zatim, kada prijeđete iznad slike, razina prozirnosti se snižava i slika se vraća u svoj izvorni izgled, zajedno s blagim sjajem i refleksijom (samo WebKit preglednici).

Nažalost, odraz nije baš prijelaz, pa se pojavljuje odmah iako se ostatak sadržaja pojavljuje usporeno.

Ako ste zbunjeni refleksijskim CSS-om, možete pročitati više o njemu u ovom članku (David Walsh).

Fade In i Reflect CSS kod

#ex5 (
širina: 700px;
margina: 0 auto;
min-visina: 300px;
}

#ex5 img (
margina: 25px;
neprozirnost: 0,8;
rub: 10px puni #eee;

/*Tranzicija*/
-webkit-transition: svih 0,5s jednostavnost;
-moz-prijelaz: svih 0,5s lakoća;
-o-prijelaz: svih 0,5s lakoća;

/*Odraz*/
-webkit-box-reflect: ispod 0px -webkit-gradient(linearno, lijevo gore, lijevo dolje, od(prozirno), boja-stop(.7, prozirno), do(rgba(0,0,0,0.1)) );
}

#ex5 img: lebdite (
neprozirnost: 1;

/*Odraz*/
-webkit-box-reflect: ispod 0px -webkit-gradient(linearno, lijevo gore, lijevo dolje, od(prozirno), boja-stop(.7, prozirno), do(rgba(0,0,0,0.4)) );

/*Sjaj*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
okvir-sjena: 0px 0px 20px rgba(255,255,255,0.8);
}
Zaključak

Ovih 5 primjera trebalo bi biti dovoljno da vas inspiriraju da napravite nešto svoje. Ne zaboravite da uvijek možete eksperimentirati s gotovim primjerima, a zatim nam ispričati o njima.

Ako ste negdje na netu naišli na druge atraktivne efekte, recite nama i drugim čitateljima o tome.

• Prijevod

Snaga CSS3 je ogromna iu ovom ćete vodiču vidjeti kako ga kreativno koristiti. Stvorit ćemo neke efekte prelaska mišem koristeći CSS3 prijelaze. Postavljanje pokazivača iznad minijature prikazat će opis sličica, koristeći različite stilove u svakom primjeru.

Imajte na umu da će ovi primjeri ispravno raditi samo u modernim preglednicima koji podržavaju CSS3 svojstva.

HTML označavanje

Struktura označavanja je vrlo jednostavna i intuitivna. Napravite spremnik koji će sadržavati sliku i sve druge podatke kao što su naslov, opis itd.

Unutar bloka s klasom pogleda umetnut ćemo element s klasom maske, koji će biti odgovoran za naše CSS3 efekte, unutar njega ćemo postaviti naslov, opis i poveznicu na punu sliku. (Za neke primjere, morat ćemo dodati masku kao zasebni element i omotajte opis u div s klasom sadržaja.)

CSS

Nakon izrade oznake, izradit ćemo svoje stilove.

Mi ćemo instalirati Opća pravila za naše stilove, a zatim ćemo dodati posebne klase sa željenim efektima. U ovom ćemo članku izostaviti CSS prefikse za različitim preglednicima, ali ih možete vidjeti u izvorima.
.view ( width: 300px; height: 200px; margin: 10px; float: lijevo; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; kursor: zadano; pozadina: #fff url(../images/bgimg.jpg) središte bez ponavljanja središte ) .view .mask, .view .content ( širina: 300px; visina: 200px; pozicija: apsolutna; preljev: skriven ; gore: 0; lijevo: 0) .view img (prikaz: blok; položaj: relativan) .view h2 (transformacija teksta: velika slova; boja: #fff; poravnanje teksta: središte; položaj: relativan; veličina fonta: 17px; padding: 10px; pozadina: rgba(0, 0, 0, 0.8); margina: 20px 0 0 0) .view p (font-family: Georgia, serif; font-style: italic; font-size: 12px; položaj: relativan; boja: #fff; padding: 10px 20px 20px; text-align: center ) .view a.info ( display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color : #fff; transformacija teksta: velika slova; sjena okvira: 0 0 1px #000 ) .view a.info:hover ( sjena okvira: 0 0 5px #000 )
Sada ćemo pogledati deset učinaka.

Primjer 1

Dodajmo posebnu klasu pogleda prvi elementu s klasom pogleda za ovaj efekt. Dodat ćemo posebnu klasu za svaku instancu elementa pogleda (prvi pogled, drugi pogled, treći pogled itd.).

U prvom primjeru koristit ćemo samo neke osnovne prijelaze za stvaranje lijepog efekta lebdenja:
.view-first img ( prijelaz: svih 0,2 s linearno; ) .view-first .mask ( neprozirnost: 0; boja pozadine: rgba (219,127,8, 0,7); prijelaz: svih 0,4 s lagano ulaženje; ) .view-first h2 (transformacija: translateY(-100px); neprozirnost: 0; prijelaz: sve 0,2s ease-in-out; ) .view-first p ( transformacija: translateY(100px); neprozirnost: 0; prijelaz: sve 0,2 s linearno; ) .view-first a.info (opacity: 0; prijelaz: sve 0,2 s ease-in-out; )
A sada najzanimljiviji dio našeg učinka. Kada pomičemo kursor preko slike, možemo koristiti svojstvo kašnjenja za simulaciju jednostavne animacije. Tranzicijska odgoda koju koristimo pri lebdenju može se promijeniti da se razlikuje od normalne klase. U ovom primjeru nismo koristili nikakvu odgodu u normalnoj klasi, ali smo dodali odgodu lebdenju koja će malo odgoditi učinak prijelaza.
.view-first:hover img ( transform: scale(1.1); ) .view-first:hover .mask (opacity: 1; ) .view-first:hover h2, .view-first:hover p, .view-first :hover a.info ( neprozirnost: 1; transform: translateY(0px); ) .view-first:hover p ( prijelazno kašnjenje: 0,1 s; ) .view-first: lebdeće a.info ( prijelazno kašnjenje: 0,2 s ;)

Primjer 2

U drugom primjeru ćemo dodati posebnu klasu za prikaz, ali ćemo element s klasom maske ostaviti prazan i zamotati opis u div s klasom sadržaja.

Ovdje će klasa maske imati različite atribute, posebno ćemo primijeniti svojstvo transformacije (translate i rotirati). Elementi opisa bit će premješteni tako da ih možemo zajedno premjestiti dok lebdimo:
.view-second img ( prijelaz: svih 0,2 s lagano uvlačenje; ) .view-second .mask ( boja pozadine: rgba(115,146,184, 0.7); širina: 300px; ispuna: 60px; visina: 300px; neprozirnost: 0; transformacija: translate(265px, 145px) rotate(45deg); prijelaz: sve 0,2s lagano-in-out; ) .view-second h2 ( border-bottom: 1px solid rgba(0, 0, 0, 0.3); pozadina: transparent; margina: 20px 40px 0px 40px; transform: translate(200px, -200px); prijelaz: sve 0,2s ease-in-out; ) .view-second p ( transform: translate(-200px, 200px); prijelaz: sve 0,2s ease-in-out; ) .view-second a.info ( transform: translate(0px, 100px); prijelaz: sve 0,2s 0,1s ease-in-out; )
Za naš učinak lebdenja koristimo transformaciju prevođenja da pomaknemo naše elemente na svoje mjesto. maska ​​će se također okretati. Elementi opisa pomicat će se s malim kašnjenjem:
.view-second:hover .mask (opacity:1; transform: translate(-80px, -125px) rotate(45deg); ) .view-second:hover h2 (transform: translate(0px,0px); prijelaz-odgoda: 0,3 s; ) .view-second: hover p ( transform: translate (0px,0px); conversion-delay: 0,4 s; ) .view-second: hover a.info ( transform: translate (0px,0px); conversion- kašnjenje: 0,5s; )

Primjer 3

U trećem primjeru koristit ćemo transformaciju prevođenja i rotiranja:
.view-third img (prijelaz: svih 0,2s ease-in; ) .view-third .mask (background-color: rgba(0,0,0,0.6); neprozirnost: 0; transform: translate(460px, -100px) ) rotirati(180deg); prijelaz: svih 0,2 s 0,4 s lagani ulaz-van; ) .view-third h2( transform: translateY(-100px); prijelaz: svih 0,2 s lagani unutra-van; ) .view-third p ( transform: translateX(300px) rotate(90deg); prijelaz: svih 0,2s ease-in-out; ) .view-third a.info ( transform: translateY(-200px); prijelaz: svih 0,2s ease-in- van;)
Ovaj jednostavne upute, koji će se primijeniti pri lebdenju. Sada ćemo okrenuti opis elementa tako da u skladu s tim postavimo odgodu prijelaza:
.view-third:hover .mask ( neprozirnost:1; prijelazna odgoda: 0 s; transformacija: prijevod (0px, 0px); ) .view-third: lebdeći h2 ( transformacija: translateY(0px); prijelazna odgoda: 0,5 s ; ) .view-third:hover p (transformacija: translateX(0px) rotate(0deg); prijelaz-kašnjenje: 0,4s; ) .view-third:hover a.info ( transformacija: translateY(0px); prijelaz-kašnjenje: 0,3s; )

Primjer 4

U četvrtom primjeru izvršit ćemo jednostavnu redukciju slike i rotaciju našeg sadržaja, a sve zahvaljujući transformaciji mjerila. Postavit ćemo odgodu prijelaza na 0,2 za stilove slike, ali kada zadržimo pokazivač, promijenit ćemo je na 0 s. Ovo će pokrenuti animaciju odmah kada se miš zadrži, ali će je odgoditi kada se kursor odmakne.
.view-fourth img (prijelaz: svih 0,4s lagano-u-out 0,2s; neprozirnost: 1; ) .view-fourth .mask (pozadinska boja: rgba(0,0,0,0.8); neprozirnost: 0; transformacija: scale(0) rotate(-180deg); prijelaz: sve 0.4s ease-in; border-radius: 0px; ) .view-fourth h2( neprozirnost: 0; border-bottom: 1px solid rgba(0, 0, 0, 0,3); pozadina: prozirna; margina: 20px 40px 0px 40px; prijelaz: svih 0,5 s lagani ulazak; ) .view-fourth p ( neprozirnost: 0; prijelaz: svih 0,5 s lagani ulazak; ) .view-fourth a.info ( neprozirnost: 0; prijelaz: svih 0,5 s lagano ulaženje; )
Ovo su upute za postizanje ovog efekta - s CSS3 možete učiniti bilo što :).
.view-fourth:hover .mask ( neprozirnost: 1; transformacija: scale(1) rotate(0deg); prijelazno kašnjenje: 0,2 s; ) .view-fourth:hover img ( transformacija: scale(0); neprozirnost: 0 ; prijelaz-kašnjenje: 0s; ) .view-fourth:hover h2, .view-fourth:hover p, .view-fourth:hover a.info( neprozirnost: 1; prijelaz-kašnjenje: 0,5s; )

Primjer 5

U ovom petom primjeru upotrijebit ćemo svojstvo prevođenja zajedno s funkcijom prijelaza-vremena ease-in-out za premještanje sadržaja na lijevu stranu.
.view-fifth img ( prijelaz: svih 0,3 s lagano ulaženje; ) .view-fifth .mask ( boja pozadine: rgba(146,96,91,0.3); transformacija: translateX(-300px); neprozirnost: 1; prijelaz: sve 0,4s lagano ulaženje; ) .view-fifth h2( pozadina: rgba(255, 255, 255, 0.5); boja: #000; okvir-sjena: 0px 1px 3px rgba(159, 141) , 140, 0,5); ) .view-fifth p( neprozirnost: 0; boja: #333; prijelaz: svih 0,2 s linearno; )
Efekt lebdenja pomaknut će sliku udesno, a opis će se pojaviti s lijeve strane, kao da je pomaknuo sliku:
.view-fifth:hover .mask ( transform: translateX(0px); ) .view-fifth:hover img ( transform: translateX(300px); prijelaz-odgoda: 0,1 s; ) .view-fifth:hover p( neprozirnost: 1; kašnjenje prijelaza: 0,4 s; )

Primjer 6

U ovom primjeru učinit ćemo da se opis pojavi ispred, promijenite veličinu slike na izvorna veličina(ljestvica od 10 do 1). Na dnu će se pojaviti gumb "pročitaj više" (prevedi).
.view-sixth img ( prijelaz: svih 0,4 s lagano-unutrašnje 0,5 s; ) .view-sixth .mask ( boja pozadine: rgba (146,96,91,0,5); neprozirnost: 0; prijelaz: sve 0,3 s ease-in 0.4s; ) .view-sixth h2( opacity:0; border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: scale( 10); prijelaz: svih 0,3 s lagani ulaz-izlaz 0,1 s; ) .view-sixth p ( neprozirnost:0; transformacija: skala (10); prijelaz: svih 0,3 s lagani ulaz-izlazak 0,2 s; ) .view -šesti a.info (opacity:0; transform: translateY(100px); prijelaz: sve 0,3s lagano-u-out 0,1s; )
Povratni prijelaz će biti odgođen tako da izgleda glatko:
.view-sixth:hover .mask ( neprozirnost:1; prijelaz-kašnjenje: 0s; ) .view-sixth:hover img ( prijelaz-kašnjenje: 0s; ) .view-sixth:hover h2 ( neprozirnost: 1; transformacija: skala (1); kašnjenje prijelaza: 0,1 s; ) .view-sixth:hover p ( neprozirnost:1; transformacija: skala (1); kašnjenje prijelaza: 0,2 s; ) .view-sixth:hover a.info ( neprozirnost :1; transformacija: translateY(0px); kašnjenje prijelaza: 0,3 s; )

Primjer 7

U sedmom primjeru ideja je rotirati sliku u središtu i pomaknuti je u daljinu. Zatim će se pojaviti opis, skrivajući rotirajuću sliku iza sebe.
.view-seventh img( prijelaz: svih 0,5s ease-out; neprozirnost: 1; ) .view-seventh .mask ( background-color: rgba(77,44,35,0.5); transform: rotate(0deg) scale( 1); neprozirnost: 0; prijelaz: sve 0,3s ease-out; transformacija: translateY(-200px) rotate(180deg); ) .view-seventh h2( transform: translateY(-200px); prijelaz: sve 0,2s ease- in-out; ) .view-seventh p ( transform: translateY(-200px); prijelaz: sve 0,2s ease-in-out; ) .view-seventh a.info ( transform: translateY(-200px); prijelaz: sve 0,2 s lagano ulaženje; )
Prilikom prelaska mišem dodat ćemo odgodu elementima opisa. To će nam omogućiti da vidimo rotirajuću sliku prije nego što opis sakrije sliku. U obrnutom prijelazu sve će odmah nestati i vidjet ćemo kako se slika rotira u suprotnom smjeru:
.view-seventh:hover img( transform: rotate(720deg) scale(0); neprozirnost: 0; ) .view-seventh:hover .mask ( neprozirnost: 1; transform: translateY(0px) rotate(0deg); prijelaz- odgoda: 0,4 s; ) .view-seventh: hover h2 (transformacija: translateY(0px); prijelazna kašnjenje: 0,7 s; ) .view-seventh: hover p ( transformacija: translateY(0px); prijelazna odgoda: 0,6 s ; ) .view-seventh:hover a.info ( transformacija: translateY(0px); prijelaz-kašnjenje: 0,5 s; )

Primjer 8

U osmom primjeru koristit ćemo animaciju i ponovno stvoriti efekt odbijanja. Opis će se spustiti s dna i odbiti od donjeg ruba.
.view-eighth .mask ( background-color: rgba(255, 255, 255, 0.7); top: -200px; neprozirnost: 0; prijelaz: sve 0.3s ease-out 0.5s; ) .view-eighth h2( transformacija : translateY(-200px); prijelaz: svih 0,2s ease-in-out 0,1s; ) .view-eighth p ( boja: #333; transform: translateY(-200px); prijelaz: svih 0,2s ease-in-out 0,2 s; ) .view-eighth a.info ( transformacija: translateY(-200px); prijelaz: sve 0,2 s lagano ulaženje 0,3 s; )
Dodat ćemo animaciju elementu maske i definirati neke postavke odgode za elemente opisa:
.view-eighth:hover .mask ( neprozirnost: 1; vrh: 0px; prijelaz-kašnjenje: 0s; animacija: bounceY 0,9s linearno; ) .view-eighth:hover h2 ( transformacija: translateY(0px); prijelaz-odgoda: 0,4s; ) .view-eighth:hover p ( transform: translateY(0px); prijelaz-odgoda: 0,2s; ) .view-eighth:hover a.info ( transform: translateY(0px); prijelaz-odgoda: 0s; )
Za rekreaciju stvarnog efekta odbijanja upotrijebit ćemo translateY, kao što vidite postoji nekoliko okvira koji stvaraju ovaj efekt:
@keyframes bounceY ( 0% (transform: translateY(-205px);) 40% (transform: translateY(-100px);) 65% (transform: translateY(-52px);) 82% (transform: translateY(-25px) ;) 92% (transformacija: translateY(-12px);) 55%, 75%, 87%, 97%, 100% (transformacija: translateY(0px);) )

Primjer 9

U ovom primjeru koristit ćemo dva elementa maske da ih pomaknemo iz donjeg desnog i gornjeg lijevog kuta:

Elementi maske imat će različite vrijednosti prijevoda i transfrom-origin. Također ćemo naznačiti da je jedan poravnat s gornjom granicom, a drugi s donjom:
.view-ninth .mask-1,.view-ninth .mask-2( boja-pozadine: rgba(0,0,0,0.5); visina: 361px; širina: 361px; pozadina: rgba(119,0,36 ,0,5); neprozirnost: 1; prijelaz: sve 0,3 s lagano ulaženje 0,6 s; ) .view-ninth .mask-1 ( lijevo: auto; desno: 0px; transformacija: rotacija (56,5 stupnjeva) translateX (-180px ); transform-origin: 100% 0%; ) .view-ninth .mask-2 (top: auto; bottom: 0px; transform: rotate(56.5deg) translateX(180px); transform-origin: 0% 100%; ) .view-ninth .content( background: rgba(0,0,0,0.9); height: 0px; neprozirnost: 0.5; width: 361px; overflow: hidden; transform: rotate(-33.5deg) translate(-112px, 166px); transform-origin: 0% 100%; prijelaz: sve 0,4s lagano-in-out 0,3s; ) .view-inth h2( pozadina: prozirna; margin-top: 5px; border-bottom: 1px solid rgba( 255,255,255,0.2); .view-inth a.info( display: none; )
Kada lebdimo, učinit ćemo da sadržaj izgleda kao ispod dva elementa maske koji se kreću prema središtu:
.view-ninth:hover .content( visina: 120px; širina: 300px; neprozirnost: 0,9; vrh: 40px; transform: rotate(0deg) translate(0px,0px); ) .view-ninth:hover .mask-1, .view-ninth:hover .mask-2( prijelaz-odgoda: 0s; ) .view-ninth:hover .mask-1( transform: rotate(56.5deg) translateX(1px); ) .view-ninth:hover .mask -2 ( transformacija: rotacija (56,5 stupnjeva) translateX (-1px); )
Konfigurirali smo odgodu prijelaza za elemente maske tako da kada lebdimo, prijelaz se događa trenutno, ali kada se miš odmakne, bit će duža odgoda.

Primjer 10

U posljednjem primjeru povećat ćemo sliku, a zatim je sakriti, stavljajući opis ispred. To možemo učiniti korištenjem transformacije ljestvice i prilagođavanjem razine transparentnosti:
.view-tenth img (transformacija: scaleY(1); prijelaz: sve 0,7s ease-in-out; ) .view-tenth .mask ( background-color: rgba(255, 231, 179, 0.3); prijelaz: sve 0,5 s linearno; neprozirnost: 0; ) .view-tenth h2( border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: scale(0); boja: #333; prijelaz: svih 0,5s linearno; neprozirnost: 0; ) .view-thp (boja: #333; neprozirnost: 0; transformacija: skala(0); prijelaz: svih 0,5s linearno; ) .view- deseti a.info ( neprozirnost: 0; transformacija: skala (0); prijelaz: svih 0,5 s linearno; )
Kada lebdimo, jednostavno skaliramo sliku, ali zašto bi je skrivali smanjivanjem njene prozirnosti na 0:
.view-tenth:hover img ( transform: scale(10); neprozirnost: 0; ) .view-tenth:hover .mask (opacity: 1; ) .view-tenth:hover h2, .view-tenth:hover p, .view-tenth:hover a.info( transform: scale(1); neprozirnost: 1; )

Zaključak

CSS3 ima stvarno veliki potencijal za stvaranje prekrasnih efekata. Uskoro ćemo, nadamo se, moći izbjeći korištenje JavaScripta za stvaranje jednostavnih efekata i 100% oslanjati se na CSS, u svim preglednicima.

Nadam se da ste uživali u ovim eksperimentima, ali najviše od svega nadam se da vas mogu inspirirati da stvorite vlastite efekte.

p.s. Ovaj članak je logičan nastavak članka iz Mary Lou

Oznake: Dodajte oznake

Prije svega, za one koji još nisu potpuno u temi ili uopće nisu u temi, ukratko ću objasniti što je hover-. To su različite vrste efekata (skočni natpisi, opisi alata, glatki prijelazi, transformacija, rotacija, povećanje, pomicanje itd. itd.) koji se primjenjuju na elemente web stranice na njima pomoću pokazivača miša. Oni se mogu implementirati pomoću raznih jQuery dodataka ili u čistom .
Danas sam pripremio veliki izbor originalnih efekata lebdenja za slike stvorene pomoću CSS3, bez povezivanja javascript biblioteka. Neću govoriti o prednostima i nedostacima implementacije efekata lebdenja u čistom CSS3, to je druga tema, samo pogledajte primjere i, ako je potrebno, koristite onaj koji vam se sviđa na vašoj web stranici. Svi učinci prikazani u pregledu opremljeni su demo primjerom i detaljnom dokumentacijom s izvornim kodovima. Priručnici su većinom na građanskom jeziku, ali sve je više-manje intuitivno.

Želio bih vam odmah skrenuti pozornost na činjenicu da će svi ovi primjeri ispravno raditi samo u modernim preglednicima koji podržavaju CSS3 svojstva.

Kako ne bih pokvario cjelokupnu sliku, nisam iskrivio nazive efekata strojnim prijevodom (osim nekih), ostavio sam izvorne naslove onako kako ih je programer nazvao.

Vrlo zanimljiv učinak kada lebdite iznad sličica, koristeći fine linije u dizajnu i tipografiji. Nekoliko različitih vrsta efekata za izgled naslova slika, meke i nenametljive 3D transformacije i glatke prijelaze pseudoelemenata. Radi samo u modernim preglednicima.

iHover je impresivna kolekcija čistih CSS3 efekata lebdenja, s podrškom za Bootstrap 3. Izgrađen na Scss CSS (datoteci), lako se mijenja pomoću varijabli. Kod je modularan, nema potrebe za uključivanjem cijele datoteke. 30+ različitih efekata u jednom paketu. Sve je prilično dobro dokumentirano i efekti su vrlo jednostavni za korištenje. Sve što trebate učiniti je ispravno izraditi HTML oznake i uključiti CSS datoteku u svoj rad.

Stvara neke jednostavne, ali elegantne efekte lebdenja za opise slika. Ideja je lebdjeti iznad minijatura kako bi iskočili naslov, ime autora i gumbi za kontakt. Za neke efekte koriste se 3D vizualne transformacije.

Vrlo jednostavan efekt prijelaza, bez ikakvih posebnosti, potpuno okrugla slika u okviru, transformira se promjenom fokusa pri lebdenju i to je to.

za CSS3 sličice

Programer pozicionira svoj rad kao primjer galerije slika s efektima prijelaza kada se komentari (naslovi) pojavljuju na sličicama. Izražena uvjerena podrška moderni preglednici, uključujući IE 9+. Naravno, teško je to nazvati punopravnom galerijom, ali učinak izgleda potpisa prilično je zanimljiv.

Sljedeći set CSS pravila, kako biste stvorili impresivne efekte transformacije kada lebdite iznad savršeno okruglih sličica. Paket sadrži 7 vrsta CSS3 prijelaza, vrlo detaljnu dokumentaciju o konfiguraciji i korištenju. Efekte podržavaju svi moderni preglednici.

Rotirajte sličice dok lebdite

Jednostavan efekt rotiranja okruglih sličica kada prijeđete kursorom miša preko njih, otprilike isti možete vidjeti na mom blogu, u najavama postova na glavnoj stranici. Implementirano s nekoliko redaka css koda.

Prevedeno doslovno: "Seksualni učinak kada lebdi iznad ". Naravno, u ovom efektu teško da ćete primijetiti nešto tako seksi, osim ako nemate bujnu maštu, ali efekt je zanimljiv na svoj način i vrijedan je pažnje.

Pet različitih efekata za slike kada prijeđete iznad njih. Pop-up potpisi u tri varijante, zavjese u obliku promjene stupnja prozirnosti i rotacije s horizontalnim kretanjem.

4 Vrste animacijskih efekata za opise slika, implementirane isključivo pomoću CSS3. Različiti položaji prilikom pojavljivanja i efekti prijelaza, prilično standardan dizajn. Da biste razumjeli kako animacija funkcionira, pogledajte izvor Nisam pronašao nikakve demo stranice ili zasebnu dokumentaciju.

Minijaturne galerije raspoređene u mrežu s različitim efektima za izgled potpisa, rotaciju, razvijanje, iskakanje itd. Dokumentacija o korištenju i konfiguraciji je prilično oskudna, ali ako stvarno želite, možete to shvatiti.

Ovaj efekt nije ništa posebno, banalna promjena svjetline slika pri lebdenju, osim što su dodani elementi animacije. Morat ćete sami otkriti detalje implementacije postavljanjem izvornog koda demonstracije.

Još jedan set od 10 efekata lebdenja za slike, razne izmjene sličica pri lebdenju, uvećanje, rotacija, rotacija, zatamnjivanje itd.

Razni efekti okvirne animacije oko slika izgledaju prilično atraktivno, postoji detaljan priručnik za postavljanje i korištenje.

Izvorni CSS3 efekti lebdenja koji se koriste za efektivan izgled naslova sličica slike kada se lebdi. Skup CSS pravila uključuje 10 različitih efekata koje možete koristiti zasebno za različite slike. Efekti su doista impresivni, pogotovo ako se uzme u obzir da je sve napravljeno pomoću CSS3. Detaljan vodič, pomoći će vam da shvatite što je što.

Ideja je stvoriti SVG koji je oblik pozadine za neki tekst i pretvara se u drugi oblik kada prijeđete mišem. Na ovaj način možete napraviti mnoge različite opcije, u primjeru su prikazane tri vrste prijelaznih učinaka. Prednost korištenja SVG-a je u tome što možemo promijeniti veličinu obrasca kako bi odgovarao veličini nadređenog spremnika.

Klizne slike

Bit ovog efekta je da se slika pomiče gore-dolje kako bi se pojavio natpis. Ako radite s parametrima stila, mislim da možete postići neke prilično lijepe efekte, ali prema zadanim postavkama sve izgleda vrlo jednostavno.

S ovim efektom sve je jednostavno, natpisi za slike klize gore desno ili dolje lijevo, u obliku vrpce s prozirnim tamna pozadina, sve je vrlo jednostavno preformatirano pomoću svojstava css-a.

Zanimljivo rješenje: sličice su prikazane u zatamnjenom obliku; kada prijeđete pokazivačem iznad njih, slike se pojavljuju, a potpis iskače na svijetloj pozadini.

Natpis za sliku pojavljuje se iz kuta i širi se dijagonalno preko cijelog područja slike.

Još neka zanimljiva rješenja za implementaciju skočnih naslova za sličice slika. U mrežnom uređivaču možete eksperimentirati s parametrima i postići impresivnije rezultate.

Skup prekrasnih efekata kada lebdite iznad minijatura, razne vrste izgleda i dizajna naslova za slike. Tanke linije u kontrastu s blago zatamnjenom pozadinom stvaraju lako čitljive informacijske blokove.

Bizarni oblici i efekt povećanja u kombinaciji s animiranim efektom izgleda naslova za sličice slika.

Primjer stvaranja vizualnog efekta slajda za prikaz 3D naslova za slike koristeći samo CSS3 i HTML5.

6 Opisi za slike

6 Mogućnosti za pojavljivanje naslova skočnih slika pri lebdenju pomoću CSS3. Detaljna lekcija o implementaciji i konfiguraciji, izvori dostupni za preuzimanje.

I konačno, na kraju, ne mogu ne spomenuti najjednostavniji način za stvaranje skočnog naslova za sličicu pomoću CSS3.

Govorio sam o ovoj metodi u jednoj od svojih prethodnih lekcija:.

Želite što prije početi raditi na izradi web stranice? Sada je to apsolutno moguće! Iz jednostavnog razloga što se TemplateMonster pojavio na tržištu novi odjeljak sa . Kolekcija će se nadopunjavati, ali već sada možete potražiti nešto prikladno za svoj online projekt. Sve što trebate učiniti je odabrati svoj ideal gotovo rješenje te raditi s prezentacijom potrebnih informacija. I ne zaboravite da je tekst za predložak napisan rukom.

Sa svim poštovanjem, Andrew

Post sadrži izbor različitih CSS efekata i animacija koje vam mogu biti od koristi u radu, a također će eliminirati potrebu za stalnim korištenjem JavaScripta. Primjeri možda nisu najnoviji ili najneobičniji, ali su po mom mišljenju korisni.

1. CSS3 sat s jQueryjem

Ovaj sat je kreiran pomoću jednog od glavnih CSS3 alata - rotacija i povezivanje JQuery biblioteke.

2. CSS analogni sat

Klasičniji, analogni satovi. Izrađuju se korištenjem webkit prijelaza i CSS svojstva transformacije. Ali da bi vrijeme odgovaralo trenutnom, potreban vam je JavaScript.

3. Rotirajuća 3D kocka

Rotacija i kretanje duž stranica kocke vršit će se pomoću standardnih tipki "gore", "dolje", "lijevo" i "desno". Sama 3D figura izgrađena je pomoću webkit-perspective, -webkit-transform i -webkit-transition.

4. Nekoliko 3D kocki na uvlačenje

Ovdje je već predstavljeno nekoliko 3D kocki koje izravno koriste CSS3 i svojstva transformacije i prijelaza. Lebdenje pokazivača iznad kocke uzrokuje njeno pomicanje u stranu, otkrivajući tekst koji se nalazi na drugoj strani oblika.

5. Harmonika meni

Efekt izbornika harmonike temelji se na čistom CSS-u, gdje se klikom na svaki redak otvara dodatni prozor u tijelu samog popisa. Prilagođena animacija u preglednicima uključena WebKit baza.

6. Paralaksno pomicanje s CSS-om

Ovo je animirano automatsko pomicanje paralakse s koristeći CSS Prijelazi temeljeni na WebKitu. Kada zadržite pokazivač miša iznad tekstualnog prozora, zvijezde u pozadini počinju se glatko pomicati u stranu. Stvara se učinak leta.

7. Matrica

Kultni film “Matrix” jedan je od najboljih filmova znanstvene fantastike. Primjer pokazuje kako ponovno stvoriti približno istu nevjerojatnu animaciju (crni ekran s tekućim brojevima) u CSS3.

8. Dinamički palaroidi

U ovom primjeru se provodi Detaljan opis stvarati animirane fotografije na temelju CSS3 naredbi. Kada kliknete na sliku, ona se povećava i pomiče u prvi plan.

9. Skaliranje slike

U ovom primjeru, slike se jednostavno povećavaju kada lebdite. Jednostavan, ali ponekad vrlo koristan učinak.

10. Učinci JavaScripta na CSS3

Kao alternativu JavaScriptu, post predlaže sedam CSS3 efekata: razne blokove koji se rotiraju, nestaju, iseljavaju, rastu, itd.

11. DJ Hero virtualne ploče

Ovaj post objašnjava kako stvoriti rotirajuće ploče. Brzina rotacije može se podesiti izravno na zaslonu.

12. Klizni vinil

Efekt klizanja vinilne ploče stvara se korištenjem CSS3 i HTML prijelaza. Takva animacija oživljava web stranicu, dodaje originalnost standardnoj naslovnici albuma itd.

13. Efekti kada lebdite iznad slike

Kada kursorom prijeđete iznad slike, ona se može pomaknuti u stranu, okrenuti se, smanjiti, transformirati iz četvrtaste u okruglu, postati mutna... Jednom riječju, slike će promijeniti svoja svojstva na sve moguće načine.

14. Rotirajući trokut

Kada kliknete na trokut, on se počinje okretati.

15. Prostor

Cijeli kozmički prostor upakiran u CSS. Ovo je primjer rotirajućih slojeva (primjetnije kada smanjite prikaz u pregledniku).

16. “Las Meninas” u 3D

Zanimljiv CSS efekt koji čini slavnu sliku Diega Velazqueza "Las Meninas" trodimenzionalnom.

17. CSS za Mac OS X

Na dnu zaslona nalazi se skup glavnih Mac OS X ikona koje se povećavaju kada se prijeđe pokazivačem. Učinak dodaje dinamiku mjestu.

18. Ulazni modali

CSS3 efekti i svojstva Drop-In Modals pomoći će vam da stvorite brze, animirane i jednostavne promjene modalni prozori.

19. Animiranje objekata

Transformacijske promjene izgled element u pregledniku. Prikazano na primjeru rakete koja "leti" s jednog kraja ekrana na drugi. Mogu se koristiti alati za pomicanje, rotiranje itd.

20. Sat u boji

Color Clock se temelji na jQuery i CSS3. Sličan učinak dobro će doći u kontekstu čekanja završetka nekog natječaja, glasovanja i slično.

21. Lightbox galerija s jQuery i CSS3

Ovo je prekrasna galerija koja vam omogućuje sortiranje i raspored slika nasumičnim redoslijedom. Za interaktivnost, galerija koristi JQuery, JQuery UI i JQuery dodatak FancyBox. Lightbox podržava naslov i opis slika, grupira ih i automatski slaže slajdove u nizu.

22. “Elastični” pregledi

Povećaj preglede slika dok lebdite. Dakle, kada kliknete, izbornik se proporcionalno povećava.

23. Dinamičke kartice

Ovaj primjer predstavlja dinamički skup kartice koje koriste HTML i CSS3 funkcije.

24. JQuery klizni izbornik

Primjer kliznog izbornika kreiran je kombinacijom CSS3 i JQueryja. Kada prijeđete pokazivačem iznad slike, pojavljuje se skočni prozor s tekstom.

25. CSS kartice

U primjeru, prelazak miša preko zaglavlja kartica uzrokuje promjenu popisa u nastavku.

26. Fisheye izbornik

Primjer pokazuje kako stvoriti izbornik Riblje oko pomoću CSS i SVG animacije. Kao dodatni bonus korišten demo SVG u IMG oznaci.

27. Padajući izbornik

Ova vrsta pruža vrlo praktičnu navigaciju kroz glavni izbornik, zahvaljujući korištenju CSS3 prijelaza.

28. Odjave Ratova zvijezda

Poznati špici iz Ratova zvijezda. HTML i CSS bit će dovoljni za njihovo pokretanje.

29. Više efekata ribljeg oka na CSS

Opet, ikone koje se povećavaju kada se prijeđe pokazivačem.

30. Animacija kadar po kadar

Moguće je nekoliko opcija demonstracije.
U prvom primjeru, da biste osigurali promjenu okvira, morate kliknuti na sliku. Svaki klik je jedan pokret. Okviri se ponavljaju, stvarajući određenu petlju.
U drugom primjeru, za promjenu okvira, samo pomaknite kursor preko slike. Sukladno tome, brzina animacije ovisit će o brzini kretanja miša.

31. Imperial AT-AT Walker

Još jednom Ratovi zvijezda - ovaj pokretni AT-AT hodač napravljen je pomoću CSS3.

32. Još jedna harmonika CSS

Kada kliknete na red, tablica se širi.

33. Jednostavan klizni izbornik

40. Padajući izbornik
Još jedna opcija za jednostavan i lijep padajući izbornik pomoću CSS-a.

U ovoj lekciji nastavljamo raditi s CSS-om, implementirat ćemo prekrasan efekt kada lebdite iznad slike gdje se glatko okreće i tamni, a potez i naslovi teksta pojavljuju se u pozadini.

CSS efekt opisuje okvir blokova za transformaciju

Preuzmite pripremljeni predložak, sadrži dvije datoteke, Indeks u kojem je CSS. Ponovno smo postavili uvlaku u CSS-u, postavili font i povezali ga s pozadina slika. U samoj mapi /img nalaze se dvije datoteke, pozadina i primjer slike.

Opisujemo sve blokove koje je potrebno prikazati na stranici i ispunjavamo ih tekstualnim sadržajem.

Div.dws>div.blocImg>img+div.blocText>div.text>h2+p

CSS učinak pri lebdenju

tranzicija
transformacija mjerila (x,y)
:lebdi::prije::poslije

Opisujemo glavne stilove/efekte slika koristeći CSS

Blok sa slikom postavimo na fiksnu širinu i visinu, a koristeći overflow: hidden sakrijemo sve nepotrebno izvan njega i dodamo kursor.

BlocImg (širina: 600 px; visina: 338 px; preljev: skriven; kursor: pokazivač; )

Radi praktičnosti, blok postavljamo u sredinu ekrana.

Dws ( pozicija: apsolutna; gore: 50%; lijevo: 50%; transformacija: prevedi (-50%, -50%); )

Zatim napravimo sliku 100% širokom i dodamo glatku animaciju u pola sekunde.

BlocImg img (širina: 100%; prijelaz: 0,5 s; )

Postavite filtar zamućenja na 1 vrh. filter: blur(1px) i potamniti pozadinu, a za to dodamo crnu pozadinu u klasu .blocImg, a kada lebdimo iznad nje, samu sliku učinimo poluprozirnom neprozirnošću: .5; .

Dws:hover .blocImg img (transformacija: rotacija(-10deg) skala(1.3); filter: zamućenje(1px); neprozirnost: .5; )

Sada počnimo stilizirati tekst.

Oblikovanje tekstualnog sadržaja bloka

Apsolutno postavite blok s tekstom .blocText kao nadređenog i postavite ispunu duž svih rubova na 30 piksela. U budućnosti ćemo napraviti animirani izgled okvira.

BlocText (kontura: 1px puna narančasta; pozicija: apsolutna; vrh: 30px; lijevo: 30px; desno: 30px; dno: 30px; )

Za tekst postavite boju na bijelu, učinite velikim slovima, postavite podstavu oko rubova.

Tekst (boja: #fff; transformacija teksta: velika slova; ispuna: 0 20px; )

Postavili smo kurs druge razine na 25 vrhova.

Tekst h2 (veličina fonta: 25px; )

Drugi dio učinimo narančastim, postavimo udubljenja na dnu za liniju i napravimo podcrtavanje 2 vrha.

Tekst h2 span (boja: narančasta; padding-bottom: 3px; border-bottom: 2px solid #fff; )

Odlomak postavljamo apsolutno, spuštamo ga za 180 piksela. postavite širinu bloka na 250 slika. Dodajte s lijeve strane bočna granica u 16 sati i postavite unutarnje obloge.

Tekst p (položaj: apsolutni; vrh: 180 px; širina: 250 px; rub-lijevo: 4 px puni #ffb611; ispuna: 0 10 px; )

Opisujemo pseudoelemente::prije i::poslije

Uklonimo obris koji je prethodno bio dodijeljen klasi .blocText i postavimo ga za pseudoelemente.

Stvaramo ::prije ::poslije pseudoelemente i opisujemo njihove glavne stilove.

Pozicioniramo ih apsolutno, postavimo širinu i visinu na 100% i plaćeni izgled u pola sekunde.

BlocText::before, .blocText::after ( sadržaj: ""; pozicija: apsolutna; vrh: 0; lijevo: 0; širina: 100%; visina: 100%; )

Zasebno ::prije dodijelimo granicu na vrhu i dnu 1 vrha. i postavite transformaciju za transformaciju X osi: scale(0,1) .

BlocText::before ( border-top: 1px solid #fff; border-bottom: 1px solid #fff; transform: scale(0,1); )

Činimo isto za :: nakon što je granica sada na lijevoj i desnoj strani, a transformacija je duž Y osi

BlocText::after ( border-left: 1px solid #fff; border-desno: 1px solid #fff; transform: scale(1,0); )

A za njihov izgled, označavamo transformaciju za sve osi na 1.

Dws:hover .blocText::before, .dws:hover .blocText::after ( transform: scale(1,1); )

I sve što preostaje je sakriti tekst; za to ćemo dodijeliti neprozirnost: 0 klasi .text i dodati njen glatki izgled.

I dok lebdimo prikazujemo tekst.

Dws:hover .text ( neprozirnost: 1; )

Na kraju smo dobili cool efekte lebdenja kada lebdimo iznad slike.

Ako vas je video zainteresirao, podijelite ga sa svojim prijateljima na u društvenim mrežama, i ne zaboravite komentirati.

Lekciju je pripremio Denis Gorelov.