CSS efekt kada lebdite iznad slike. Stvaramo originalne efekte lebdenja uz pomoć CSS3 Učinak različitih pozadina u html-u

| 18.02.2016

CSS3 otvara neograničene mogućnosti dizajnerima korisničkog sučelja, a glavna prednost je što se praktički svaka ideja može lako implementirati i provesti u stvarnom životu, bez potrebe za korištenjem JavaScripta.

Nevjerojatno je kako jednostavne riječi mogu oživjeti početnu stranicu i učiniti je dostupnom za korištenje korisnicima. Idite na CSS3 da saznate kako možete dopustiti elementu da se transformira i promijeni njegov stil, na primjer, kada lebdite iznad pokazivača. Devet aplikacija za CSS3 animaciju, koje su dostupne u nastavku, pomoći će stvoriti ozračje otkačenosti na web mjestu, kao i poboljšati funky izgled web mjesta s prekrasnim glatkim prijelazima.

Za detaljnije informacije možete preuzeti arhive datoteka.

Svi efekti rade uz pomoć prijelaza snage. tranzicija- “Transition”, “re-creation”) i pseudoklasa: hover, koja označava stil elementa kada se mišem postavi iznad novog kursora (u našem pomoćniku). Za naše aplikacije koristili smo div blok dimenzija 500x309 piksela, izlazna boja pozadine bila je #6d6d6d, a prijelaz s jedne faze na drugu trajao je 0,3 sekunde.

Body > div ( width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease; conversion : sve 0,3s lako; )

1. Promijenite boju lebdeći kursorom

Ako bi implementacija takvog efekta zahtijevala puno rada s matematičkim izračunima pjesme RGB vrijednosti. Sada trebate napisati CSS stil u kojem trebate dodati pseudo-class:hover selektoru i postaviti boju pozadine koja će glatko (u 0,3 sekunde) zamijeniti izlaznu boju pozadinom kada kursorom prijeđete iznad blok:

Boja: lebdite (pozadina:#53ea93;)

2. Izgled okvira

Najočitija transformacija je unutarnji okvir koji se glatko pojavljuje kada mišem prijeđete iznad njega. Dobro za udobnije različite gumbe. Da biste postigli ovaj učinak, upotrijebite sljedeću pseudo-klasu: hover i moć box-shadow s umetnutim parametrom (postavlja sjenu sredine elementa). Osim toga, trebate postaviti sjenčanje (u našoj sjeni 23px) na istu boju:

Obrub: lebdjeti ( okvir-sjena: umetnuti 0 0 0 23px #53ea93; )

3. Zamah

CSS animacija je dana - kriva, jer se ovdje ne koristi moć prijelaza. Umjesto ovoga dirnulo nas je:

@keyframes - osnovna direktiva za stvaranje CSS animacije okvir po okvir, koja vam omogućuje da radite tako dalje. izradu scenarija i opisivanje animacije s popisom ključnih točaka;
animacija i broj iteracija animacije - moć postavljanja parametara animacije (slatkoća i fluidnost) i broja ciklusa (ponavljanja). Povremeno ponovite 1.

@-webkit-keyframes swing ( 15% ( -webkit-transform: translateX(9px); transform: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transform: translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); transform: translateX(-6px); ) 65% ( -webkit -transform: translateX(3px); transform: translateX(3px); ) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transform : translateX(6px); ) 50% ( -webkit- transform: translateX(-6px); transform: translateX(-6px); ) 65% ( -webkit-transform: translateX(3px); transform: translateX(3px); ) 100% ( -webkit-transform: translateX(0) ; transform: translateX(0); ) ) .swing:hover ( -webkit-animation: swing 0.6s ease; animacija: swing 0.6s ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1 ; )

4. Zgasannya

Učinak glatke ekstinkcije je, u biti, normalna promjena u jasnoći elementa. Animacija se izrađuje u dvije faze: potrebno je postaviti klip razine vidljivosti 1 - tada neće biti vidljivosti, nakon čega unesite ove vrijednosti kada lebdite mišem - 0,6:

