Teraz pridajte hladkú zmenu farby písma:

a.Foo (čalúnenie: 5px 10px; pozadie: # 69F; Farba: # 000; -webkit-transformácia: pozadie 0,5s Jednoduchosť, farba 0,3s ľahkosť;) a.Foo Ohover (pozadie: # 33F; farba: #fff ;)

Tento kód, keď sa vznáša myš, hladko zmení farbu pozadia počas hemissecond a farbu písma o 0,3 sekundy. Ak potrebujeme identické vlastnosti pre všetky položky, môžeme nahradiť
-Webkit-transformácie: pozadie 0,5s ľahkosť;
-Webkit-prechod: farba 0,3s ľahkosť;

na
-Webkit-prechod: všetky 0,5S ľahkosť;

Teraz bude prechodový účinok aplikovaný na všetky vlastnosti, ktoré sa líšia počas podujatia a s rovnakými parametrami - 0,5 sekundy, uľahčujú účinok.

Môžeme tiež pridať oneskorenie na účinok:

a.Foo (čalúnenie: 5px 10px; pozadie: # 69F; Farba: # 000; -webkit-transformácie: všetky 0,5s ľahkosti; -webkit-transformácie-oneskorenie: 0,5s;) A.FOUTO: Hover (pozadie: # 33F Farba: #fff;)

Teraz bude naša animácia pracovať cez pol sekundy po vedení myši.

Transfitický majetok môžete aplikovať na čokoľvek - pozadie, farbu, dĺžku, veľkosť písma atď. Toto sú hlavne vlastnosti, ktoré nastavíte farbu alebo vlastnosti, ktoré môžu byť vyjadrené v jednotkách dĺžky (PX, EM, EX) alebo percento. Ako udalosť môžeme tiež použiť Pseudoclass: Focus a: Active. Vo všeobecnosti je možné použiť prechod s akýmkoľvek voličom.

Úloha

Rozhodnutie

Referenčná farba sa nastaví cez farbu, ktorý je pridaný do voliča A. Ak chcete zmeniť farbu referencie pri vzniku na ňu, kurzor myši sa aplikuje pomocou pseudo-triedy: Hover, a takže zmena farby sa stalo hladko, k voliču A, pridať vlastnosť prechodu, ktorej hodnota je čas. Zvyčajne je uvedený v sekundách alebo milisekundách.

Príklad 1. Zmeňte farebné odkazy

Ak chcete vytvoriť Megaladroid, musíte otvoriť krabicu, získať tašku s čipmi a zložiť ich v požadovanom poradí, pomocou nášho podrobného vedenia 8631-stranového vedenia.

V tomto príklade sú zvolené kontrastné farby a čas prechodu je nastavený na jednu sekundu. Na pracovnej ploche je čas lepší nastaviť menej ako 0,6s alebo tak. Takže vyzdvihnite hodnotu podľa svojich predstáv a túžby.

Dnes sa naučíme zmena hladkého bloku pomocou CSS. a jQuery.. S týmto pluginom môžete dosiahnuť prekvapivo krásne výsledky dizajnu. Môžete napríklad vytvoriť skvelé menu, ktoré bude hladko zmeniť farbu, keď sa vznáša, a verte mi, vyzerá veľmi krásne.

JQuery.

Spustenie medzi tagmi a Je potrebné stanoviť:

Potom opäť medzi tagmi a Skopírujte tento skript:

Kde .Box -toto je trieda bloku, ktorú sme vymysleli vyššie v CSS.

"# FF4500."- farba, keď sa vznáša. 400 - rýchlosť animácie, keď sa vznáša.

"#Ffffff"- Pôvodná farba po čistejšom kurzore. 400 - rýchlosť animácie pri odstraňovaní kurzora.

Html

Raz, keď urobíte všetko, čo je napísané vyššie, Bloková farba hladká zmena. Ak chcete vložiť taký blok na stránku, musíte len pridať nasledovné na požadované miesto:

A blok sa zobrazí.

Dôležitý

Tento plugin môže zmeniť iba farbu pozadia (bekground). Napríklad na odkazy alebo na text nebude možné pripojiť. Farba odkazov mení iný plugin (čoskoro budem určite písať na to, ako to urobiť).

Ak chcete, aby sa bloky na stránke, sú rôzne farby, ako ja v, budete musieť byť medzi tagmi a Dajte niekoľko skriptov do rady a podľa toho nezabudnite zmeniť farbu na požadovanú. Najdôležitejšia vec je potrebná na zmenu triedy, napríklad v našom príklade vyššie - trieda Box.A ďalší skript by mal byť s inou triedou, napríklad Box1., potom Box2. atď.

To je všetko, drahí priatelia. Ak vám nie ste jasní, uistite sa, že ste sa pýtali v komentároch. Uvidíme sa čoskoro.

V tejto lekcii bude o účinok, v ktorom je hladká zmena pozadia objektu v dôsledku kurzora myši.
Na začiatku, ako sa už pravdepodobne podarilo zvyknúť (ak nie ste prvýkrát používate jQuery. Knižnica), zástrčka jQuery. v Naše stránky.
Sám jQuery.potrebujeme tiež jQuery ui..

Ak ste oboznámení so zásadami jQuery., Musím si uvedomiť, že v hlavičke musíme umiestniť volací kód, v tento prípadAnimácie menia farieb tak, aby sa načítala obsah hlavnej stránky. $ (Dokument) .Ready (funkcia () () (// Umiestnite kód Call pre animáciu));

Html

Tu je príklad označenia html.

Zmena pozadia prvku

Animácia zmeny farby pri vznámení kurzora

/ PC hry / portál 2

Portál 2.

Originálny portál - Tá vec je už kult a neočakávaná pre svoj čas. Ona len potvrdzuje diplomovú prácu, dokázala po stáročiam o oslave myšlienok nad pokročilými technológiami.

CSS.

Štýly dizajnu CSS našej stránky vyzerajú.

Png); Zarovnanie textu: vľavo; Farba: # 333; Šírka: 800px; Font-veľkosť: 14px; Font-Rodina: Gruzínsko, "Nový Rimania", Serif; Margin: 0 Auto; Čalúnenie: 0; ) A (Farba: # 333; Text-Decoration: Žiadne) A: Focus (Obrys: Žiadne;) H1 (Font-Veľkosť: 34px; Font-Face: Verdana, HelveTICA, ARIAL, SANS-SERIF; 2px; Farba: # 394BEA; Font-Hmotnosť: 700; Padovanie: 20px 0 0; Text-tieň: 0 1PX 1PX # 70c5ED;) H2 (font-veľkosť: 24px; font-tvár: Verdana, Helvetica, Arial, Sans- Serif; Farba: # 5C81cb; Font-Hmotnosť: 400; Čalúnenie: 0 10PX; text-tieň: 0 1PX 1PX # 70c5ED;) H3, H3 A (font-veľkosť: 14px; font-tvár: Verdana, Helvetica, Arial, Sans-serif; Letter-thoting: -1px; Farba: # 333; Font-Hmotnosť: 700; Text-transformácia: veľké písmená; Rozpätie: 0; Padding: 8px 0 8PX 0;) P (Farba: # 333; Float: Zostal Riadková výška: 22px; okraj: 5px; Padding: 0 10PX;) #container (okraj: 0; Polstrovanie: 0;) .boxy (pozadie: #fff; Hranica: 1px Solid #ccc; Float: Zľava; Vyplnenie: 10px; poloha: relatívna; šírka: 600px;) IMG (hranica: 5px pevná #cccccc;) div.info (pohraničné dno: 1px pevná #ccccccc; plavák: vľavo; okraj: 0; čalúnenie: 0; šírka: 100% ) .block (colo R: # 0066cc; Float: vľavo; Prepad: skrytý; Pozícia: relatívna; Šírka: 600px; ) .Blok H4, .BLOCK H4 A (Farba: # 333333; veľkosť písma: 11px; Padovanie: 5px 0; text-tieň: 0 1PX 1PX #CEDEFD; Text-transformácia: veľké písmená;)

Js.

Výživný prvok, ktorý má triedu .Boxes. - Je to prvok, blok, ktorý chceme zmeniť farbu.
Tu zavoláme tento kód v hlavičke.

$ (Dokument) .Ready (funkcia () ($ (". Boxy"). Hover (funkcia (). Animate (((((((((((pozadiaColor: "# 40B8FE"), 800);), funkcia () ($ (toto ) .stop (). Animate (((((pozadiaColor: "#fffffff"), 800););););););); V parametroch farba pozadia. Farba je nastavená a hodnota 800 - Toto je rýchlosť animácie.