Sada dodajte glatku promjenu u boji fonta:

a.FOO (Padding: 5px 10px; # 69f; boja: # 000; -webkit-tranzicija: pozadina 0,5s Lako, boja 0.3s jednostavnost;) a.foo:hover (pozadina: # 33f; boja: #fffff ;)

Ovaj kod prilikom lebdeći miša glatko mijenja boju pozadine tijekom hemissekunda i boju fonta za 0,3 sekunde. Ako trebamo identična svojstva za sve stavke, možemo zamijeniti
-Webkit-tranzicija: Pozadina 0,5s Lako;
-Webkit-tranzicija: boja 0,3s lakoća;

na
-Webkit-tranzicija: Svakako 0,5s lakoća;

Sada će se prijelazni efekt primjenjivati \u200b\u200bna sva svojstva koja variraju tokom događaja i s istim parametrima - 0,5 sekundi, olakšavajući efekt.

Takođe, možemo dodati kašnjenje za efekat:

a.FOO (padding: 5px 10px; # 69f; boja: # 000; -webkit-tranzicija: svih 0,5s lakoća; -webkit-tranzicija-kašnjenje: 0,5s;) a.fouto: lebde (pozadina: # 33f ; Boja: #fff;)

Sada će naša animacija raditi kroz pola sekunde nakon što miše bude vođen.

Nekretnine prijelaza možete primijeniti na bilo šta - pozadinu, boju, dužinu, veličinu fonta itd. To su uglavnom svojstva koja postavljaju boju ili svojstva koja se mogu izraziti u jedinicama dužine (px, em, ex) ili procenat. Kao događaj, možemo koristiti i pseudoclass: fokus i: aktivan. Općenito, moguće je koristiti tranziciju sa bilo kojim selektorima.

Zadatak

Odluka

Referentna boja je postavljena kroz nekretninu boja, koja se dodaje u selektor a. Da biste promijenili boju reference kada se lebdi na njemu, pokazivač miša nanosi pseudo klase: lebdeći i tako da se promjena boje dogodila nesmetano, na selektor A, dodavanje tranzicijskog objekta vrijeme. Obično se označava u sekundi ili milisekundi.

Primjer 1. Promijenite veze u boji

Da biste izgradili megadroid, morate otvoriti kutiju, dobiti torbu sa čipovima i preklopiti ih u željenom redoslijedu, koristeći naše detaljne liderstvo 8631-stranica.

U ovom primjeru biraju se kontrastne boje i vrijeme prijelaza postavljeno je na jednu sekundu. Na radnoj površini je vrijeme bolje postaviti manje od 0,6 ili tako. Zato pokupi vrijednost vašoj želji i želji.

Danas ćemo naučiti kako napraviti promjena boje za glatku blok sa koristeći CSS. i jquery.. Uz ovaj dodatak možete postići iznenađujuće lijepe rezultate dizajna. Na primjer, možete napraviti cool meni koji će glatko promijeniti boju prilikom lebdenja i vjerujte mi, izgleda vrlo lijepo.

JQuery.

Za početak između oznaka i Treba staviti sljedeće:

Onda opet između oznaka i Kopirajte ovu skriptu:

Gde .Box -ovo je blok klasa koju smo izmislili iznad CSS-a.

"# FF4500."- Boja prilikom lebdenja. 400 - Brzina animacije prilikom lebdenja.

"#Fffffff"- Originalna boja nakon čistije kursora. 400 - Brzina animacije prilikom uklanjanja kursora.

HTML.

Jednom kada sve učinite kao napisano, Boja blokiranja glatko promenite. Da biste umetnuli takav blok na stranicu, samo morate dodati sljedeće na željenu lokaciju:

A blok će se pojaviti.

Bitan

Ovaj dodatak može promijeniti samo boju pozadine (Bekground). Na primjer, do veza ili teksta neće biti moguće priložiti. Boja veza mijenja drugi dodatak (uskoro ću definitivno pisati kako da radim).

Ako želite napraviti blokove na stranici, postoje različite boje, poput mene, morat ćete biti između oznaka i Stavite nekoliko skripti u nizu i, u skladu s tim, ne zaboravite da promijenite boju željenoj. Najvažnije je potrebno promijeniti klasu, na primjer, u našem gornjem primjeru - klasu Kutija.a na primjer, sljedeći scenarij treba biti s drugačijom klasom, na primjer Box1., onda Box2. itd.

To je sve, dragi prijatelji. Ako vam niste jasni, obavezno pitajte u komentarima. Vidimo se uskoro.

U ovoj lekciji bit će u vezi s efektom na kojem glatka promjena pozadine objekta kao rezultat kursora miša na njega.
Na početku, kao što je već vjerovatno uspjelo naviknuti se (ako niste prvi put kada koristite jQuery. biblioteka), utikač jQuery. u Naša stranica.
Po sebi jQuery.i mi takođe treba jQuery ui..

Ako ste upoznati sa principima jQuery., Moram se sjetiti da u zaglavlju moramo postaviti pozivni kôd, u ovaj slučaj, Animacije promjene boje tako da se učita prije nego što se učitava glavna stranica. $ (Dokument) .ready (funkcija () (// Pozovite pozivni kôd za animaciju));

HTML.

Evo primjera markup html.

Promjena pozadine elementa

Animacija promjene boje prilikom lebdećeg kursora

/ PC igre / portal 2

Portal 2.

Izvorni portal - Stvar je već kult i neočekivan za svoje vrijeme. Potvrđuje samo tezu dokazanim vekovima o proslavi ideja preko naprednih tehnologija.

CSS.

CSS dizajnerski stilovi naše stranice izgledaju ovako.

PNG); Poravnavanje teksta: levo; Boja: # 333; Širina: 800px; Veličina fonta: 14px; Porodica fontova: Gruzija, "vrijeme novi Rimljani", Serif; Marža: 0 auto; Padding: 0; ) A (boja: # 333; tekstualni dekoracija: nema) A: fokus (obris: nema;) h1 (veličina fonta: 34px; verdana, helvetica, arial, sans-serif; 2px; boja: # 394Bea; težina fonta: 700; obloga: 20px 0 0; 0 1px 1px # 70c5ed;) h2 (fontovi: verdana, helvetica, arial, sans- Serif; # 5c81cb; težina fonta: 400; obloga: 0 10px; tekstualna sjena: 0 1px 1px # 70c5ed;) h3, h3 a (verdana, heldana, helvana, helvana, helvana, helvana, helvana, helvana, helvana, helvana, helvana, arial, Sans-Serif; -1px; boja: # 333; težina fonta: 700; Tekst-transformator: velika slova; Marža: 0; Objavljivanje: 8px 0 8px 0;) P (boja: # 333; levo ; linijska visina: 22px; margina: 5px; obloga: 0 10px;) #container (margina: 0; obloge: 0;) ..fff; obrub: plovak: lijevo; 10px; Pozicija: Širina: 600px;) img (obrub: 5px solid #cccccc;) div.info (pogranično-dno: 1px solid #ccccc; levo; 0; širina: 100% ;) .block (colo R: # 0066cc; Plovak: lijevo; Preliv: skriven; Pozicija: Relativna; Širina: 600px; ) .Block H4, .Block H4 A (boja: # 333333; Veličina fonta: 11px; Padding: 5px 0; Tekst-senka #cencefd; Tekst-transformator: Velika slova;)

JS.

Div Element koji ima klasu .Boze. - To je element, blok koji želimo promijeniti boju.
Ovdje ćemo nazvati ovaj kod u zaglavlju.

$ (Dokument) .Deady (funkcija () ($ ("Kutije"). Hover (funkcija (). Animirani ((((bazaColor: "# 40B8FE"), 800);), funkcija () ) .stop (). Animirani (((BackgroundColor: "#fffffff"), 800););));); U parametrima boja pozadine. Boja je postavljena, a vrijednost 800 - Ovo je brzina animacije.