Fade (prozirnost: 1;) .fade:hover (prozirnost: 0,6;)

Za najbolji rezultat promijenite vrijednosti na mjestima:

5. Zbilšenja

Kako bi blok bio veći kada kursor lebdi, brzo koristimo transformaciju i postavljamo vrijednost na scale(1.2) . U ovom slučaju, blok će se povećati za 20 stotina spremanjem svojih proporcija:

Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )

6. Promjena

Promjena elementa jednostavna je kao i povećanje. Budući da smo u petom odlomku, za povećanje ljestvice, trebali unijeti vrijednost veću od 1, tada za promjenu bloka jednostavno unesemo vrijednost manju od 1, na primjer, ljestvica (0,7). Sada, kada prijeđete mišem, blok će se proporcionalno promijeniti za 30 stotinki svoje veličine:

Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )

7. Preobrazba u kolor

Jedna od najpopularnijih animacija je pravocrtni element koji se, kada se iznad njega zadrži kursor, pretvara u krug. Za dodatnu snagu CSS border-radiusa, vikorista u paru s: lebdenjem i prijelazom, ovo se može implementirati bez problema:

Krug: lebdi ( radijus granice: 70%; )

8. Obertannya

Praktična verzija animacije je rotiranje elementa za nekoliko stupnjeva. U tu svrhu opet nam je potrebna moć transformacije, a također i s drugim vrijednostima - rotateZ(20deg). S ovim parametrima, blok će se rotirati 20 stupnjeva iza strelice godine duž Z osi:

Rotate:hover ( -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )

9. 3D sjena

Ideje dizajnera razlikuju se o točnom učinku flat dizajna. Ni manje ni više, ova CSS3 animacija je vrlo originalna i također je popularna na web stranicama. Postignite trivijalni učinak koristeći već poznate moći box-shadowa (za stvaranje bogate sjene) i transformirajte s parametrom translateX(-7px) (kako biste osigurali da se blok vodoravno pomakne ulijevo za 7 piksela):

Threed:hover (box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px - 6px transformacija: translateX( -7px); transformacija: translateX(- 7px);

Podrška za preglednik

Od danas prijenos snage podržavaju sljedeći preglednici:

Preglednici stolnih računala
Internet Explorer	Podržava IE 10 i noviji
Krom	Podržano s verzijom 26 (do verzije 25 podržano je s prefiksom -webkit-)
Firefox	Podržano s verzijom 16 (verzije 4-15 koriste prefiks -moz-)
Opera	Podržano s verzijom 12.1
Safari	Podržano s verzijom 6.1 (verzije 3.1-6 koriste prefiks -webkit-)

Ostale značajke i varijacije u ovim aplikacijama, kao što su transformacija, box-shadow, itd., također su podržane od strane većine trenutnih preglednika. Međutim, ako namjeravate koristiti ove ideje za svoje projekte, toplo preporučamo da ponovno provjerite svoju funkcionalnost više preglednika.

Sigurni smo da će vam ove CSS3 aplikacije za animaciju biti od pomoći. Želimo vam kreativni uspjeh!

Efekti lebdenja – završite temu za učenje. Čak i njihova implementacija može vašu stranicu učiniti dinamičnijom i življom. Danas ćemo pogledati neke efekte za rad sa slikama. Isto se odnosi i na HTML i CSS kodove koje možete naučiti iz igre.

Zbilshennya

Za početak, važno je da ako korisnik zadrži kursor iznad slike, fotografija bi postala veća, ali bi se i dalje gubila unutar svojih kordona.

Os HTML-kodirati:

"http://lorempixel.com/400/400/people/9" alt="portret" > !}!}

Imajte na umu da je slika, poput ove na slici, dimenzija 400 x 400 piksela. Sada se čudimo CSS.

/*GROW*/ .grow img (visina: 300px; širina: 300px; -webkit-transition: sve 1s lakoća; -moz-transition: sve 1s lakoća; -o-transition: sve 1s lakoća; -ms-transition: 1s lakoća; prijelaz: sve 1s lakoća;) .grow img:hover (širina: 400px; visina: 400px;)

