Animație CSS atunci când treceți cu mouse-ul peste o imagine. Creați efecte de hover originale folosind CSS3. Efectul CSS la hover

Dacă vă place efectul, atunci puteți pur și simplu să copiați codul terminat și să îl utilizați!

Dă viață site-ului tău!

Diferite efecte de hover pot adăuga prospețime paginilor site-ului dvs. Anterior, pentru orice efect trebuia să te ocupi de javascript, dar astăzi, după apariția tehnologiei CSS3, totul se poate face fără a folosi javascript.

Exemplele de astăzi sunt toate implementate și optimizate pentru noile browsere moderne și cu siguranță vor funcționa în ele (de exemplu, în Mozilla sau browserele din familia WebKit). Nu vă putem asigura că va funcționa în IE, dar în cele mai recente versiuni efectele vor funcționa cu siguranță așa cum ar trebui. Dar nu uitați că pentru fiecare efect a fost pregătită o opțiune de rollback atractivă în cazul în care browserul încă nu acceptă efectul.

01. Zoom

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, când treceți cursorul mouse-ului, acest parametru este eliminat. Să presupunem că setarea marginii începe de la 15 pixeli, iar la trecerea cu mouse-ul devine 2 pixeli, ceea ce face ca imaginea să pară să sară. De asemenea, puteți utiliza pur și simplu acest efect cu text, chiar dacă legăturile sunt poziționate pe verticală și nu pe orizontală.

Tranziția aici poate fi setată la discreția dvs., 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 fler efectului.

Bump Up Effect Cod 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 cursorul mouse-ului peste lista de link-uri, fiecare imagine se extinde încet și apoi revine la dimensiunea inițială.

Pentru implementare aici, au fost folosite imagini de 400x133 pixeli. Au fost apoi redimensionate la 300x100 pixeli folosind CSS și extinse la trecerea cu mouse-ul. Deoarece în exemplu întreaga listă este aliniată la centru, 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

