Tagad pievienojiet vienmērīgu fonta krāsu izmaiņas:

a.Foo (polsterējums: 5px 10px; Priekšvēsture: # 69F; Krāsa: # 000; -Webkit-Pāreja: fons 0.5s vieglums, krāsa 0,3s vieglums;) A.Foo:hover (fons: # 33f; Krāsa: #fff ;)

Šis kodekss, ja peles svārstās, gludās fona krāsu Hemissekundē un fonta krāsā 0,3 sekundes. Ja mums ir vajadzīgas identiskas īpašības visiem vienumiem, mēs varam aizstāt
-Webkit-pāreja: fona 0.5s vieglums;
-Webkit-pāreja: krāsu 0,3s vieglums;

uz
-Webkit-pāreja: visi 0,5s vieglums;

Tagad pārejas efekts tiks piemērots visām īpašībām, kas mainās pasākuma laikā un ar tādiem pašiem parametriem - 0,5 sekundes, atvieglotu efektu.

Mēs varam arī pievienot kavēšanos:

a.Foo (polsterējums: 5px 10px; fons: # 69f; krāsa: # 000; -webkit-pāreja: visi 0,5s vieglums; -webkit-pārejas aizkavēšanās: 0,5s;) A.Fouto: lidināties (fons: # 33f Krāsa: #fff;)

Tagad mūsu animācija strādās pa pusi sekundi pēc peles vadīšanas.

Jūs varat piemērot pārejas īpašumu uz kaut ko - fonu, krāsu, garumu, fonta lielumu utt. Tās ir galvenokārt īpašības, kas nosaka krāsu vai īpašības, kuras var izteikt garuma vienībās (PX, EM, EX) vai procentos. Kā pasākums, mēs varam izmantot arī pseidoclass: fokusu un: aktīvs. Kopumā ir iespējams izmantot pāreju ar jebkuru selektoriem.

Uzdevums

Lēmums

Atskaites krāsa ir iestatīta caur krāsu īpašumu, kas tiek pievienots selektoram a. Lai mainītu atsauces krāsu, braucot uz to, peles kursoru piemēro pseido-klase: lidināties, un tā, ka krāsu maiņa ir noticis nevainojami, uz selektoru A, pievienojiet pārejas īpašumu, kuru vērtība ir laiks. To parasti norāda sekundēs vai milisekundēs.

Piemērs 1. Mainīt krāsu saites

Lai izveidotu Megadroid, jums ir nepieciešams atvērt lodziņu, iegūt maisu ar mikroshēmām un salocīt tos vēlamajā secībā, izmantojot mūsu detalizēto 8631-Page Leadership.

Šajā piemērā ir atlasītas kontrastējošas krāsas un pārejas laiks ir iestatīts uz vienu sekundi. Uz darbvirsmas, laiks ir labāk, lai noteiktu mazāk par 0,6 vai tā. Tātad paņemiet vērtību jūsu vēlmēm un vēlmi.

Šodien mēs uzzināsim, kā padarīt gluda bloka krāsu maiņa ar izmantojot CSS. un jQuery.. Ar šo spraudni var sasniegt pārsteidzoši skaistus dizaina rezultātus. Piemēram, jūs varat veikt atdzist izvēlni, kas gludi mainīs krāsu, kad jūs atradīsiet, un ticiet man, tas izskatās ļoti skaists.

JQuery.

Lai sāktu starp tagiem un Nepieciešams šāds:

Tad atkal starp tagiem un Kopējiet šo skriptu:

Kur .Box -tā ir bloka klase, ko mēs izgudrojām iepriekš CSS.

"# FF4500."- Krāsa, kad tās svārstās. 400 - animācijas ātrums, kad tas svārstās.

"#Ffffff"- sākotnējā krāsa pēc tīrāku kursoru. 400 - animācijas ātrums, noņemot kursoru.

Html

Reiz, kad jūs darāt visu, kā rakstīts iepriekš, Bloķēt krāsu vienmērīgi mainās. Lai ievietotu šādu bloku uz lapu, jums vienkārši jāpievieno vēlamajai atrašanās vietai:

Un parādīsies bloks.

Svarīgs

Šis spraudnis var mainīt tikai fona krāsu (Bekens). Piemēram, uz saitēm vai tekstu, tas nebūs iespējams pievienot. Saites krāsa maina otru spraudni (drīz es noteikti rakstīšu, kā to izdarīt).

Ja jūs vēlaties, lai bloki lapā ir dažādas krāsas, piemēram, man, jums būs jābūt starp tagiem un Ievietojiet vairākus skriptus pēc kārtas, un, attiecīgi, neaizmirstiet mainīt krāsu uz vēlamo vienu. Vissvarīgākais ir nepieciešams mainīt klasi, piemēram, mūsu augstāk - klasē Kaste.un nākamais skripts būtu ar atšķirīgu klasi, piemēram, Aile1.tad Aile2. utt

Tas ir viss, dārgie draugi. Ja jūs neesat skaidrs, jūs noteikti jautājiet komentāros. Uz drīzu redzēšanos.

Šajā stundā, tas būs par ietekmi, kādā vienmērīga maiņa fona objekta, kā rezultātā peles kursora uz to.
Sākumā, kā jau iespējams, izdevās pierast (ja neesat pirmo reizi izmantot jQuery. bibliotēka), spraudnis jQuery. iebildums Mūsu vietne.
Viens pats jQuery.Mums ir vajadzīgs arī jQuery ui..

Ja jūs esat iepazinušies ar principiem jQuery., Man jāatceras, ka galvenē mums ir jānovieto zvana kods, in Šis gadījums, krāsu maiņas animācijas, lai tā ielādētu pirms galvenās lapas satura ievietošanas. $ (Dokuments) .ready (funkcija () (// izvietot savu zvanu kodu animācijai šeit));

Html

Šeit ir piemērs iezīmēšana html..

Mainot elementa fonu

Krāsu maiņas animācija, braucot kursoru

/ PC spēles / portāls 2

2 portāls.

Oriģināls portāls - lieta jau ir kulta un negaidīts tās laikā. Viņa tikai apstiprina darbu, kas pierādīts gadsimtiem ilgi par ideju svinībām pār progresīvām tehnoloģijām.

CSS.

CSS dizaina stili mūsu lapā izskatās šādi.

Png); Teksta saskaņošana: pa kreisi; Krāsa: # 333; Platums: 800px; Fonta lielums: 14px; Fonta ģimene: Gruzija, "Time New Romans", Serif; Margin: 0 Auto; Polsterējums: 0; A (Krāsa: # 333; Teksta dekorēšana: nav) A: Fokuss (kontūra: nav;) H1 (fonta lielums: 34px; Font-Face: Verdana, Helvetica, Arial, Sans-Serif; Letter atstarpe: - 2px; Krāsa: # 394bea; Fonta svars: 700; polsterējums: 20px 0 0; Teksta ēna: 0 1px 1px # 70c5ed;) H2 (fonta izmērs: 24px; Font-Face: Verdana, Helvetica, Arial, Sans- Serif; Krāsa: # 5c81cb; Fonta svars: 400; polsterējums: 0 10px; Teksta ēna: 0 1px 1px # 70c5ed;) H3, H3 A (Fonta lielums: 14px; Font-Face: Verdana, Helvetica, Arial, SANS-SERIF; Burter-Spacction: -1px; Krāsa: # 333; Fonta svars: 700; Teksta pārveidošana: lielie burti; rezerve: 0; polsterējums: 8px 0 8px 0;) p (krāsa: # 333; Peldēšana: pa kreisi līnijas augstums: 22px; rezerve: 5px; polsterējums: 0 10px;) #container (rezerve: 0; polsterējums: 0;) .boxes (fons: #ff; robeža: 1px cietā #ccc; pludiņš: pa kreisi; polsterējums: 10px; Pozīcija: Relatīvais; Platums: 600px;) IMG (robeža: 5px cietā #CCCCCC;) DIV.Info (robežu apakšā: 1px cietā #cccccc; pludiņš: pa kreisi; rezerve: 0; polsterējums: 0; platums: 100% ;) .Block (Colo R: # 0066cc; Peldēt: pa kreisi; Pārplūde: slēpta; Stāvoklis: radinieks; Platums: 600px; ) .Block H4, .Block H4 A (Krāsa: # 333333; Fonta lielums: 11px; polsterējums: 5px 0; Teksta ēna: 0 1px 1px #cedefd; Teksta pārveidojums: lielie burti;)

JS.

Div elements ar klasi .Boxes. - Tas ir elements, bloks, kuru mēs vēlamies mainīt krāsu.
Šeit mēs saucam šo kodu galvenē.

$ (Dokuments) .ready (funkcija () ($ (". Kastes"). Hover (funkcija (). Animate ((((fona skapis: "# 40B8FE"), 800);), funkcija () ($ (tas) ) .stop () Parametros fona krāsa. krāsa ir iestatīta un vērtība 800 - Tas ir animācijas ātrums.