Veličinu slike zoološkog vrta početno smo postavili na 300px, a zatim, kada korisnik prijeđe pokazivačem iznad nje, ona se povećava na 400px. Imamo preljev – skriven, što nam omogućuje uklanjanje efekta skaliranja.

Stisnennya

U prošlosti smo se čudili tome kako slike postaju veće kada se kursor postavi iznad miša. Pogledajmo učinak okretanja. Ova metoda je u osnovi ista, samo što ćete ovaj put uzeti u obzir dimenzije od 400 piksela i, kada lebdite kursorom, promijeniti ih na 300 piksela.

"http://lorempixel.com/400/400/nightlife/4" alt="grad" > !}!}

/*SHRINK*/ .shrink img (visina: 400px; širina: 400px; -webkit-transition: sve 1s lakoća; -moz-transition: sve 1s lakoća; -o-transition: sve 1s lakoća; -all-trans 1s lakoća ; prijelaz: sve 1s lakoća; ) .shrink img:hover ( width : 300px ; height : 300px ; )

Bočna panorama

U trenutnom efektu veličina slike se ne mijenja, ali kada se klikne, fotografija se pomiče. Ovo je dobar način za povećanje čvrstoće objekta.

"http://lorempixel.com/600/300/sports/8" alt="udarac" > !}!}

Ovdje koristimo vikorist sliku širine 600px i visine manje od 300px - mijenjamo vodoravni položaj fotografije i ne moramo zamrzavati efekte na visinu.

/*SIDEPAN*/ .sidepan img ( margin-left : 0px ; -webkit-transition: margina 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease prijelaz: margina 1 s lakoća; ) .sidepan img:hover ( margin-left : -200px ; )

Da bismo stvorili efekt pomicanja, ne mijenjamo veličinu slike, kao prošli put, već ćemo umjesto toga, koristeći istu marginu, postaviti sliku lijevo. Ako želite da se slika pomiče udesno, odaberite margin-desno.

Vertikalna panorama

Kako bismo prenijeli učinak na roc, ponovimo ovaj efekt još jednom - ovo je također prikladno za stvaranje okomitog pomicanja.

"http://lorempixel.com/300/600/sports/5" alt = "uspon" > !}!}

/*VERTPAN*/ .vertpan img ( margin-top : 0px ; -webkit-transition: margina 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; conversion: margin 1s ease; ) . vertpan img:hover ( margin-top : -200px ; )

Kod je praktički isti kao prošli put, samo što sada margin-left mijenjamo s margin-top.

Transformacija

Neposredni učinci su dinamični.

Nakhil

Učinimo to sada tako da kada prijeđete iznad slika, vidjet ćete rez.

"http://lorempixel.com/300/300/transport/5" alt="auto" > !}!}

/*TILT*/ .tilt ( -webkit-transition: svih 0,5s lakoća; -moz-transition: svih 0,5s lakoća; -o-transition: svih 0,5s lakoća; -ms-transition: svih 0,5s ese; prijelaz: sve 0 ,5s lakoća; ) .tilt :hover ( -webkit-transform: rotate(-10deg) ; -moz-transform: rotate(-10deg) ; -o-transform: rotate(-10deg) ; - ms-transformacija: zakretanje (-10 stupnjeva) ; transformacija: zakretanje (-10 stupnjeva) ; )

Kao što vidite, sve što trebamo je rotirati sliku za deset stupnjeva. Jednostavno je tako učinkovit!

Zaokruživanje rezova

Kad pokažete na sliku, ona se počinje okretati, pretvarajući se iz kolca u kvadrat.

"http://lorempixel.com/300/300/nature/5" alt="plaža" > !}!}

