Deci, vom avea șase exemple diferite de semnături pentru imagini. Partea HTML a proiectului nostru arată astfel (extindeți pentru a vedea):
Toate stilurile pe care le salvăm într-un document separat style.css. pentru a nu încărca o pagină HTML. Nu uitați să includeți un link în interiorul etichetei
Să începem să creăm un stil CSS:
Să adăugăm câteva caracteristici comune pentru cutiile noastre și să plutim: lăsați să alinieze elementul la stânga, astfel încât cutiile rămase să se urmeze unul pe altul. Nu uitați de proprietatea de overflow cu valoarea ascunsă - datorită acestui fapt, tot ce se află în afara casetei va fi ascuns.
De asemenea, setați proprietatea de tranziție pentru toate imaginile:
Partea întâi
Acum să trecem la semnături: vor fi de asemenea aplicate anumite caracteristici comune și, bineînțeles, proprietatea de tranziție. În loc să utilizați parametrul de opacitate. ne amintim mai bine modelul de culoare RGBA, unde am setat canalul alfa pentru transparența culorii la 0.7. pentru a face fundalul semnării puțin transparent, fără a afecta textul:
Primul nostru exemplu, probabil, este unul dintre cele mai simple - semnătura fotografiei apare de jos în sus când mutați cursorul mouse-ului. Pentru aceasta, vom seta o înălțime fixă de 40px și poziția inferioară a elementului în -40px. astfel încât să fie ascuns sub imagine atunci când cursorul nu este poziționat:
În cea de-a doua variantă, semnătura coincide în lățime și înălțime cu imaginea - 200 × 200 px, și "frunze" de sus în jos:
În acest exemplu, vom lua în considerare efectul atenuării netede. Pentru starea inițială, setați transparența la opacitate zero:
Al patrulea titlu va "călători" dintr-o parte în alta:
Aici aplicăm efectul de rotație, în timp ce nu numai semnătura, dar și imaginea însăși vor fi rotite. Pentru a face acest lucru, trebuie să adăugăm proprietatea transformată. setarea valorii de întoarcere la -180deg:
În cel de-al doilea caz, folosim așa-numitul efect de scalare. Și dacă în versiunile anterioare ale textului apărea simultan cu fundalul, acum va fi afișat cu o întârziere și părți - în primul rând titlul h3. urmat de textul p:
Partea a doua: Revitalizarea
În această secțiune a lecției, definim comportamentul fiecărui element atunci când mutați cursorul peste imaginea corespunzătoare.
Comportament 1
Pentru ca primul exemplu să semneze "du-te" de jos, atunci când plasați cursorul pe mouse, utilizați proprietatea transformare și lăsați elementul să se deplaseze de-a lungul axei Y:
Comportament 2
Al doilea antet ar trebui să "meargă" de sus în jos, pentru care folosim o valoare pozitivă pentru funcția translateY:
Comportament 3
În realitate, acest exemplu este cel mai simplu: atunci când cursorul se află pe imagine, opacitatea este setată la 1. Aceasta face ca vizibilitatea să fie vizibilă:
Comportament 4
Așa cum am menționat mai sus, al patrulea titlu va aluneca de la o parte la alta. Prin urmare, trebuie să mutăm nu numai textul, ci și imaginea.
Când plasați cursorul, elementul se va mișca până când acesta va apărea 100%. Rețineți că folosim funcția translateX pentru derulare orizontală:
Comportament 5
Când cursorul este plutind, containerul div împreună cu imaginea și titlul vor fi derulate în sens contrar acelor de ceasornic -180deg. ascunderea imaginii și deschiderea semnăturii:
Comportament 6
Acest exemplu conține mai multe efecte simultan. Când cursorul este situat pe imagine, crește - pentru aceasta scala de valoare (1.3):
Puteți descărca arhiva cu fișierele pentru a lucra singur cu acest cod. Sperăm că această lecție va fi utilă. Vă dorim experiențe de succes și succese creative!
Trimiteți-le prietenilor: