În primul rând, pentru cei care nu sunt deloc în materie sau deloc în materie, le voi explica pe scurt despre ce este vorba. Acestea sunt diverse tipuri de efecte (fer-uri pop-up, tooltips, tranziții netede, transformare, rotație, zoom, offset etc.) aplicate elementelor site-ului web cu cursorul mouse-ului pe ele. Acestea pot fi implementate atât cu ajutorul diverselor plugin-uri jQuery, cât și într-unul pur.
Astăzi am pregătit o colecție mare de efecte hover originale pentru imagini create folosind CSS3, fără a conecta biblioteci javascript. Nu voi vorbi despre avantajele și dezavantajele implementării efectelor hover în CSS3 pur, acesta este un alt subiect, doar uitați-vă la exemple și, dacă este necesar, folosiți-l pe cel care vă place pe site-ul dvs. Toate efectele prezentate în recenzie sunt furnizate cu un exemplu demonstrativ și documentație detaliată cu surse. Manualele sunt în mare parte în limba burgheză, dar totul este mai mult sau mai puțin intuitiv.
Vreau doar să vă atrag atenția asupra faptului că toate aceste exemple vor funcționa corect numai în browserele moderne care acceptă proprietăți CSS3.
Pentru a nu sparge imaginea de ansamblu, nu a distorsionat numele efectelor cu traducere automată (cu excepția unora), a lăsat originalele titlurilor așa cum le-a numit dezvoltatorul.
Un efect de hover foarte interesant pentru imaginile în miniatură, folosind linii subțiri în design și tipografie. Mai multe tipuri diferite de efecte pentru apariția subtitrărilor pentru imagini, transformări 3D blânde și neintruzive și tranziții line ale pseudo-elementelor. Funcționează doar în browserele moderne.
iHover este o colecție impresionantă de efecte pur CSS3 hover, cu suport Bootstrap 3. Construit cu Scss CSS (fișier), ușor de modificat cu variabile. Codul este modular, nu este nevoie să includeți întregul fișier. Peste 30 de efecte diferite într-un singur pachet. Totul este destul de bine documentat și efectele sunt foarte ușor de utilizat. Tot ce trebuie să faceți este să aliniați corect marcajul HTML și să puneți fișierul CSS la lucru.
Creează câteva efecte simple, dar elegante, pentru subtitrările imaginilor. Ideea este ca titlul, numele autorului și butonul de link să apară dramatic atunci când treceți cu mouse-ul peste miniaturi. Pentru unele efecte, sunt folosite transformări vizuale 3D.
Un efect de tranziție foarte simplu, fără clopoței și fluiere speciale, o imagine complet rotundă într-un cadru, se transformă prin schimbarea focalizării pe hover și atât.
Efecte de trecere cu mouse-ul pentru miniaturile CSS3
Dezvoltatorul își poziționează munca ca exemplu de galerie de imagini cu efecte de tranziție atunci când apar adnotări (legendele) pentru miniaturi. Este declarat un suport puternic pentru browserele moderne, inclusiv IE 9+. Desigur, este dificil să o numim o galerie cu drepturi depline, dar efectul apariției semnăturilor este destul de interesant.
Un alt set de reguli CSS pentru a crea efecte de transformare impresionante atunci când treceți cu mouse-ul peste miniaturile absolut circulare. Pachetul conține 7 tipuri de tranziții CSS3, documentație foarte detaliată privind configurarea și utilizarea. Efectele sunt acceptate de toate browserele moderne.
Rotirea miniaturilor la trecerea cursorului
Efectul simplu de rotire a miniaturilor rotunde atunci când treceți cu cursorul mouse-ului peste ele este cam același pe care îl puteți vedea pe blogul meu, în anunțurile postărilor de pe pagina principală. Implementat în câteva linii de cod CSS.
Dacă este tradus literal: „Efect sexual când treci cu mouse-ul deasupra”. Desigur, cu greu vei observa ceva atât de sexy în acest efect, decât dacă ai o imaginație violentă, dar efectul este interesant în felul său și merită să fii atent.
Cinci efecte de hover diferite pentru imagini. Subtitrări pop-up în trei variante, perdele sub formă de modificare a gradului de transparență și rotație cu mișcare orizontală.
4 tipuri de efecte de animație pentru legendele imaginilor, implementate exclusiv folosind CSS3. Diferite poziții de fade și efecte de tranziție, performanță destul de standard. Pentru a înțelege cum funcționează animația, aruncați o privire la codul sursă al paginii demo, nu am găsit nicio documentație separată.
Miniaturi înscrise în galerie cu diferite apariții de subtitrări, rotație, estompare, pop și multe altele. Documentația privind utilizarea și configurarea este destul de puțină, dar dacă doriți cu adevărat, vă puteți da seama.
Acest efect nu reprezintă nimic special, o schimbare banală a luminozității imaginilor aflate la hover, cu excepția faptului că se adaugă elemente de animație. Va trebui să vă dați seama singuri detaliile implementării, extinzând codul sursă al demo-ului.
Un alt set de 10 efecte de hover pentru imagini, diverse modificări ale miniaturilor la hover, zoom, rotație, rotație, estompare etc.
Diverse efecte pentru animarea cadrului din jurul imaginilor, arată destul de atractiv, există un ghid detaliat despre modul de configurare și utilizare.
Efectele de trecere cu mouse-ul CSS3 originale aplicate pentru a afișa în mod eficient subtitrările în miniatură la trecerea cu mouse-ul. Setul de reguli CSS include 10 efecte diferite pe care le puteți folosi separat pentru imagini diferite. Efectele sunt cu adevărat impresionante, mai ales când realizezi că totul este făcut cu CSS3. Un ghid detaliat vă va ajuta să vă dați seama ce este.
Ideea este de a crea un SVG care este o formă de fundal pentru un fel de litere și se transformă într-o altă formă la trecerea mouse-ului. Astfel, puteți face multe opțiuni diferite, în exemplu sunt afișate trei tipuri de efecte de tranziție. Lucrul frumos despre utilizarea SVG este că putem redimensiona formularul pentru a se potrivi containerului părinte.
Imagini de alunecare
Esența acestui efect este că imaginea este mutată în sus și în jos pentru apariția semnăturii. Dacă lucrați cu parametrii de stil, cred că puteți obține efecte destul de drăguțe, dar, implicit, totul pare foarte simplu.
Cu acest efect, totul este simplu, subtitrările pentru imagini alunecă în dreapta sus sau la stânga în jos, sub forma unei panglici cu un fundal întunecat translucid, totul este foarte simplu de reformat folosind proprietățile css.
O soluție interesantă, miniaturile sunt prezentate într-o formă întunecată, când treci cu mouse-ul peste ele, apar imaginile și semnătura apare pe un fundal deschis.
O legendă a imaginii iese din colț și se extinde în diagonală pe întreaga zonă a imaginii.
Câteva soluții mai interesante pentru implementarea subtitrărilor pop-up pentru miniaturile imaginilor. În editorul online, puteți experimenta parametrii și puteți obține rezultate mai impresionante.
Un set de efecte frumoase atunci când treceți cu mouse-ul peste miniaturi, diferite tipuri de aspect și design de subtitrări pentru imagini. Liniile subțiri, în contrast cu un fundal ușor întunecat, creează blocuri de informații ușor de citit.
Forme bizare și efect de zoom combinate cu efectul de animație al subtitrărilor pentru imaginile în miniatură.
Efecte minunate ale suprapunerii pictogramelor pe miniaturile imaginilor în diferite variante de aspect. Exemplul folosește simbolul (+) conturat într-un cerc utilizând raza-chenar: în CSS, puteți folosi și pictogramele font pentru a face panoul pop-up mai informativ.
Un exemplu de creare a unui efect de diapozitiv vizual pentru afișarea subtitrărilor volumetrice în imagini folosind numai CSS3 și HTML5.
6 Subtitrări imagini
6 Opțiuni pentru apariția subtitrărilor pop-up pentru imaginile deplasate folosind CSS3. Lecție detaliată despre implementare și configurare, surse disponibile pentru descărcare.
Și, în cele din urmă, în cele din urmă, ca să spun așa, nu pot să nu menționez cel mai simplu mod de a crea o legendă pop-up pentru o miniatură folosind CSS3.
Am vorbit despre această metodă într-una din lecțiile mele anterioare:.
Cu tot respectul, Andrew
Astăzi vei încerca să-ți decorezi site-ul sau blogul efecte frumoase pentru imagini folosind CSSși cod HTML obișnuit. Da, doar CSS și cod HTML obișnuit, fără a utiliza limbajul de programare PHP, JavaScript, jQueri și altele.
Care pot efectele sugerate de mine pe site-ul blogului:
- măriți și reduceți fără probleme imaginile;
- deplasarea verticală și orizontală a imaginilor;
- înclinați sau rotiți imaginea;
- rotunjirea imaginilor;
Și, de asemenea, astfel de efecte:
- estompare, iluminare, contrast, sepia;
- tranziție lină de la culoare la alb-negru;
- inversarea culorii.
Pentru a utiliza codul, trebuie doar să copiați mai întâi codul principal, apoi codul efectului și să lipiți, desigur, în blogul sau site-ul dvs. web.
Codul principal
Acest cod se aplică tuturor efectelor care vă vor fi sugerate mai jos:
* (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;) body (fond: # 333 ;) .pic (chenar: 10px solid #fff; float: stânga; înălțime: 300px; lățime: 300px; margine: 20px; overflow: ascuns; -webkit-box-shadow: 5px 5px 5px # 111; box-shadow: 5px 5px 5px # 111;)
Toate stilurile din clasa „.pic” vor fi comune tuturor imaginilor. Toate imaginile au un chenar alb de 10px (linia # 13). Aceleași dimensiuni ale imaginii sunt indicate pentru înălțimea și lățimea de 300px (linii # 15, # 16). Indentația din blocuri este de 20px (linia numărul 17). Pentru ca imaginea să nu depășească culoarele specificate, prescriem „overflow: ascuns; ". Dacă nu înțelegeți toate acestea, vă recomand să o citiți.
Să începem cu efectele.
1. Efect de „Mărire”.
aici este acest cod:
Linia # 2, specificați calea către imagine, a cărei dimensiune este de 400 x 400px.
În CSS, inserați acest cod:
/ * mărește imaginea * / .grow img (înălțime: 300px; lățime: 300px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition : ușurință pentru toate 1; tranziție: ușurință pentru toate 1;) .grow img: hover (lățime: 400 px; înălțime: 400 px;)
Imaginea are în esență 400 x 400 px, dar o vom reduce pentru a se potrivi cu caseta noastră de 300 x 300 px (Rândurile # 3 și # 4).
Imaginea se redimensionează fără probleme la imaginea originală de 400 x 400 px (liniile # 14 și # 15). Proprietatea de tranziție este responsabilă pentru redimensionarea lină, unde este specificată 1 secundă. (Rândul # 6 - # 10).
2. Efectul „Reducere”
De fapt, acesta este același cod, doar că trebuie să redimensionați și imaginea fără probleme de la dimensiuni mari 400 x 400px până la 300 x 300px.
În fișierul HTML între etichete
lipiți acest cod:
În CSS, inserați acest cod:
/ * micșora imaginea * / .shrink img (înălțime: 400px; lățime: 400px; -webkit-transition: toate 1s ease; -moz-transition: toate 1s ease; -o-transition: toate 1s ease; -ms-transition : ușurință pentru toate 1; tranziție: ușurință pentru toate 1;) .shrink img: hover (lățime: 300 px; înălțime: 300 px;)
3. Efectul „deplasare orizontală”.
Acest efect modifică poziția blocului. Adică, dacă mutați cursorul peste o imagine, imaginea se va deplasa în lateral.
În fișierul HTML, inserați între etichete
aici este acest cod:
În rândul #2, specificați calea către imagine, a cărei dimensiune este de 600 x 300px.
În CSS, inserați acest cod:
/ * imagine offset orizontal * / .sidepan img (margin-left: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margine 1s ease; tranziție: margin 1s ease;) .sidepan img: hover (margin-left: -200px;)
Pentru a muta imaginea la stânga, specificați valoarea „-200” în proprietatea „margin-left”. Dacă specificați „200”, decalajul va fi la dreapta.
4. Efectul „Deplasare verticală”
De fapt, acesta este același cod, dar în loc de proprietatea „margin-left”, trebuie să scrieți „margin-top”, iar imaginea se va deplasa fără probleme în sus.
În fișierul HTML, inserați între etichete
aici este acest cod:
În CSS, inserați acest cod:
/ * Deplasare verticală a imaginii * / .vertpan img (margin-top: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margine 1s ease; tranziție: margin 1s ease;) .vertpan img: hover (margin-top: -200px;)
Dacă specificați valoarea „200” în proprietățile „margin-top”, imaginea va fi deplasată în jos.
5. Efectul „Înclinare”
Acest efect vă va permite să faceți o ușoară rotație a imaginii când treceți cu mouse-ul peste ea.
În fișierul HTML, inserați între etichete
aici este acest cod:
În CSS, inserați acest cod:
/ * înclina imaginea * / .tilt (-webkit-transition: toate 0.5s ease; -moz-transition: toate 0.5s ease; -o-transition: toate 0.5s ease; -ms-transition: toate 0.5s ease; tranziție: toate 0.5s ușurință;) .tilt: hover (-webkit-transform: rotire (-10deg); -moz-transform: rotire (-10deg); -o-transform: rotire (-10deg); -ms-transform : rotire (-10 grade); transformare: rotire (-10 grade);)
Când treceți cursorul, imaginea se va întoarce 10 0 la stânga (linia # 11-# 15). Puteți crește singur gradul de rotație.
6. Efect „Rotire imagine cu remodelare”
Acesta este efectul meu preferat. Când treceți cursorul mouse-ului peste imagine, acesta face un cerc de rotație, în timp ce forma pătrată se schimbă într-una rotundă.
În fișierul HTML, inserați între etichete
aici este acest cod:
În CSS, inserați acest cod:
/ * rotația imaginii cu schimbarea formei * / .morph (-webkit-transition: toate 0,5 s ease; -moz-transition: toate 0,5 s ease; -o-transition: toate 0,5 s ease; -ms-transition: toate 0,5 s; ușurință; tranziție: toate 0,5 s ușurință;) .morph: hover (rază de margine: 50%; -webkit-transform: rotire (360deg); -moz-transform: rotire (360deg); -o-transform: rotire (360deg); ); -ms-transform: rotire (360deg); transformare: rotire (360deg);)
„Raza de frontieră” cu o valoare de „50%” este responsabilă pentru rotunjirea colțurilor.
Proprietatea de transformare este responsabilă pentru rotirea imaginii cu 360 0.
7. Efect de focalizare a imaginii
Acest efect nu este neobișnuit, ci doar rotunjește imaginea și mărește grosimea cadrului.
În fișierul HTML, inserați între etichete
aici este acest cod:
În CSS, inserați acest cod:
/ * focalizare imagine * / .focus (-webkit-transition: ușurință pentru toate 1; -moz-transition: ușurință pentru toate 1; -o-transition: ușurință pentru toate 1; -ms-transition: ușurință pentru toate 1; tranziție: ușurință pentru toate 1s; ;) .focus: hover (chenar: 70px solid # 000; chenar-rază: 50%;)
Aici, cred că înțelegeți totul: chenar este responsabil pentru grosimea chenarului și chenar-raza pentru raza rotunjirii.
8. Efect de estompare
Când treceți cursorul mouse-ului peste o imagine clară, aceasta va deveni neclară.
În fișierul HTML, inserați între etichete
aici este acest cod:
În CSS, inserați acest cod:
/ * blur image * / .blur img (-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; tranziție: all 1s ease; ușurință;) .blur img: hover (-webkit-filter: blur (5px);)
Proprietatea „webkit-filter: blur” cu parametri de 5px este responsabilă pentru estompare.
9. Efect „Imagine alb-negru”
Când treceți cursorul mouse-ului peste o imagine color, aceasta devine imediat alb-negru.
În fișierul HTML, inserați între etichete
aici este acest cod:
În CSS, inserați acest cod:
/ * imagine alb-negru * / .bw (-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; tranziție: toate 1s ease;) .bw: hover (-webkit-filter: tonuri de gri (100%);)
Filtrul „webkit-filter: grayscale” cu valoarea „100%” răspunde cât de mult să faci imaginea alb-negru. Puteți specifica propria valoare de la 1% -100%.
10. Efectul „Iluminare”
O imagine întunecată devine mai luminoasă când mutați cursorul mouse-ului peste ea.
În fișierul HTML, inserați între etichete
aici este acest cod:
În CSS, inserați acest cod:
/ * luminează imaginea * / .brighten img (-webkit-filter: luminozitate (10%); -webkit-transition: toate 1s ease; -moz-transition: toate 1s ease; -o-transition: toate 1s ease; -ms -tranziție: toate 1s ease; tranziție: toate 1s ease;). brighten img: hover (-webkit-filter: luminozitate (100%);)
Întunecă inițial imaginea cu „10%” (linia # 3)
Când treceți cursorul mouse-ului, aceasta luminează imaginea cu „100%” (linia # 12)
11. Efect „Sepia”
De asemenea, un efect destul de bun, cu care imaginea se va transforma în ton sepia.
În CSS, inserați acest cod:
/ * Sepia * / .sepia img (-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; tranziție: all 1s ease; ;) .sepia img: hover (-webkit-filter: sepia (100%);)
12. Efectul „Contrast”
Cred că numele în sine sugerează deja că atunci când treceți cursorul peste imagine, imaginea va deveni mai bogată și mai contrastantă.
În fișierul HTML, inserați între etichete
În CSS, inserați acest cod:
/ * Contrastul imaginii * / .contrast img (-webkit-transition: toate 1s ease; -moz-transition: toate 1s ease; -o-transition: toate 1s ease; -ms-transition: toate 1s ease; tranziție: toate 1s; ease;) .contrast img: hover (-webkit-filter: contrast (185%);)
Fiți atenți la rândul #11. Dacă specificați o valoare de „100%”, nu se vor face modificări. Dacă faceți procentul mai mult de „100%”, de exemplu, „185%”, imaginea va deveni mai contrastată. Dacă faceți procentul mai mic de „100%”, de exemplu, „60%”, imaginea se va estompa.
13. Efectul „Inversie”
Acesta este, de asemenea, unul dintre efectele mele preferate. Arată cumva „metalic”.
În fișierul HTML, inserați între etichete
aici este acest cod:
În CSS, inserați acest cod:
/ * Inversează imaginea * / .invert img (-webkit-transition: toate 1s ease; -moz-transition: toate 1s ease; -o-transition: toate 1s ease; -ms-transition: toate 1s ease; tranziție: toate 1s ease;) .invert img: hover (-webkit-filter: inversare (100%);)
Valoarea inversării este setată de la 0% la 100% (linia # 11).
Asta e tot! Sper că v-a plăcut articolul! Dacă vă place, faceți clic pe like pe rețelele de socializare.
Această postare conține o selecție de diverse efecte și animații CSS care pot fi utile în munca ta, precum și elimină necesitatea de a recurge constant la JavaScript. Poate că exemplele nu sunt cele mai noi și mai neobișnuite, dar, după părerea mea, utile.
1. Ceas CSS3 cu jQuery
Acest ceas a fost creat folosind unul dintre instrumentele principale CSS3 - rotiți și cu biblioteca jQuery inclusă.2. Ceas analogic CSS
Un ceas analogic mai clasic. Ele sunt create cu tranziția webkit și proprietatea transform CSS. Dar pentru ca timpul să corespundă cu cel actual, aveți nevoie de JavaScript.
3. Cub 3D rotativ
Rotirea și mișcarea de-a lungul părților laterale ale cubului vor fi efectuate folosind tastele standard „sus”, „jos”, „stânga” și „dreapta”. Forma 3D în sine este construită folosind perspectiva webkit, -webkit-transform și -webkit-transition.
4. Mai multe cuburi 3D retractabile
Există deja câteva cuburi 3D prezentate aici, folosind CSS3 și direct proprietățile de transformare și tranziție. Trecând peste un cub, acesta alunecă în lateral, dezvăluind textul care se află pe cealaltă parte a formei.
5. Meniul acordeonului
Efectul „meniu acordeon” pe CSS pur, unde făcând clic pe fiecare dintre linii se deschide o fereastră suplimentară în corpul listei în sine. Animație nativă în browsere bazate pe WebKit.
6. Paralax Scrolling cu CSS
Este o defilare automată animată în paralaxă folosind tranziții CSS bazate pe WebKit. Când treceți cu mouse-ul peste caseta de text, stelele din fundal încep să se miște ușor în lateral. Se creează efectul zborului.
7. Matrice
Filmul cult „The Matrix” este unul dintre cele mai bune filme științifico-fantastice. Acest exemplu arată cum să recreați aproximativ aceeași animație minunată (ecran negru cu numere care rulează) în CSS3.
8. Palaride dinamice
Acest exemplu detaliază cum să creați fotografii animate pe baza comenzilor CSS3. Când faceți clic pe o imagine, aceasta se mărește și se deplasează în față.
9. Scalare imagini
În acest exemplu, imaginile sunt pur și simplu mărite la trecerea cu mouse-ul. Un efect necomplicat, dar uneori foarte util.
10. Efecte JavaScript pe CSS3
Ca alternativă la JavaScript, această postare sugerează șapte efecte CSS3: diverse blocuri care se rotesc, dispar, alunecă, cresc etc.
11. Înregistrări virtuale ale DJ Hero
Postarea explică cum să creați înregistrări rotative. Viteza de rotație poate fi reglată direct pe ecran.
12. Vinil glisant
Efectul de alunecare al discurilor de vinil este creat folosind tranziții CSS3 și HTML. Acest tip de animație dă viață paginii web, adaugă originalitate copertei standard a albumului și așa mai departe.
13. Efecte când treceți cu mouse-ul peste o imagine
Când treceți cu mouse-ul peste o imagine, aceasta se poate deplasa în lateral, se învârte, se micșorează, se poate transforma din pătrat în rotund, devine neclară... Într-un cuvânt, imaginile își vor schimba proprietățile în toate modurile posibile.
14. Triunghi rotativ
Când faceți clic pe triunghi, acesta începe să se rotească.
15. Spațiu
Un întreg spațiu cosmic împachetat în CSS. Acționează ca un exemplu de suprapunere a straturilor rotative (mai vizibilă atunci când micșorați în browser).
16. „Meninas” în 3D
Un efect CSS interesant care face ca faimoasa pictură „Menina” a lui Diego Velazquez să apară tridimensională.
17. CSS pentru Mac OS X
În partea de jos a ecranului se află un set de pictograme de bază pentru Mac OS X care măresc la trecerea cursorului. Efectul dă dinamică site-ului.
18. Drop-In Modali
Efectele CSS3 și proprietățile Drop-In Modals vă ajută să creați schimbări modale rapide, animate și ușoare.
19. Animarea obiectelor
Transformarea modifică aspectul elementului în browser. Afișat folosind exemplul unei rachete care „zboară” de la un capăt la altul al ecranului. Pot fi folosite instrumente de mutare, instrumente de rotație etc.
20. Ceas colorat
Ceasul color este alimentat de jQuery și CSS3. Acest efect va fi util în contextul așteptării timpului de finalizare a unor competiții, vot și altele asemenea.
21. Galerie lightbox cu jQuery și CSS3
Aceasta este o galerie grozavă care vă permite să sortați și să aranjați imaginile într-o ordine selectivă. Pentru interactivitate, galeria folosește jQuery, jQuery UI și jQuery plugin FancyBox. Lightbox păstrează titlul și descrierea imaginilor, le grupează și aranjează automat diapozitivele pe rând.
22. Previzualizare „elastică”.
Măriți previzualizarea imaginii la trecerea cursorului. Astfel, atunci când dai clic, meniul crește proporțional.
23. Carduri dinamice
Acest exemplu este un set dinamic de carduri care utilizează caracteristici HTML și CSS3.
24. Glisarea meniului jQuery
Exemplul de slideout este creat cu o combinație de CSS3 și jQuery. Când treceți cu mouse-ul peste o imagine, apare o fereastră pop-up cu text.
25. File CSS
În exemplu, trecerea cursorului mouse-ului peste titlurile filelor modifică lista de mai jos.
26. Meniul Fisheye
Exemplul demonstrează cum să creați un meniu Fisheye utilizând animația CSS și SVG. Ca bonus suplimentar, este folosit un SVG demonstrativ în eticheta IMG.
27. Meniu derulant
Acest tip oferă o navigare foarte convenabilă prin meniul principal, datorită utilizării tranzițiilor CSS3.
28. Legende din Războiul Stelelor
Credite celebre din „Războiul Stelelor”. HTML și CSS vor fi suficiente pentru a le rula.
29. Mai multe efecte CSS Fisheye
Din nou, icoane care cresc la hover.
30. Animație de tipul „cadru cu cadru”
Sunt posibile mai multe opțiuni demonstrative.În primul exemplu, pentru a asigura schimbarea cadrelor, este necesar să faceți clic pe imagine. Fiecare clic este o mișcare. Cadrele se repetă, se creează o anumită buclă.
În al doilea exemplu, pentru a schimba cadre, este suficient să mutați cursorul peste imagine. În consecință, viteza de animație va depinde de viteza de mișcare a mouse-ului.
31. Walker imperial AT-AT
Războiul Stelelor din nou - acest plimbător AT-AT este realizat cu CSS3.
32. Un alt acordeon CSS
Când faceți clic pe un rând, tabelul este extins.
33. Meniu glisant simplu
40. Meniu derulant
O altă opțiune pentru un meniu derulant CSS simplu și drăguț.
Dacă vă place efectul, atunci puteți doar să copiați codul terminat și să îl utilizați!
Dă viață site-ului tău!
Diverse efecte de hover pot aduce prospețime paginilor site-ului tău. Anterior, pentru orice efect, trebuia să te ocupi de javascript, dar astăzi, după apariția tehnologiei CSS3, totul se poate face ocolind utilizarea javascript-ului.
Exemplele de astăzi sunt toate implementate și optimizate pentru noile browsere moderne și cu siguranță vor funcționa în ele (de exemplu, în browserele Mozilla sau WebKit). Nu vă putem asigura că lucrați în IE, dar în cele mai recente versiuni, efectele vor funcționa cu siguranță conform așteptărilor. Dar nu uitați că a fost pregătită o opțiune de rollback atractivă pentru fiecare efect în cazul în care browserul încă nu acceptă efectul.
01. Creștere
Demo: A vedea
Acest efect este foarte ușor de implementat și poate fi realizat în mai multe moduri. Am folosit o metodă în care se adaugă un parametru de marjă la fiecare imagine, iar apoi, la trecerea cu mouse-ul, acest parametru este eliminat. Să presupunem că setarea marjei începe de la 15 pixeli, iar la trecerea cu mouse-ul devine 2 pixeli, ceea ce face ca imaginea să pară să se ridice. De asemenea, puteți utiliza acest efect doar cu text, chiar dacă linkurile sunt pe verticală și nu pe orizontală.
Tranziția de aici poate fi setată la discreția ta, iar efectul va fi, de asemenea, atractiv fără nicio tranziție. De exemplu, am făcut efectul puțin neted, ceea ce ne-am gândit că va adăuga un pic de aromă efectului.
Bump Up CSS
Ex1 img (
chenar: 5px solid #ccc;
plutește la stânga;
marginea: 15px;
-webkit-tranziție: margine 0.5s ease-out;
-moz-tranziție: margine 0.5s ease-out;
-o-tranziție: margine 0,5s ease-out;
}
Ex1 img: hover (
margine-sus: 2px;
}
02. Stack & Grow
Demo: A vedea
Se pare că autorul acestui efect a dorit să obțină un fel de efect de lampă de lavă, deoarece atunci când treceți mouse-ul peste lista de link-uri, fiecare imagine se extinde încet și apoi revine la dimensiunea inițială.
Pentru implementare aici au fost folosite imagini cu dimensiunea de 400x133 pixeli. Au fost apoi redimensionate la 300x100 pixeli folosind CSS și extinse la trecerea cu mouse-ul. Deoarece întreaga listă este centrată în exemplu, noua dimensiune a imaginilor a refractat întregul aliniament. Această problemă poate fi rezolvată prin setarea marginilor negative la jumătate din lățimea imaginilor mărite.
Cod CSS pentru Stack & Grow
/ * Exemplul 2 * /
#container (
latime: 300px;
marja: 0 auto;
}
# ex2 img (
înălțime: 100px;
latime: 300px;
marjă: 15px 0;
-webkit-tranziție: ușurința tuturor celor 1;
-moz-tranziție: toate 1-urile ușurință;
-o-tranziție: toate 1-urile ușurință;
}
# ex2 img: hover (
înălțime: 133px;
latime: 400px;
margine-stânga: -50px;
}
03. Fade Text in
Demo: A vedea
Aici autorul a vrut să creeze ceva de genul unui eveniment de tip javascript, când treceți cursorul peste un articol, iar efectul este afișat pe altul. Aici textul și imaginea au fost luate și apoi plasate într-un div separat, aliniat la stânga. Apoi, parametrii culoare: transparent și line-height: 0px au fost adăugați la div. Acest lucru a permis ca textul să fie poziționat în partea de sus a div-ului și să-l ascundă cu totul.
Pentru ca textul să apară din nou, pur și simplu schimbăm culoarea și înălțimea liniei. Când treceți cu mouse-ul peste imagine, textul reapare. Efect foarte amuzant și ușor.
Fade text în CSS
# ex3 (
latime: 730px;
înălțime: 133px;
înălțimea liniei: 0px;
culoare: transparent;
dimensiunea fontului: 50px;
font-family: „HelveticaNeue-Light”, „Helvetica Neue Light”, „Helvetica Neue”, Helvetica, Arial, sans-serif;
greutate font: 300;
text-transform: majuscule;
}
# ex3: hover (
înălțimea liniei: 133px;
culoare: # 575858;
}
# ex3 img (
plutește la stânga;
marjă: 0 15px;
}
04. Fotografie strâmbă
Demo: A vedea
Acest efect este foarte simplu, dar funcționează excelent pentru o galerie de miniaturi. Mai întâi, trebuie să creați o grilă de imagini și apoi să rotiți imaginile când treceți cu mouse-ul peste ele, ceea ce creează un efect atractiv.
Există o mulțime de valori CSS noi de folosit aici, așa că și opțiunea de rollback pentru browserele mai vechi merită luată în considerare. În galeria noastră, tranzițiile, transformările și umbrele bloc vor fi folosite, totuși, conform dorințelor dvs. Transformarea va fi responsabilă pentru rotirea imaginii, iar tranzițiile vor fi responsabile pentru efectul moale și neted.
Aici puteți aplica pseudo-selectori.
CSS foto strâmb
# ex4 (
latime: 800px;
marja: 0 auto;
}
# ex4 img (
marja: 20px;
chenar: 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);
box-shadow: 4px 4px 4px rgba (0,0,0,0.2);
-webkit-tranziție: toate 0.5s ease-out;
-moz-tranziție: toate 0.5s ușurință;
-o-tranziție: toate 0.5s ușurință;
}
# ex4 img: hover (
-webkit-transform: rotire (-7deg);
-moz-transform: rotire (-7deg);
-o-transforma: roti (-7deg);
}
05. Fade In and Reflect
Demo: A vedea
Acest efect este un pic mai complicat de implementat, așa că a trebuit să-l schimbăm puțin pentru a obține un efect decent. Poziția standard a imaginii este ușor transparentă. Apoi, când treceți cu mouse-ul peste imagine, nivelul de transparență este coborât și imaginea este restabilită la aspectul inițial, precum și o ușoară strălucire și reflexie (numai pentru browserele din familia WebKit).
Din păcate, reflexia nu este chiar o tranziție, așa că apare imediat, deși restul conținutului apare cu încetinitorul.
Dacă sunteți confuz cu privire la CSS pentru reflecții, puteți citi mai multe despre el în (David Walsh).
Fade In and Reflect Effect CSS
# ex5 (
latime: 700px;
marja: 0 auto;
înălțime minimă: 300px;
}
# ex5 img (
marginea: 25px;
opacitate: 0,8;
chenar: 10px solid #eee;
/ * Tranziție * /
-webkit-tranziție: toate 0.5s ușurință;
-moz-tranziție: toate 0.5s ușurință;
-o-tranziție: toate 0.5s ușurință;
/ * Reflecție * /
-webkit-box-reflect: sub 0px -webkit-gradient (liniar, stânga sus, stânga jos, de la (transparent), color-stop (.7, transparent), la (rgba (0,0,0,0.1)) );
}
# ex5 img: hover (
opacitate: 1;
/ * Reflecție * /
-webkit-box-reflect: sub 0px -webkit-gradient (liniar, stânga sus, stânga jos, de la (transparent), color-stop (.7, transparent), la (rgba (0,0,0,0.4)) );
/ * Strălucire * /
-webkit-box-shadow: 0px 0px 20px rgba (255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba (255,255,255,0.8);
box-shadow: 0px 0px 20px rgba (255,255,255,0.8);
}
Concluzie
Aceste 5 exemple ar trebui să fie suficiente pentru a vă inspira să creați ceva propriu. Amintiți-vă că puteți oricând să experimentați cu exemple gata făcute și apoi să ne spuneți despre ele.
Dacă ați întâlnit și alte efecte atractive undeva pe net, atunci vă rugăm să ne spuneți nouă și celorlalți cititori despre asta.
| 18.02.2016
CSS3 deschide posibilități nelimitate pentru designerii de UI, iar principalul avantaj este că aproape orice idee poate fi implementată și implementată cu ușurință fără a recurge la JavaScript.
Este uimitor cât de simple pot anima o pagină web obișnuită, făcând-o mai accesibilă pentru utilizatori. Vorbim despre tranziții CSS3, cu care poți permite unui element să transforme și să schimbe stilul, de exemplu, la hover. Cele nouă exemple de animație CSS3 de mai jos vor ajuta la crearea unei atmosfere receptive pe site-ul dvs., precum și la îmbunătățirea aspectului general al paginii cu tranziții frumoase și fine.
Pentru informații mai detaliate, puteți descărca arhiva cu fișierele.
Toate efectele funcționează folosind proprietatea de tranziție. tranziție- „tranziție”, „transformare”) și pseudo-clasa: hover, care determină stilul elementului atunci când treci cu cursorul mouse-ului peste el (în tutorialul nostru). Pentru exemplele noastre, am folosit un div de 500x309 pixeli, culoarea originală de fundal a fost # 6d6d6d, iar timpul de tranziție de la o stare la alta a fost de 0,3 secunde.
Corp> div (lățime: 500px; înălțime: 309px; fundal: # 6d6d6d; -webkit-transition: toate 0.3s ease ;; -moz-transition: toate 0.3s ease ;; -o-transition: toate 0.3s ease ;; tranziție: toate 0.3s ușurință;)
1. Schimbați culoarea la trecerea cursorului
Pe vremuri, implementarea unui astfel de efect a fost o muncă destul de minuțioasă, cu calcule matematice ale anumitor valori RGB. Deocamdată, este suficient să scrieți stilul CSS, în care trebuie să adăugați: pseudo-clasa hover la selector și să setați culoarea de fundal, care va înlocui fără probleme (în 0,3 secunde) culoarea originală de fundal atunci când treceți cu mouse-ul peste bloc:
Culoare: hover (fundal: # 53ea93;)
2. Aspectul cadrului
O transformare interesantă și vie - un cadru interior care apare lin la trecerea mouse-ului. Bun pentru decorarea diverselor nasturi. Pentru a obține acest efect, folosim: pseudo-clasa hover și proprietatea box-shadow cu parametrul inset (setează umbra în interiorul elementului). În plus, va trebui să setați întinderea umbrei (în cazul nostru, este de 23px) și culoarea acesteia:
Chenar: hover (box-shadow: insert 0 0 0 23px # 53ea93;)
3. Leagăn
Această animație CSS este o excepție, deoarece proprietatea de tranziție nu este utilizată aici. În schimb, am folosit:
- @keyframes este o directivă de bază pentru crearea de animații CSS cadru cu cadru care vă permite să faceți așa-numitele. storyboard și descrie animația ca o listă de puncte cheie;
- animation and animation-iteration-count - proprietati pentru setarea parametrilor de animatie (durata si viteza) si numarul de cicluri (repetitii). În cazul nostru, repetați 1.
4. Atenuare
Un efect de estompare este în esență o simplă schimbare a transparenței unui element. Animația este creată în două etape: mai întâi, trebuie să setați starea inițială de transparență la 1 - adică opacitatea completă, apoi să specificați valoarea acesteia pe mouse-ul peste - 0,6:
Fade (opacitate: 1;) .fade: hover (opacitate: 0,6;)
Pentru rezultatul opus, schimbați valorile:
5. Creșteți
Pentru a face blocul să crească la hover, vom folosi proprietatea de transformare și o vom seta la scară (1.2). În acest caz, blocul va crește cu 20 la sută, menținându-și proporțiile:
Crește: hover (-webkit-transform: scară (1.2); -ms-transform: scară (1.2); transform: scară (1.2);)
6. Scăderea
Micșorarea unui element este la fel de ușor ca și mărirea acestuia. Dacă în al cincilea paragraf, pentru a crește scara, trebuia să specificăm o valoare mai mare decât 1, atunci pentru a reduce blocul, specificăm pur și simplu o valoare care va fi mai mică de unu, de exemplu, scara (0,7). Acum, la trecerea mouse-ului, blocul se va micșora proporțional cu 30 la sută din dimensiunea sa inițială:
Micșorare: hover (-webkit-transform: scară (0,7); -ms-transform: scară (0,7); transform: scară (0,7);)
7. Transformarea în cerc
Una dintre animațiile utilizate în mod obișnuit este un element dreptunghiular care se transformă într-un cerc la hover. Folosind proprietatea border-radius CSS asociată cu: hover și tranziție, acest lucru poate fi realizat fără probleme:
Cerc: hover (raza-chenar: 70%;)
8. Rotire
O opțiune amuzantă de animație este să rotiți un element cu un anumit număr de grade. Pentru a face acest lucru, avem nevoie din nou de proprietatea de transformare, dar cu o valoare diferită - rotateZ (20deg). Cu acești parametri, blocul va fi rotit cu 20 de grade în sensul acelor de ceasornic în jurul axei Z:
Rotire: hover (-webkit-transform: rotireZ (20deg); -ms-transform: rotireZ (20deg); transformare: rotireZ (20deg);)
9.3D umbră
Designerii nu sunt de acord dacă acest efect este adecvat pentru designul plat. Cu toate acestea, această animație CSS3 este foarte originală și este folosită și pe paginile web. Vom obține un efect tridimensional utilizând proprietățile deja familiare box-shadow (vom crea o umbră cu mai multe straturi) și vom transforma cu parametrul translateX (-7px) (va oferi o deplasare orizontală a blocului la stânga cu 7 pixeli). ):
Trei: trece cu mouse-ul (box-shadow: 1px 1px # 53ea93, 2px 2px # 53ea93, 3px 3px # 53ea93, 4px 4px # 53ea93, 5px 5px # 53ea93, 6px 6px # 53ea93, 6px 6px # 53ea93; -7px); transforma: translateX (-7px);)
Suport pentru browser
Proprietatea de tranziție este acceptată în prezent de următoarele browsere:
| Browsere desktop | |
|---|---|
| Internet Explorer | Sprijinit de IE 10 și mai sus |
| Crom | Acceptat de la versiunea 26 (până la versiunea 25 funcționează cu prefixul -webkit-) |
| Firefox | Suportat începând cu versiunea 16 (în versiunile 4-15 funcționează cu prefixul -moz-) |
| Operă | Suportat începând cu versiunea 12.1 |
| Safari | Suportat începând cu versiunea 6.1 (în versiunile 3.1-6 funcționează cu prefixul -webkit-) |
Restul proprietăților utilizate în aceste exemple, cum ar fi transform, box-shadow etc., sunt, de asemenea, acceptate de aproape toate browserele moderne. Cu toate acestea, dacă veți folosi aceste idei pentru proiectele dvs., vă recomandăm insistent să verificați din nou compatibilitatea între browsere.
Sperăm că aceste exemple de animație CSS3 v-au fost utile. Vă dorim succes creativ!