/*MORPH*/ .morph ( -webkit-transition: svih 0 .5s lakoća; -moz-transition: svih 0 .5s lakoća; -o-transition: svih 0 .5s lakoća; -ms-transition: svih 0 .5s lakoća; prijelaz: svih 0 .5s lakoća; ) .morf :lebdjenje ( radijus granice: 50 % ; -webkit-transformacija: rotacija(360deg); -Moz-transformacija: rotacija(360deg) ; -o-transformacija: rotacija (360 stupnjeva); -ms-transformacija: rotacija (360 stupnjeva); transformacija: rotacija (360 stupnjeva) ; )

Ovdje je umetnuta klasa morph, koja se počinje okretati za 360 stupnjeva kada se pokazivač miša postavi iznad nje, a granični radijus se inkrementalno mijenja na 50%, a zatim se pretvara u krug.

Usredotočenost

Drugi način je korištenje graničnog radijusa za zaokruživanje slike. Ovaj put, međutim, nećemo povećati samo radijus granice, već i drugu stvar. Korištenje rubnog okvira stvorit će efekt koji se fokusira na određeni dio slike.

"http://lorempixel.com/300/300/sports/1" alt="kriket" > !}!}

/*FOCUS*/ .focus ( -webkit-transition: sve 1s lakoća; -moz-transition: sve 1s lakoća; -o-transition: sve 1s lakoća; -ms-transition: sve 1s lakoća; prijelaz: sve 1s lakoća; ) .focus :hover ( border : 70px solid # 000 ; radijus granice: 50 % ; }

Uzeli smo obrub od 10 px i promijenili crni obrub za 70 px i povećali radijus na 50%, što smo učinili na prednjem kraju.

Webkit filter

Kako bi se osigurala maksimalna funkcionalnost preglednika, takve aplikacije neće koristiti WebKit prefiks. Ovi podaci više nisu dostupni u Safariju i Chromeu. Bez obzira na ograničenja, Webkit filtri vam omogućuju promjenu radnji kako biste postigli nevjerojatne učinke! Demo

Rosmittya

Prvi učinak, koji zastosovuvatimemo, je jednostavno rosmitya. Sada možete doći do sljedećeg malog reda kodova.

Prije svega, za one koji još nisu sasvim u temi, ili uopće nisu u temi, ukratko ću objasniti što je hover. Različite vrste efekata (naslovi, opisi alata, glatki prijelazi, transformacija, rotacija, poboljšanje, pomicanje itd.) mogu se primijeniti na elemente web stranice s kursorom miša na njima. Oni se mogu implementirati uz pomoć raznih jQuery dodataka ili u čistom obliku.
Danas sam pripremao veliku kolekciju originalnih efekata lebdenja za slike, kreiranih pomoću CSS3, bez povezivanja javascript biblioteka. Neću govoriti o prednostima i nedostacima implementacije efekata lebdenja na čistom CSS3, ovo je druga tema, samo se divite primjerima, i ako je potrebno, iskoristite sličnosti na svojoj stranici. Svi efekti su prikazani na prvi pogled s pokaznom kundakom i dokumentacijom izvješća s izlaznim uređajima. Priručnici su više-manje buržujski, ali sve se više-manje intuitivno razumije.

Želio bih izraziti vaše poštovanje prema činjenici da sve ove aplikacije rade ispravno samo u trenutačnim preglednicima koji podržavaju snagu CSS3.

Kako se ne bi pokvarila skrivena slika, a da se ne iskrivi strojnim prijevodom naziva efekata (za sve namjene i svrhe), lišavajući izvornike naslova kako ih je izdavač nazvao.

Vrlo zamjetan učinak kada se fokusirate na minijaturu prikazan je pojavom tankih linija u dizajnu i drugim dijelovima. Pojavljuje se niz različitih vrsta efekata od naslova do slika, meke i nenametljive 3D transformacije i glatkih prijelaza pseudoelemenata. Radi lošije u modernim preglednicima.

iHover ima nevjerojatnu kolekciju efekata kada lebdite na čistom CSS3, uz pomoć Bootstrapa 3. Inspiriran Scss CSS (datoteka), lako se mijenja. Modularni kod, nema potrebe za uključivanjem cijele datoteke u rad. 30+ različitih efekata u jednom paketu. Sve je dobro dokumentirano, učinci su još jednostavniji u Vikoristanu. Sve što trebate učiniti je ispravno postaviti HTML izgled i uključiti CSS datoteku prije rada.

Stvara brojne jednostavne, ali elegantne efekte, ovisno o satu potpisa slike. Ideja je da će se naslov, ime autora i gumb za vezu učinkovito pojaviti kada prijeđete pokazivačem iznad minijature. Za određene efekte koriste se vizualne 3D transformacije.

Vrlo jednostavan efekt prijelaza, bez ikakvih posebnosti, oko slike u okviru, pretvara se u promjenjivi fokus kada lebdi i to je sve.

za sličice pomoću CSS3

Prodavač pozicionira svoj rad kao galeriju stražnjice za prikaz učinaka prijelaza iz skočnih napomena (naslova) na minijature. Navedeno je da će ga podržavati trenutni preglednici, uključujući IE 9+. Punopravnom galerijom to je, naravno, teško nazvati, ali učinak izgleda potpisa je potpun.

Osnovni skup CSS pravila za stvaranje neželjenih učinaka kada lebdite iznad savršeno okruglih minijatura. Paket sadrži 7 vrsta CSS3 prijelaza, uključujući dokumentaciju iz obuke i razvoja. Trenutačni preglednici podržavaju efekte.

Prelamanje minijatura kada lebdite

Jednostavan efekt omatanja okruglih sličica kada kursorom miša prijeđete preko njih, otprilike isti možete vidjeti na mom blogu, u najavama snimaka na glavi. Implementiran je s nekoliko redaka CSS koda.

Da doslovce prevedem: "Seksualni učinak kad se upre u njega." Nešto toliko seksualno, čiji učinak teško da ćete primijetiti, osim ako nemate bujnu maštu, ali učinak je na svoj način koristan i povećava poštovanje prema novom muškarcu.

Pet različitih efekata koji se prikazuju kada pokažete na njih. Potpisi u tri varijante, zavjese s različitim stupnjevima vidljivosti i omatanje s horizontalnim pokretima.

4 Pogledajte efekte animacije naslova slika, implementirane uključujući korištenje CSS3. Različiti položaji s pojavom efekata prijelaza posve su standardni. Da biste razumjeli kako animacija radi, pogledajte izlazni kod demo stranice bez gledanja popratne dokumentacije.

U mrežu galerija dodane su minijature s različitim efektima poput potpisa, omatanja, razvijanja, spajanja itd. Dokumentacija iz izvora i prilagodbe je oskudna, ali možete se prijaviti na poseban zahtjev.

Ovaj efekt nije ništa posebno, banalna promjena svjetline slike pri lebdenju ili čak dodavanje elementa animacije. Morat ćete sami otkriti pojedinosti implementacije čitajući izlazni demo.

Još jedan set od 10 efekata lebdenja za slike, različiti pogledi na minijature na lebdenje, zumiranje, rotacija, rotacija, zatamnjivanje itd.

Razni efekti animacije okvira oko slike, izgleda vrlo atraktivno, a tu je i izvještaj o prilagodbi i wiki.

Izvorni efekti lebdenja na CSS3, koji se koriste za učinkovit izgled sličica kada se lebdi. Skup CSS pravila sadrži 10 različitih efekata koji se mogu prilagoditi za različite slike. Učinci stvarno utječu, posebno kada je u pitanju razumijevanje onoga što se radi bez pomoći CSS3. Detaljan vodič koji će vam pomoći da shvatite što se događa.

Ideja je stvoriti SVG, koji je pozadinski obrazac za bilo koje pisanje i pretvara se u drugi oblik kada se mišem prijeđe iznad njega. Na taj način možete kreirati više različitih opcija, a primjer prikazuje tri vrste prijelaznih efekata. Prednost korištenja SVG-a je u tome što možemo promijeniti veličinu obrasca kako bi odgovarala veličini izvornog spremnika.

Rozsuvni slike

Bit ovog efekta je da se slika prikazuje gore i dolje kako bi se pojavio natpis. Ako petljate sa stilskim parametrima, mislim da možete postići neke lijepe efekte, ali općenito, sve izgleda prilično jednostavno.

S ovim efektom sve je jednostavno, opisi slika vidljivi su na vrhu desne strane ili na dnu, na dnu stranice, crte se pojavljuju s tamnom pozadinom, sve se jednostavno preoblikuje pomoću moći CSS-a .

Kao što je dizajnirano, sličice su predstavljene u zatamnjenom izgledu; kada se iznad njih zadrži pokazivač, pojavljuju se slike i potpis se stapa na svijetlu pozadinu.

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

Postoji niz drugih rješenja za implementaciju potpisa prije slikovnih minijatura. U mrežnom uređivaču možete eksperimentirati s parametrima i postići željene rezultate.

Skup prekrasnih efekata kada lebdite iznad minijatura, različite vrste izgleda i dizajna naslova za slike. Tanke linije u kontrastu s malim zatamnjenjem stvaraju lako razumljive informacijske blokove.

Himerični oblici i učinak poboljšani su zbog efekta animacije kada se naslovi pojavljuju prije prikaza sličica.

Primjer stvaranja vizualnog efekta slajda za prikaz volumetrijskih naslova na slikama koristeći samo CSS3 i HTML5.

6 natpisa uz slike

6 opcija za izgled naslova prije slika kada lebdite iznad dodatnog CSS3. Najkorisnija lekcija iz implementacije i prilagodbe dostupna za vikend.

Pa, konačno, konačno, ne mogu ne sjetiti se najjednostavnijeg načina za stvaranje naslova koji se spaja sa sličicom pomoću CSS3.

Naučio sam o ovoj metodi u jednoj od prethodnih lekcija: .

Želite li što prije poslati poruku robotu na stranici? Sada je to potpuno moguće! Iz tih jednostavnih razloga pojavio se novi odjeljak na tržištu TemplateMonster. Kolekcija će se ažurirati, ali sada možete saznati što je prikladno za vaš online projekt. Sve što trebate učiniti je odabrati svoje idealno gotovo rješenje i razraditi prezentaciju potrebnih informacija. I ne zaboravite da tekst u predlošku pisma morate napisati ručno.

S postovanjem Andrija

Prije svega, za one koji još nisu sasvim u temi, ili uopće nisu u temi, ukratko ću objasniti što je to. Različite vrste efekata (naslovi, opisi alata, glatki prijelazi, transformacija, rotacija, poboljšanje, pomak itd.) mogu se primijeniti na elemente web stranice kada pokazivač miša prijeđe iznad njih. Ovi efekti mogu se implementirati uz pomoć raznih jQuery dodataka ili u čistom .
Danas sam pripremao veliku kolekciju originalnih efekata lebdenja za slike, kreiranih pomoću CSS3, bez povezivanja javascript biblioteka. Neću govoriti o prednostima i nedostacima implementacije efekata lebdenja na čistom CSS3, ovo je druga tema, samo se divite primjerima, i ako je potrebno, iskoristite sličnosti na svojoj stranici. Svi efekti su prikazani na prvi pogled s pokaznom kundakom i dokumentacijom izvješća s izlaznim uređajima. Priručnici su više-manje buržujski, ali sve se više-manje intuitivno razumije.

Želio bih izraziti vaše poštovanje prema činjenici da sve ove aplikacije rade ispravno samo u trenutačnim preglednicima koji podržavaju snagu CSS3.

Kako se ne bi pokvarila skrivena slika, a da se ne iskrivi strojnim prijevodom naziva efekata (za sve namjene i svrhe), lišavajući izvornike naslova kako ih je izdavač nazvao.

Vrlo jednostavan efekt prijelaza, bez ikakvih posebnosti, oko slike u okviru, pretvara se u promjenjivi fokus kada lebdi i to je sve.