Salutări, dragi cititori beloweb.ru blog. În această zi, vreau să-ți spun cum să facă o pereche de efecte frumoase, dar foarte simplu pentru link-uri de pe site-ul web. Și anume, de culoare schimbare treptată atunci când treceți și deplasare lină a textului de referință. În general, se pare frumos. Mai mult decât atât, văd de multe ori aceste efecte pe diferite site-uri.
De ce este această metodă simplă? Pentru că este doar cu ajutorul CSS. Nu există niciun script numai stiluri.
Deci, dragi prieteni, să ne începem.
schimbarea lină de culoare atunci când treci
În mod implicit, este în valoare de 0,2 secunde atunci când cursorul și 0,02 secunde după administrarea. Cu alte cuvinte, aici expuse viteza de animație. Această valoare se poate schimba după cum doriți, acestea sunt în exemplul.
În clasa a: hover link-ul de culoare este setat, care va apărea, treptat, atunci când treceți peste ea. Implicit este culoarea # 1FA2E1.
Pentru un link pe o pagină (sau o culoare diferită)
În acest sens CSS pentru a face o referire la site-ul, trebuie să specificați o clasă separată, la care o etichetă, de exemplu, H1 sau li. În acest caz, vom presvaevat clasa de la tag-ul li. Se pare, după cum urmează:
Aici am venit cu s1 clasă
Totul. Acum vom netezime va funcționa doar pe link-ul care este atribuit clasa s1
link diferite culori
Pentru a face link-urile în culori diferite, atunci când treci pe o singură pagină, fiecare etichetă este atribuit o trimitere la diferite clase în stiluri. Să ne uităm în practică:
După cum puteți vedea, al doilea tag-ul este deja Li clasa s2.
Pe scurt aici ne întrebăm fiecare referință o culoare diferită atunci când treci, și apoi fiecare clasă cerut tag-ul (li) pe pagina.
O deplasare lină spre dreapta pe link-urile de pagină
Eu spun imediat că acest efect este probabil să vă rugăm mulți oameni nu fac, dar, în practică, de multe ori am să-l văd. Îmi place și vreau să le împărtășesc cu voi.
Fă acest lucru o schimbare de buna este destul de simplu. Trebuie doar să se atribuie lista de pe pagina tag-ul div cu clasa corespunzătoare.
Pentru a începe, avem nevoie de o listă de cod HTML in sine, nu vom utiliza UL și li Tag-uri:
După cum probabil ați observat că am adăugat la lista de tag-ul
Acum, pentru a face să funcționeze în stilurile pe care doriți să adăugați următoarele:
Implicit (în exemplu) viteza de animație este de 0,1 secunde, iar distanța de forfecare în 8px. Desigur, aceste valori se pot schimba, de a experimenta, ca să spunem așa. -)
Cum de a face o tranziție lină nu este culoarea textului, precum și o tranziție lină la efectul de text text umbra (Am aici un efect de strălucire) și că de aceea este pur și simplu nu se face lin ...
Aici prmer meu ...
.postcontent o. postcontent a: link
font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif;
text-decoration: none;
Culoare: #FFFFFF;
>
postcontent a: a vizitat. postcontent a.visited
font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif;
text-decoration: none;
Culoare: #FFFFFF;
>
postcontent a: hover. a.hover postcontent
font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif;
text-decoration: none;
-Moz-tranziție: umbra 0.2S 0.02s ușurință;
-O tranziție: umbra 0.2S 0.02s ușurință;
-webkit-tranziție: umbra 0.2S 0.02s ușurință;
Culoare: #EAEFCD;
Text-umbra: 0px 0px 20px # 00c6ff;
>
-Moz-tranziție: umbra 0.2S 0.02s ușurință;
-O tranziție: umbra 0.2S 0.02s ușurință;
-webkit-tranziție: umbra 0.2S 0.02s ușurință;
Trebuie adăugat aici:
Și, mai degrabă decât a pune toate umbra
Tot el a înțeles ... în animație (de tranziție) a fost necesar pentru a insera atributul umbră, și umbra textului
ca aceasta
-Moz-tranziție: text-shadow 0.2S 0.02s ușurință;
-O tranziție: text-shadow 0.2S 0.02s ușurință;
-webkit-tranziție: text-shadow 0.2S 0.02s ușurință;