Acum să adăugăm o schimbare lină la culoarea fontului:

a.foo (umplutură: 5px 10px; fundal: # 69f; culoare: # 000; -webkit-tranziție: fundal 0,5s ușor, culoare 0,3s ușurință;) a.foo:hover (fundal: # 33f; culoare: #fff ;)

La trecerea cu mouse-ul, acest cod va schimba lin culoarea de fundal timp de o jumătate de secundă și culoarea fontului pentru 0,3 secunde. Dacă dorim aceleași proprietăți pentru toate elementele, le putem înlocui
-webkit-tranziție: fundal 0,5s ușurință;
-webkit-tranziție: culoare 0.3s ușurință;

pe
-webkit-tranziție: toate 0.5s ușurință;

Acum efectul de tranziție va fi aplicat tuturor proprietăților care se schimbă la eveniment și cu aceiași parametri - 0,5 secunde, efect de ușurință.

De asemenea, putem adăuga o întârziere pentru efect:

a.foo (umplutură: 5px 10px; fundal: # 69f; culoare: # 000; -webkit-transition: toate 0,5s ușurință; -webkit-transition-delay: 0,5s;) a.foo:hover (fundal: # 33f ; culoare: #fff;)

Acum animația noastră va rula o jumătate de secundă după trecerea mouse-ului.

Puteți aplica proprietatea de tranziție pentru orice - fundal, culoare, lungime, dimensiunea fontului etc. Practic, acestea sunt proprietăți care specifică o culoare sau proprietăți care pot fi exprimate în unități de lungime (px, em, ex) sau ca procent. Putem folosi, de asemenea, pseudo-clasele: focus și: active ca eveniment. În general, puteți utiliza tranziția cu orice selectoare.

O sarcină

Soluţie

Culoarea legăturii este setată prin proprietatea de culoare, care este adăugată la selectorul A. Pseudo-clasa: hover este utilizată pentru a schimba culoarea link-ului atunci când cursorul mouse-ului se deplasează deasupra acestuia și pentru a schimba culoarea fără probleme, adăugați proprietatea de tranziție la selectorul A, a cărui valoare este timpul. Este de obicei indicat în secunde sau milisecunde.

Exemplul 1. Schimbarea culorii linkurilor

Asamblarea megadroidului necesită deschiderea cutiei, scoaterea sacului de jetoane și plierea acestora în ordinea corectă folosind manualul nostru detaliat de 8631 de pagini.

În acest exemplu, pentru claritate, sunt selectate culori contrastante și timpul de tranziție este setat la o secundă. Pe un site de lucru, cel mai bine este să setați timpul la mai puțin, 0,6 s sau cam așa. Așa că alege valoarea în funcție de gustul și dorința ta.

Astăzi vom afla cum să facem schimbare netedă a culorii blocului de la folosind CSSși jQuery... Cu acest plugin, puteți obține rezultate de design uimitor de frumoase. De exemplu, puteți crea un meniu răcoros, care va schimba ușor culoarea la plutire și credeți-mă, arată foarte frumos.

JQuery

În primul rând, între etichete și trebuie să puneți următoarele:

Apoi din nou între etichete și copiați acest script aici:

Unde .Cutie - aceasta este clasa de blocuri cu care am venit mai sus în CSS.

"# FF4500"- culoare pe hover. 400 - viteza animației la plimbare.

„#Ffffff”- culoarea originală după mutarea cursorului. 400 - viteza animației la deplasarea cursorului.

HTML

După ce ați făcut totul așa cum este descris mai sus, culoarea blocului se va schimba lin... Pentru a insera un astfel de bloc pe o pagină, trebuie doar să adăugați următoarele la locul potrivit:

Și blocul va apărea.

Important

Acest plugin poate schimba doar culoarea de fundal. De exemplu, nu îl veți putea atașa la linkuri sau text. Culoarea legăturilor este schimbată de un alt plugin (cu siguranță voi scrie cum să o fac în curând).

Dacă doriți ca blocurile de pe pagină să aibă culori diferite, ca în ale mele, veți avea nevoie între etichete și puneți mai multe scripturi la rând și, în consecință, nu uitați să schimbați culoarea pe cea dorită. Cel mai important lucru este să schimbăm clasa, de exemplu, în exemplul nostru de mai sus, clasa Cutie iar următorul script ar trebui să fie cu o clasă diferită ca Caseta 1, apoi Caseta 2 etc.

Asta e tot, dragi prieteni... Dacă nu înțelegeți nimic, asigurați-vă că întrebați în comentarii. Pe curând.

În această lecție, vom vorbi despre efectul în care fundalul unui obiect se modifică lin, ca urmare a deplasării cursorului mouse-ului peste el.
La început, după cum probabil te-ai obișnuit deja (dacă nu este prima dată când folosești jQuery bibliotecă), conectați jQueryîn site-ul nostru.
De la sine jQuery, de asemenea, avem nevoie UI jQuery.

Dacă sunteți familiarizați cu principiile jQuery, atunci trebuie să ne amintim că în antet trebuie să punem codul de apel, în acest caz, animați schimbarea culorii astfel încât să fie încărcată înainte de încărcarea conținutului principal al paginii. $ (document) .ready (function () (// puneți aici codul de apel al animației));

HTML

Iată un exemplu de marcare html.

Schimbați culoarea de fundal a unui element

Animație pentru schimbarea culorii în cursă

/ Jocuri PC / Portal 2

Portalul 2

Portalul original este deja un lucru cult și neașteptat pentru timpul său. Confirmă încă o dată teza veche de secole despre triumful ideilor asupra tehnologiilor avansate.

CSS

Stilul CSS pentru pagina noastră arată astfel.

Png); text-align: stânga; culoare: # 333; lățime: 800px; dimensiunea fontului: 14px; font-family: georgia, "time new romans", serif; marja: 0 auto; umplutură: 0; ) a (color: # 333; text-decoration: none) a: focus (contur: none;) h1 (font-size: 34px; font-family: verdana, helvetica, arial, sans-serif; letter-spacing: - 2px; culoare: # 394BEA; greutate-font: 700; umplutură: 20px 0 0; text-shadow: 0 1px 1px # 70C5ED;) h2 (font-size: 24px; font-family: verdana, helvetica, arial, sans- serif; culoare: # 5C81CB; greutate-font: 400; umplutură: 0 0 10px; text-shadow: 0 1px 1px # 70C5ED;) h3, h3 a (font-size: 14px; font-family: verdana, helvetica, arial ; stânga; înălțimea liniei: 22px; margine: 5px; umplutură: 0 0 10px;) #container (margine: 0; umplutură: 0;). cutii (fundal: #fff; margine: 1px solid #ccc; umplutură: 10 px; poziție: relativă; lățime: 600 px;) img (margine: 5 px solid #CCCCCC;) div.info (margine-fund: 1 px solid #CCCCCC; plutitor: stânga; margine: 0; umplutură: 0; lățime: 100%;) .block (colo r: # 0066CC; plutește la stânga; overflow: ascuns; poziție: relativă; lățime: 600px; ) .block h4, .block h4 a (culoare: # 333333; font-size: 11px; padding: 5px 0; text-shadow: 0 1px 1px #CEDEFD; text-transform: uppercase;)

Js

DIV element având clasă .cutii- este un element, un bloc, în care vrem să schimbăm culoarea.
Vom apela acest cod în antet.

$ (document) .ready (function () ($ (". boxes"). hover (function () ($ (this) .stop (). animate ((backgroundColor: "# 40B8FE"), 800);), function () ($ (this) .stop (). animate ((backgroundColor: "#ffffff"), 800);));)); În parametri culoare de fundal culoarea este setată și valoarea 800 este viteza animației.