/*Exemplu 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 în care treci cu mouse-ul peste un articol și 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 color: transparent și line-height: 0px au fost adăugați la div. Acest lucru ne-a permis să plasăm textul de-a lungul marginii de sus a div-ului și să-l ascundem cu totul.

Pentru a face 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 apare din nou. Efect foarte amuzant și ușor.

Fade Text In Effect Cod CSS

#ex3 (
latime: 730px;
înălțime: 133px;
înălțimea liniei: 0px;
culoare: transparent;
dimensiunea fontului: 50px;
familie de fonturi: „Helvetica Neue-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 ar fi grozav pentru o galerie de miniaturi. Pentru a începe, 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ă merită să luați în considerare revenirea pentru mai multe versiuni anterioare browsere. Galeria noastră va folosi tranziții, transformări și umbre blocate, totuși, la cererea dvs. Transformarea va fi responsabilă pentru rotirea imaginii, iar tranzițiile vor fi responsabile pentru efectul moale și neted.

Aici puteți folosi pseudo-selectori.

Cod CSS pentru Crooked Photo

#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 greu de implementat, așa că a trebuit să-l refacem puțin pentru a obține un efect decent. Poziția implicită a imaginii este ușor transparentă. Apoi, când treceți cu mouse-ul peste imagine, nivelul de transparență este scăzut și imaginea revine la aspectul inițial, împreună cu o ușoară strălucire și reflexie (numai browserele WebKit).

Din păcate, reflexia nu este tocmai o tranziție, așa că apare imediat, chiar dacă restul conținutului apare cu încetinitorul.

Dacă sunteți confuz cu privire la reflectarea CSS, puteți citi mai multe despre el în acest articol (David Walsh).

Fade In și reflectă codul 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 altor cititori despre asta.

• Traducere

Puterea CSS3 este enormă și în acest tutorial vei vedea cum să-l folosești creativ. Vom crea câteva efecte de trecere cu mouse-ul folosind tranziții CSS3. Trecând cu mouse-ul peste o miniatură, se va afișa o descriere a miniaturilor, folosind stiluri diferite în fiecare exemplu.

Vă rugăm să rețineți că aceste exemple vor funcționa corect numai în browserele moderne care acceptă proprietăți CSS3.

Marcaj HTML

Structura de marcare este foarte simplă și intuitivă. Creați un container care va conține imaginea și orice alte informații, cum ar fi titlul, descrierea etc.

În interiorul blocului cu clasa de vizualizare vom insera un element cu clasa masca, care va fi responsabil pentru efectele noastre CSS3, în interiorul acestuia vom plasa titlul, descrierea și linkul către imaginea completă. (Pentru unele exemple, va trebui să adăugăm mască ca element separatși includeți descrierea într-un div cu o clasă de conținut.)

CSS

După crearea markupului, ne vom crea stilurile.

Vom instala reguli generale pentru stilurile noastre, iar apoi vom adăuga clase speciale cu efectele dorite. În acest articol vom omite prefixele CSS pentru browsere diferite, dar le puteți vedea în surse.
.view ( lățime: 300px; înălțime: 200px; margine: 10px; float: stânga; chenar: 10px solid #fff; overflow: ascuns; poziție: relativă; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: implicit; fundal: #fff url(../images/bgimg.jpg) centru centru fără repetare) .view .mask, .view .content ( lățime: 300px; înălțime: 200px; poziție: absolut; overflow: ascuns ; sus: 0; stânga: 0 ) .view img ( afișare: bloc; poziție: relativ ) .view h2 ( text-transform: majuscule; culoare: #fff; text-align: center; poziție: relativ; font-size: 17px; padding: 10px; fundal: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0 ) .view p ( font-family: Georgia, serif; font-style: italic; font-size: 12px; poziție: relativă; culoare: #fff; umplutură: 10px 20px 20px; text-align: center ) .view a.info (afișare: inline-block; text-decor: niciunul; padding: 7px 14px; fundal: #000; culoare : #fff; text-transform: majuscule; box-shadow: 0 0 1px #000 ) .view a.info:hover (box-shadow: 0 0 5px #000 )
Acum ne vom uita la zece efecte.

Exemplul 1

Să adăugăm o clasă specială view-first elementului cu clasa view pentru acest efect. Vom adăuga o clasă specială pentru fiecare instanță a elementului de vizualizare (view-first, view-second, view-third etc.).

În primul exemplu, vom folosi doar câteva tranziții de bază pentru a crea un efect de hover frumos:
.view-first img (tranziție: toate 0.2s liniare; ) .view-first .mask (opacitate: 0; culoare de fundal: rgba(219,127,8, 0.7); tranziție: toate 0.4s ease-in-out; ) .view-first h2 ( transform: translateY(-100px); opacitate: 0; tranziție: toate 0,2s ease-in-out; ) .view-first p ( transform: translateY(100px); opacitate: 0; tranziție: toate 0.2s liniar; ) .view-first a.info( opacitate: 0; tranziție: toate 0.2s ease-in-out; )
Și acum cea mai interesantă parte a efectului nostru. Când mutam cursorul peste o imagine, putem folosi proprietatea delay pentru a simula o animație simplă. Întârzierea de tranziție pe care o folosim la hover poate fi modificată pentru a fi diferită de clasa normală. În acest exemplu, nu am folosit nicio întârziere în clasa normală, dar am adăugat o întârziere la hover care va întârzia ușor efectul de tranziție.
.view-first:hover img ( transform: scale(1.1); ) .view-first:hover .mask ( opacitate: 1; ) .view-first:hover h2, .view-first:hover p, .view-first :hover a.info ( opacitate: 1; transform: translateY(0px); ) .view-first:hover p ( întârziere tranziție: 0,1 s; ) .view-first: hover a.info ( întârziere tranziție: 0,2 s; ;)

Exemplul 2

În cel de-al doilea exemplu, vom adăuga o vizualizare specială-a doua clasă, dar vom lăsa elementul cu clasa de mască gol și vom include descrierea într-un div cu clasa de conținut.

Aici clasa masca va avea diverse atribute, în special vom aplica proprietatea de transformare (translate și rotire). Elementele de descriere vor fi mutate astfel încât să le putem muta împreună la hover:
.view-second img (tranziție: toate 0.2s ease-in; ) .view-second .mask (culoare de fundal: rgba(115.146.184, 0.7); lățime: 300px; umplutură: 60px; înălțime: 300px; opacitate: 0; transform: translate(265px, 145px) rotate(45deg); tranziție: toate 0,2 s ease-in-out; ) .view-second h2 (chenar-jos: 1px rgba solid (0, 0, 0, 0,3); fundal: transparent; margine: 20px 40px 0px 40px; transformare: translate(200px, -200px); tranziție: toate 0.2s ease-in-out; ) .view-second p ( transform: translate(-200px, 200px); tranziție: toate 0,2 s ease-in-out; ) .view-second a.info ( transform: translate(0px, 100px); tranziție: toate 0,2s 0,1s ease-in-out; )
Pentru efectul nostru de hover, folosim o transformare de traducere pentru a ne muta elementele la locul lor. se va roti și masca. Elementele de descriere se vor muta cu o ușoară întârziere:
.view-second:hover .mask ( opacitate:1; transform: translate(-80px, -125px) rotate(45deg); ) .view-second:hover h2 ( transform: translate(0px,0px); transition-delay: 0.3s; ) .view-second:hover p ( transform: translate(0px,0px); transition-delay: 0.4s; ) .view-second:hover a.info ( transform: translate(0px,0px); transition- întârziere: 0,5 s;)

Exemplul 3

În cel de-al treilea exemplu vom folosi transformarea translate și rotate:
.view-third img (tranziție: toate 0.2s ease-in; ) .view-third .mask (culoare de fundal: rgba(0,0,0,0.6); opacitate: 0; transform: translate(460px, -100px) ) rotiți(180deg); tranziție: toate 0,2s 0,4s ease-in-out; ) .view-third h2( transform: translateY(-100px); tranziție: toate 0,2s ease-in-out; ) .view-third p ( transform: translateX(300px) rotate(90deg); tranziție: toate 0,2s ease-in-out; ) .view-third a.info ( transform: translateY(-200px); tranziție: toate 0,2s ease-in- afara;)
Acest instructiuni simple, care va fi aplicat la hover. Acum vom inversa descrierea elementului setând întârzierea tranziției în consecință:
.view-third:hover .mask ( opacitate: 1; întârziere tranziție: 0s; transform: translate(0px, 0px); ) .view-third:hover h2 ( transform: translateY(0px); întârziere tranziție: 0,5s ; ) .view-third:hover p ( transform: translateX(0px) rotate(0deg); transition-delay: 0,4s; ) .view-third:hover a.info ( transform: translateY(0px); transition-delay: 0,3s;)

Exemplul 4

În al patrulea exemplu, vom efectua o simplă reducere a imaginii și o rotire a conținutului nostru, totul datorită transformării la scară. Vom seta întârzierea de tranziție la 0,2 pentru stilurile de imagine, dar la trecerea cursorului o vom schimba la 0s. Aceasta va începe animația imediat când mouse-ul este plasat, dar o va întârzia când cursorul se va îndepărta.
.view-fourth img (tranziție: toate 0,4s ease-in-out 0,2s; opacitate: 1; ) .view-fourth .mask (culoare fundal: rgba(0,0,0,0.8); opacitate: 0; transform: scale(0) rote(-180deg); tranziție: toate 0,4s ease-in; chenar-radius: 0px; ) .view-fourth h2( opacitate: 0; chenar-bottom: 1px solid rgba(0, 0, 0, 0,3); fundal: transparent; margine: 20px 40px 0px 40px; tranziție: toate 0,5 s ease-in-out; ) .view-fourth p ( opacitate: 0; tranziție: toate 0,5 s ease-in-out; ) .view-fourth a.info ( opacitate: 0; tranziție: toate 0.5s ease-in-out; )
Acestea sunt instrucțiunile pentru a obține acest efect - puteți face orice cu CSS3 :).
.view-fourth:hover .mask ( opacitate: 1; transform: scale(1) rotate(0deg); transition-delay: 0,2s; ) .view-fourth:hover img ( transform: scale(0); opacitate: 0 ; întârziere tranziție: 0s; ) .view-fourth:hover h2, .view-fourth:hover p, .view-fourth:hover a.info( opacitate: 1; întârziere tranziție: 0,5s; )

Exemplul 5

În acest al cincilea exemplu, vom folosi proprietatea translate împreună cu funcția de tranziție-timing-ease-in-out pentru a muta conținutul în partea stângă.
.view-fifth img (tranziție: toate 0.3s ease-in-out; ) .view-fifth .mask (culoare de fundal: rgba(146,96,91,0.3); transform: translateX(-300px); opacitate: 1; tranziție: toate 0.4s ease-in-out; ) .view-fifth h2( fundal: rgba(255, 255, 255, 0.5); culoare: #000; box-shadow: 0px 1px 3px rgba(159, 141) , 140, 0,5); ) .view-fifth p( opacitate: 0; culoare: #333; tranziție: toate 0,2s liniare; )
Efectul de hover va muta imaginea la dreapta, iar descrierea va apărea în partea stângă, ca și cum ar fi mutat imaginea:
.view-fifth:hover .mask ( transform: translateX(0px); ) .view-fifth:hover img ( transform: translateX(300px); transition-delay: 0,1s; ) .view-fifth:hover p( opacitate: 1; întârziere de tranziție: 0,4s; )

Exemplul 6

În acest exemplu, vom face descrierea să apară în față, redimensionăm imaginea la Dimensiunea originală(scala de la 10 la 1). Un buton „citește mai mult” va apărea în partea de jos (traduce).
.view-sixth img (tranziție: toate 0,4 s ease-in-out 0,5 s; ) .view-sixth .mask( culoare de fundal: rgba(146,96,91,0,5); opacitate: 0; tranziție: toate 0,3 s ease-in 0,4s; ) .view-sixth h2( opacitate: 0; chenar-jos: 1px rgba solid (0, 0, 0, 0,3); fundal: transparent; margine: 20px 40px 0px 40px; transformare: scară( 10); tranziție: toate 0.3s ease-in-out 0.1s; ) .view-sixth p ( opacitate: 0; transformare: scară (10); tranziție: toate 0.3s ease-in-out 0.2s; ) .view -al șaselea a.info ( opacitate: 0; transformare: translateY(100px); tranziție: toate 0,3 s ease-in-out 0,1 s; )
Tranziția de întoarcere va fi amânată, astfel încât să pară lină:
.view-sixth:hover .mask ( opacitate:1; întârziere tranziție: 0s; ) .view-sixth:hover img (întârziere tranziție: 0s; ) .view-sixth:hover h2 ( opacitate: 1; transformare: scară (1); întârziere tranziție: 0,1 s; ) .view-sixth:hover p ( opacitate:1; transformare: scară(1); întârziere tranziție: 0,2s; ) .view-sixth:hover a.info ( opacitate :1; transformare: translateY(0px); întârziere tranziție: 0,3s; )

Exemplul 7

În al șaptelea exemplu, ideea este să rotiți imaginea în centru și să o mutați în depărtare. Apoi va apărea descrierea, ascunzând imaginea rotativă în spatele ei.
.view-seventh img( tranziție: toate 0,5 s ease-out; opacitate: 1; ) .view-seventh .mask (culoare de fundal: rgba(77,44,35,0.5); transform: rotate(0deg) scale( 1); opacitate: 0; tranziție: toate 0,3s ease-out; transform: translateY(-200px) rote(180deg); ) .view-seventh h2( transform: translateY(-200px); tranziție: toate 0,2s ease- in-out; ) .view-seventh p ( transform: translateY(-200px); tranziție: toate 0.2s ease-in-out; ) .view-seventh a.info ( transform: translateY(-200px); tranziție: toate 0,2 s ușurință de intrare-ieșire; )
La trecerea cursorului vom adăuga o întârziere elementelor de descriere. Acest lucru ne va permite să vedem imaginea care se rotește înainte ca descrierea să ascundă imaginea. În tranziția inversă, totul va dispărea imediat și vom vedea imaginea rotindu-se în direcția opusă:
.view-seventh:hover img( transform: rotate(720deg) scale(0); opacitate: 0; ) .view-seventh:hover .mask ( opacitate: 1; transform: translateY(0px) rotate(0deg); tranziție- întârziere: 0,4 s; ) .view-seventh:hover h2 ( transformare: translateY(0px); întârziere tranziție: 0,7s; ) .view-seventh:hover p ( transformare: translateY(0px); întârziere tranziție: 0,6s ; ) .view-seventh:hover a.info ( transform: translateY(0px); întârziere tranziție: 0,5s; )

Exemplul 8

În al optulea exemplu vom folosi animația și vom recrea efectul de săritură. Descrierea va coborî din partea de jos și va reveni pe marginea de jos.
.view-eighth .mask (culoare de fundal: rgba(255, 255, 255, 0,7); sus: -200px; opacitate: 0; tranziție: toate 0,3s ease-out 0,5s; ) .view-eighth h2( transform : translateY(-200px); tranziție: toate 0.2s ease-in-out 0.1s; ) .view-8 p (culoare: #333; transform: translateY(-200px); tranziție: toate 0.2s ease-in-out 0.2s; ) .view-eighth a.info ( transform: translateY(-200px); tranziție: toate 0.2s ease-in-out 0.3s; )
Vom adăuga o animație elementului mască și vom defini câteva setări de întârziere pentru elementele de descriere:
.view-eighth:hover .mask ( opacitate: 1; sus: 0px; întârziere tranziție: 0s; animație: bounceY 0,9s liniar; ) .view-eighth:hover h2 ( transform: translateY(0px); întârziere tranziție: 0.4s; ) .view-eighth:hover p ( transform: translateY(0px); transition-delay: 0.2s; ) .view-eighth:hover a.info ( transform: translateY(0px); transition-delay: 0s; )
Pentru a recrea efectul de respingere real, vom folosi translateY, după cum puteți vedea, există mai multe cadre care creează acest efect:
@keyframes bounceY ( 0% ( transform: translateY(-205px);) 40% ( transform: translateY(-100px);) 65% ( transform: translateY(-52px);) 82% ( transform: translateY(-25px) ;) 92% ( transform: translateY(-12px);) 55%, 75%, 87%, 97%, 100% ( transform: translateY(0px);) )

Exemplul 9

În acest exemplu, vom folosi două elemente de mască pentru a le muta din colțurile din dreapta jos și din stânga sus:

Elementele masca vor avea valori diferite de translație și de la origine. Vom indica, de asemenea, că unul este aliniat la marginea de sus, iar celălalt la partea de jos:
.view-ninth .mask-1,.view-ninth .mask-2( culoarea fundalului: rgba(0,0,0,0.5); înălțime: 361px; lățime: 361px; fundal: rgba(119,0,36) ,0,5); opacitate: 1; tranziție: toate 0,3 s ease-in-out 0,6 s; ) .view-9th .mask-1 ( stânga: automat; dreapta: 0px; transformare: rotire(56,5deg) translateX(-180px) ); transform-origin: 100% 0%; ) .view-ninth .mask-2 (sus: automat; jos: 0px; transform: rotate(56.5deg) translateX(180px); transform-origin: 0% 100%; ) .view-9th .content( fundal: rgba(0,0,0,0.9); înălțime: 0px; opacitate: 0,5; lățime: 361px; overflow: ascuns; transformare: rotire(-33,5deg) translate(-112px, 166 px); origine-transformare: 0% 100%; tranziție: toate 0,4 s ease-in-out 0,3 s; .view-ninth h2( fundal: transparent; margin-sus: 5px; margine-bottom: 1px solid rgba( 255,255,255,0,2); .view-al noua a.info (afișare: niciunul; )
Când trecem cu mouse-ul, vom face ca conținutul să apară de sub două elemente de mască care se deplasează spre centru:
.view-ninth:hover .content( înălțime: 120px; lățime: 300px; opacitate: 0,9; sus: 40px; transform: rotate(0deg) translate(0px,0px); ) .view-ninth:hover .mask-1, .view-ninth:hover .mask-2( întârziere de tranziție: 0s; ) .view-ninth:hover .mask-1( transform: rotate(56.5deg) translateX(1px); ) .view-ninth:hover .mask -2 ( transformare: rotire(56,5deg) translateX(-1px); )
Am configurat întârzierea de tranziție pentru elementele măștii, astfel încât atunci când trecem cu mouse-ul, tranziția are loc instantaneu, dar când mouse-ul se îndepărtează, va exista o întârziere mai mare.

Exemplul 10

În ultimul exemplu, vom mări imaginea și apoi o vom ascunde, aducând descrierea în față. Putem face acest lucru utilizând o transformare la scară și ajustând nivelul de transparență:
.view-zecea img (transformare: scaleY(1); tranziție: toate 0.7s ease-in-out; ) .view-zecea .mask (culoare de fundal: rgba(255, 231, 179, 0.3); tranziție: toate 0,5s liniar; opacitate: 0; ) .view-zecea h2( chenar-jos: 1px solid rgba(0, 0, 0, 0,3); fundal: transparent; margine: 20px 40px 0px 40px; transformare: scară(0); culoare: #333; tranziție: toate 0,5 s liniare; opacitate: 0; ) .view-zecea p (culoare: #333; opacitate: 0; transformare: scară (0); tranziție: toate 0,5 s liniară; ) .view- a zecea a.info ( opacitate: 0; transformare: scară (0); tranziție: toate 0,5 s liniare; )
Când trecem cu mouse-ul, pur și simplu scalam imaginea, dar de ce o ascundem reducându-i transparența la 0:
.view-tenth:hover img ( transform: scale(10); opacitate: 0; ) .view-tenth:hover .mask ( opacitate: 1; ) .view-tenth:hover h2, .view-tenth:hover p, .view-tenth:hover a.info( transform: scale(1); opacitate: 1; )

Concluzie

CSS3 are un potențial foarte mare pentru a crea efecte frumoase. În curând, sperăm, vom putea să evităm utilizarea JavaScript pentru a crea efecte simple și să ne bazăm 100% pe CSS, în toate browserele.

Sper că v-au plăcut aceste experimente, dar mai ales sper că vă vor inspira să vă creați propriile efecte.

P.S. Acest articol este o continuare logică a articolului de la Mary Lou

Etichete: Adăugați etichete

În primul rând, pentru cei care nu sunt încă complet în subiect sau deloc în subiect, voi explica pe scurt ce este hover-. Acestea sunt diferite tipuri de efecte (subtitrări pop-up, sfaturi cu instrumente, tranziții netede, transformare, rotație, mărire, deplasare etc., etc.) aplicate elementelor site-ului de pe ele cu cursorul mouse-ului. Acestea pot fi implementate fie folosind diverse plugin-uri jQuery, fie în pur.
Astăzi am pregătit o selecție largă de efecte originale de trecere cu mouse-ul pentru imaginile 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 uită-te la exemple și, dacă este necesar, folosește-l pe cel care îți place pe site-ul tău. Toate efectele prezentate în recenzie sunt furnizate cu un exemplu demonstrativ și documentație detaliată cu codurile sursă. Manualele sunt în mare parte în limbaj burghez, dar totul este mai mult sau mai puțin intuitiv.

Aș dori să vă atrag imediat atenția asupra faptului că toate aceste exemple vor funcționa corect numai în browserele moderne care acceptă proprietăți CSS3.

Pentru a nu strica imaginea de ansamblu, nu am distorsionat denumirile efectelor cu traducerea automată (cu excepția unora), am lăsat titlurile originale așa cum le-a numit dezvoltatorul.

Un efect foarte interesant atunci când treceți cu mouse-ul peste imagini în miniatură, folosind linii fine în design și tipografie. Mai multe tipuri diferite de efecte pentru apariția subtitrărilor imaginii, transformări 3D moi și neintruzive și tranziții netede ale pseudo-elementelor. Funcționează numai în browserele moderne.

iHover este o colecție impresionantă de efecte pur CSS3 hover, cu suport Bootstrap 3. Construit pe 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ă creați corect marcajul HTML și să includeți fișierul CSS în lucrarea dvs.

Creează câteva efecte simple, dar elegante, pentru subtitrările imaginilor. Ideea este să plasați cursorul peste miniaturi pentru a face să apară titlul, numele autorului și butoanele de contact. 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 atunci când treceți cu mouse-ul și atât.

pentru miniaturile CSS3

Dezvoltatorul își poziționează lucrarea ca exemplu de galerie de imagini cu efecte de tranziție atunci când apar adnotări (legendele) pe miniaturi. Sprijin încrezător declarat browsere 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.

Următorul set Reguli CSS, pentru a crea efecte de transformare impresionante atunci când treceți cu mouse-ul peste miniaturile perfect rotunde. Pachetul conține 7 tipuri de tranziții CSS3, documentație foarte detaliată despre configurare și utilizare. Efectele sunt acceptate de toate browserele moderne.

Rotiți miniaturile la trecerea cursorului

Un simplu efect de rotire a miniaturilor rotunde atunci când treceți cursorul mouse-ului peste ele, cam la fel puteți vedea pe blogul meu, în anunțurile postărilor de pe pagina principală. Implementat cu câteva linii de cod CSS.

Tradus literal: „Efect sexual atunci când treci cu mouse-ul deasupra”. Desigur, este puțin probabil să observați ceva atât de sexy în acest efect, cu excepția cazului în care aveți o imaginație sălbatică, dar efectul este interesant în felul său și merită să îi acordați atenție.

Cinci efecte diferite pentru imagini când treci cu mouse-ul peste ele. Semnături 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. Poziții diferite la apariție și efecte de tranziție, un design destul de standard. Pentru a înțelege cum funcționează animația, aruncați o privire la sursă Nu am găsit nicio pagină demonstrativă sau documentație separată.

Galerii miniaturale dispuse in grila cu diverse efecte pentru aparitia semnaturii, rotatie, dezvoltare, pop-up etc. Documentația despre utilizare și configurare este destul de rară, dar dacă doriți cu adevărat, vă puteți da seama.

Acest efect nu este nimic special, o schimbare banală a luminozității imaginilor atunci când treceți cu mouse-ul, cu excepția faptului că au fost adăugate elemente de animație. Va trebui să vă dați seama singuri detaliile implementării prin stabilirea codului sursă al demo-ului.

Un alt set de 10 efecte de trecere cu mouse-ul pentru imagini, diverse modificări ale miniaturilor la trecerea cu mouse-ul, mărire, rotație, rotație, întunecare etc.

Diverse efecte de animație a cadrelor din jurul imaginilor arată destul de atractiv, există un manual detaliat pentru configurarea și utilizarea acestuia.

Efectele de trecere cu mouse-ul CSS3 originale utilizate pentru apariția eficientă a subtitrărilor în miniaturile imaginii atunci când sunt plasate. Setul de reguli CSS include 10 efecte diferite pe care le puteți utiliza separat pentru imagini diferite. Efectele sunt cu adevărat impresionante, mai ales având în vedere că totul a fost realizat folosind CSS3. 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 text și se transformă într-o altă formă la trecerea mouse-ului. În felul acesta poți face multe opțiuni diferite, în exemplu, sunt prezentate trei tipuri de efecte de tranziție. Avantajul utilizării SVG este că putem redimensiona formularul pentru a se potrivi cu dimensiunea containerului părinte.

Imagini de alunecare

Esența acestui efect este că imaginea se mișcă în sus și în jos pentru a face să apară legenda. Dacă lucrați cu parametrii de stil, cred că puteți obține niște efecte destul de drăguțe, dar, implicit, totul pare foarte simplu.

Cu acest efect, totul este simplu, subtitrările pentru imagini alunecă în partea dreaptă sus sau în stânga jos, sub forma unei panglici cu o culoare translucidă. fundal întunecat, totul este foarte simplu reformatat folosind proprietăți css.

O soluție interesantă: miniaturile sunt prezentate într-o formă întunecată; când treceți cu mouse-ul peste ele, imaginile apar și semnătura apare pe un fundal deschis.

Legenda pentru imagine apare 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 un efect de mărire combinat cu efectul animat al apariției subtitrărilor pentru miniaturile imaginilor.

Un exemplu de creare a unui efect de diapozitiv vizual pentru afișarea subtitrărilor 3D pentru imagini folosind numai CSS3 și HTML5.

6 Subtitrări pentru imagini

6 Opțiuni pentru apariția subtitrărilor de imagini pop-up la trecerea cu mouse-ul folosind CSS3. O lecție detaliată despre implementare și configurare, surse disponibile pentru descărcare.

Și, în cele din urmă, 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:.

Vrei să începi să lucrezi la crearea unui site web cât mai repede posibil? Acum este absolut posibil! Din simplul motiv că TemplateMonster a apărut pe piață noua sectiune Cu . Colecția va fi completată, dar și acum poți deja să cauți ceva potrivit pentru proiectul tău online. Tot ce trebuie să faci este să-ți alegi idealul soluție gata făcutăși lucrează cu prezentarea informațiilor necesare. Și nu uitați că textul pentru șablon a fost scris de mână.

Cu tot respectul, Andrew

Postarea conține o selecție de diverse efecte și animații CSS care pot fi utile în munca ta și, de asemenea, vor elimina nevoia de a recurge constant la JavaScript. Exemplele s-ar putea să nu fie cele mai noi sau mai neobișnuite, dar, în opinia mea, sunt utile.

1. Ceas CSS3 cu jQuery

Acest ceas este creat folosind unul dintre instrumentele principale CSS3 - rotiți și conectați biblioteca JQuery.

2. Ceas analogic CSS

Ceasuri mai clasice, analogice. Acestea sunt create folosind 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 pe părțile laterale ale cubului se va face cu tastele standard „sus”, „jos”, „stânga” și „dreapta”. Figura 3D în sine este construită folosind webkit-perspective, -webkit-transform și -webkit-transition.

4. Mai multe cuburi 3D retractabile

Există deja câteva cuburi 3D prezentate aici care folosesc CSS3 și proprietățile de transformare și tranziție direct. Plasarea cursorului peste cub face ca acesta să se deplaseze în lateral, dezvăluind textul care se află pe cealaltă parte a formei.

5. Meniul acordeonului

Efectul de meniu acordeon se bazează pe CSS pur, unde făcând clic pe fiecare linie se deschide o fereastră suplimentară în corpul listei în sine. Animație personalizată în browsere activate Baza WebKit.

6. Defilare Parallax cu CSS

Aceasta este o defilare automată animată cu paralaxă folosind CSS Tranziții bazate pe WebKit. Când treceți cu mouse-ul peste fereastra 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. Exemplul arată cum să recreați aproximativ aceeași animație uimitoare (ecran negru cu numere care rulează) în CSS3.

8. Palaroidii dinamici

În acest exemplu, se realizează descriere detaliata creați fotografii animate pe baza comenzilor CSS3. Când faceți clic pe o imagine, aceasta se mărește și se mută în prim-plan.

9. Scalare imagini

În acest exemplu, imaginile pur și simplu se măresc la trecerea cu mouse-ul. Un efect simplu, dar uneori foarte util.

10. Efecte JavaScript pe CSS3

Ca alternativă la JavaScript, postarea sugerează șapte efecte CSS3: diverse blocuri care se rotesc, dispar, se mută, cresc etc.

11. DJ Hero înregistrări virtuale

Această postare explică cum să creezi înregistrări rotative. Viteza de rotație poate fi reglată direct pe ecran.

12. Vinil glisant

Efectul de alunecare al discului de vinil este creat folosind tranziții CSS3 și HTML. O astfel de animație dă viață unei pagini web, adaugă originalitate unei coperți standard de album etc.

13. Efecte când treceți cu mouse-ul peste o imagine

Când treceți cursorul peste o imagine, aceasta se poate muta în lateral, se poate învârti, se micșora, 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. Acesta este un exemplu de straturi rotative (mai vizibile atunci când micșorați în browser).

16. „Las Meninas” în 3D

Un efect CSS interesant care face ca faimoasa pictură de Diego Velazquez „Las Meninas” să pară tridimensională.

17. CSS pentru Mac OS X

În partea de jos a ecranului este un set de pictograme principale pentru Mac OS X, care se măresc atunci când treceți cu mouse-ul deasupra. Efectul adaugă dinamică site-ului.

18. Drop-In Modali

Efectele CSS3 și proprietățile Drop-In Modals vă vor ajuta să creați modificări rapide, animate și simple ferestre modale.

19. Animarea obiectelor

Transformarea se schimbă aspect element din browser. Afișat folosind exemplul unei rachete care „zboară” de la un capăt la altul al ecranului. Pot fi folosite instrumente de mutare, rotire etc.

20. Ceas colorat

Color Clock se bazează pe jQuery și CSS3. Un efect similar va fi util în contextul așteptării finalizării unor competiții, vot și altele asemenea.

21. Lightbox Gallery cu jQuery și CSS3

Aceasta este o galerie minunată care vă permite să sortați și să aranjați imaginile în ordine aleatorie. Pentru interactivitate, galeria folosește JQuery, JQuery UI și Plugin JQuery Cutie atragatoare. Lightbox acceptă titlul și descrierea imaginilor, le grupează și aranjează automat diapozitivele pe rând.

22. Previzualizări „elastice”.

Măriți previzualizările imaginii la trecerea cursorului. Astfel, atunci când dai clic, meniul crește proporțional.

23. Carduri dinamice

Acest exemplu reprezintă set dinamic carduri folosind funcții HTML și CSS3.

24. Meniul glisant JQuery

Exemplul de meniu glisant este creat folosind o combinație de CSS3 și JQuery. Când treceți cu mouse-ul peste imagine, apare o fereastră pop-up cu text.

25. File CSS

În exemplu, trecerea mouse-ului peste anteturile filelor face ca lista de mai jos să se modifice.

26. Meniu Fisheye

Exemplul demonstrează cum să creați un meniu Fisheye utilizând animația CSS și SVG. La fel de bonus suplimentar SVG demonstrativ folosit în eticheta IMG.

27. Meniu derulant

Acest tip oferă o navigare foarte convenabilă prin meniul principal, datorită utilizării tranzițiilor CSS3.

28. Credite Star Wars

Credite celebre din Star Wars. HTML și CSS vor fi suficiente pentru a le rula.

29. Mai multe efecte Fisheye pe CSS

Din nou, pictograme care cresc atunci când treceți cu mouse-ul deasupra.

30. Animație cadru cu cadru

Sunt posibile mai multe opțiuni demonstrative.
În primul exemplu, pentru a asigura o schimbare a cadrului, trebuie să faceți clic pe imagine. Fiecare clic este o mișcare. Cadrele se repetă, creând o anumită buclă.
În al doilea exemplu, pentru a schimba cadre, trebuie doar să mutați cursorul peste imagine. În consecință, viteza de animație va depinde de viteza de mișcare a mouse-ului.

31. Imperial AT-AT Walker

Încă o dată Star Wars - acest plimbător AT-AT în mișcare este realizat folosind CSS3.

32. Un alt acordeon CSS

Când faceți clic pe un rând, tabelul se extinde.

33. Meniu glisant simplu

40. Meniu derulant
O altă opțiune pentru un meniu derulant simplu și frumos folosind CSS.

În această lecție continuăm să lucrăm cu CSS, vom implementa un efect frumos atunci când trecem cu mouse-ul peste o imagine unde se rotește ușor și se întunecă, iar în fundal apar un contur și titluri de text.

Efectul CSS descrie cadrul blocurilor pentru transformare

Descărcați șablonul pregătit, acesta conține două fișiere, Index în care este inclus CSS. Resetăm indentarea în CSS, setăm fontul și l-am conectat fundalul imagine. În folderul /img în sine există două fișiere, un fundal și o imagine exemplu.

Descriem toate blocurile care trebuie afișate pe pagină și le umplem cu conținut text.

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

Efectul CSS la hover

tranziție
scară de transformare (x,y)
:hover::inainte::dupa

Descriem principalele stiluri/efecte de imagine folosind CSS

Setăm blocul cu imaginea la o lățime și înălțime fixă ​​și, folosind overflow: hidden , ascundem tot ce nu este necesar în afara acestuia și adăugăm un cursor.

BlocImg (lățime: 600px; înălțime: 338px; overflow: ascuns; cursor: pointer; )

Pentru comoditate, poziționăm blocul în mijlocul ecranului.

Dws (poziție: absolut; sus: 50%; stânga: 50%; transformare: translate(-50%, -50%); )

Apoi facem imaginea 100% lată și adăugăm o animație netedă într-o jumătate de secundă.

BlocImg img (lățime: 100%; tranziție: .5s; )

Setați filtrul de estompare la 1 vârf. filtru: blur(1px) și întunecă fundalul, iar pentru aceasta adăugăm un fundal negru la clasa .blocImg, iar când trecem cu mouse-ul peste ea, facem imaginea în sine o opacitate pe jumătate transparentă: .5; .

Dws:hover .blocImg img ( transformare: rotire(-10deg) scară(1,3); filtru: blur(1px); opacitate: .5; )

Acum să începem să stilăm textul.

Formatarea conținutului text al blocului

Poziționați absolut blocul cu textul .blocText ca părinte și setați umplutura de-a lungul tuturor marginilor la 30 de pixeli. În viitor, vom face o apariție animată a cadrului.

BlocText (contur: 1px portocaliu continuu; poziție: absolut; sus: 30px; stânga: 30px; dreapta: 30px; jos: 30px; )

Pentru text, setați culoarea pe alb, faceți cu litere mari, setați căptușeală în jurul marginilor.

Text (culoare: #fff; text-transform: majuscule; umplutură: 0 20px; )

Al doilea nivel l-am stabilit la 25 de vârfuri.

Text h2 (dimensiunea fontului: 25px; )

Facem a doua parte din ea portocalie, punem indentări în partea de jos pentru linie și facem o subliniere cu 2 vârfuri.

Text h2 span (culoare: portocaliu; căptușeală-partea de jos: 3px; chenar-partea de jos: 2px solid #fff; )

Pozitionam paragraful absolut, il coboram cu 180 pixeli. setați lățimea blocului său la 250 pic. Adăugați din stânga marginea laterală la 4 p.m. și setați căptușelile interne.

Text p (poziție: absolut; sus: 180px; lățime: 250px; chenar-stânga: 4px solid #ffb611; umplutură: 0 10px; )

Descriem pseudo-elementele::inainte si::dupa

Să eliminăm conturul care a fost atribuit anterior clasei .blocText și să îl setăm pentru pseudo-elemente.

Creăm ::before ::după pseudo-elemente și descriem stilurile lor principale.

Le poziționăm absolut, setăm lățimea și înălțimea la 100% și aspectul plătit într-o jumătate de secundă.

BlocText::before, .blocText::after (conținut: ""; poziție: absolut; sus: 0; stânga: 0; lățime: 100%; înălțime: 100%; )

Separat ::înainte de a atribui un chenar în partea de sus și de jos a unui vârf. și setați transformarea pentru transformarea axei X: scale(0,1) .

BlocText::before ( chenar-sus: 1px solid #fff; chenar-jos: 1px solid #fff; transformare: scară(0,1); )

Facem același lucru pentru ::după ce doar chenarul este acum pe partea stângă și dreapta, iar transformarea este de-a lungul axei Y

BlocText::după (chenar-stânga: 1px solid #fff; chenar-dreapta: 1px solid #fff; transformare: scară(1,0); )

Și pentru aspectul lor, indicăm transformarea pentru toate axele la 1.

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

Și tot ce rămâne este să ascundem textul, pentru aceasta vom atribui opacitate: 0 clasei .text și vom adăuga aspectul său neted.

Și la hover afișăm textul.

Dws:hover .text ( opacitate: 1; )

În cele din urmă, avem Efecte Hover cool când trecem cu mouse-ul peste o imagine.

Dacă te-a interesat videoclipul, distribuie-l prietenilor tăi în rețelele socialeși nu uitați să comentați.

Lecția a fost pregătită de Denis Gorelov.