Most adjunk hozzá egy sima változást a betűtípus színének:

a.foo (Padding: 5px 10px; háttér: # 69f; szín: # 000; -webkit-átmenet: háttér 0.5s könnyed, szín 0.3s könnyed;) a.Foo:4; szín: # 33f ;)

Ez a kód, amikor az egeret lebegné az egér zökkenőmentesen megváltoztatja a háttérszínt a hemissecond alatt és a betűtípus színe 0,3 másodpercig. Ha minden elemre azonos tulajdonságokra van szükségünk, cserélhetünk
-Webkit-átmenet: Háttér 0,5S könnyebb;
-Webkit-átmenet: szín 0,3S könnyebb;

a
-Webkit-átmenet: Mind a 0,5S könnyebb;

Most az átmeneti hatás az esemény során minden olyan tulajdonságra kerül, és ugyanazokkal a paraméterekkel - 0,5 másodperc, könnyedén.

Szintén hozzáadhatunk késedelmet a következőkre:

a.foo (Padding: 5px 10px; háttér: # 69f; szín: # 000, -webkit-átmenet: mind a 0,5s könnyebb; -webkit-átmenet-késleltetés: 0,5s;) A.Fouto: lebegés (háttér: # 33 Szín: # #FFF;)

Most az animációnk fél másodpercen keresztül fog működni az egér vezetése után.

Alkalmazhatja az átmeneti tulajdonságot bármi - háttér, szín, hossz, betűméret stb. Ezek elsősorban olyan tulajdonságok, amelyek a hosszúságú (PX, EM, EX) vagy százalékos egységben kifejezhetők színt vagy tulajdonságokat állítanak be. Eseményként használhatjuk a pszeudoklasszát is: Focus és: Aktív. Általánosságban elmondható, hogy az átmenetet bármilyen választékkal használhatjuk.

Egy feladat

Döntés

A referencia színe a színtulajdonságon keresztül van beállítva, amely hozzáadódik a választóhoz. A hivatkozás színének megváltoztatásához az egérmutatót egy pszeudo-osztály: lebegve alkalmazza, és így a színváltozás zökkenőmentesen történt, az A szelektorhoz, adja hozzá az átmeneti tulajdonságot, amelynek értékét adja hozzá, az idő. Ez általában másodpercben vagy milliszekundumban van feltüntetve.

1. példa A színes linkek módosítása

Megadroid építése, meg kell nyitnia a dobozt, kapjon egy zsák zsetonnal, és hajtsa be őket a kívánt sorrendben, részletes 8631 oldalirányú vezetéssel.

Ebben a példában a kontrasztos színeket választják ki, és az átmeneti idő egy másodpercig van beállítva. Az asztalon az idő jobb, ha kevesebb, mint 0,6-ot állít be. Tehát vegye fel az értéket a tetszés és a vágy.

Ma megtudjuk, hogyan kell csinálni sima blokk színváltozás a CSS használatával. és jquery.. Ezzel a pluginnal meglepően szép tervezési eredményeket érhet el. Például egy hűvös menüt hozhat létre, amely simán megváltoztatja a színt, amikor lebeg, és higgy nekem, nagyon szépnek tűnik.

Jquery.

A címkék között kezdődik és A következőket kell tennie:

Aztán ismét a címkék között és Másolja ezt a szkriptet:

Hol .Mox -ez egy blokkosztály, amelyet a CSS-ben találtunk fel.

"# FF4500.- - Szín lebegve. 400 - Animációs sebesség lebegésekor.

"#Ffffff"- Eredeti színtisztító kurzor után. 400 - Animációs sebesség a kurzor eltávolításakor.

Html

Egyszer, amikor mindent megtesz, mint fent, A blokk színe simán változik. Ha ilyen blokkot szeretne beilleszteni az oldalra, csak a kívánt helyre kell hozzáadnia:

És a blokk megjelenik.

Fontos

Ez a plugin csak a háttérszínt csak (BEKGround) módosíthatja. Például a linkekhez vagy a szöveghez nem lesz lehetséges csatolni. A linkek színe megváltoztatja a másik plugint (hamarosan megírom, hogy hogyan kell csinálni).

Ha szeretné, hogy a blokkok az oldalon vannak különböző színek, mint én, akkor a címkék között kell lennie és Tegyen több szkriptet sorba, és ennek megfelelően ne felejtse el, hogy megváltoztassa a színt a kívánthoz. A legfontosabb dolog szükséges az osztály megváltoztatásához, például a fenti példánkban Doboz.és a következő szkriptnek más osztályúnak kell lennie, például 1. box., azután 2. box. stb.

Ez minden, kedves barátaim. Ha nem vagy világos, ügyeljen arra, hogy kérdezze meg a megjegyzéseket. Hamarosan találkozunk.

Ebben a leckében olyan hatással lesz, amelyen az objektum hátterének zökkenőmentes változása az egérmutató eredményeként.
Az elején, amint azt már valószínűleg sikerült megszokni (ha nem vagy az első használatkor jquery. könyvtár), dugó jquery. ban ben Honlapunk.
Magától jquery.Szükségünk van jquery ui..

Ha ismeri az elveket jquery., Emlékszem arra, hogy a fejlécben el kell tüntetnünk a hívószámot ez az eset, Színes változás animációkat úgy, hogy a főoldaltartalom betöltése előtt betölti. $ (Dokumentum). READY (funkció () (// Helyezze a hívószámot animációra));

Html

Itt van egy példa jelölés html.

Az elem hátterének megváltoztatása

A színváltozás animációja a kurzor lebegésénél

/ PC Játékok / portál 2

Portál 2.

Eredeti portál - a dolog már egy kultusz és váratlan az idejére. Csak azt igazolja, hogy az értekezés évszázadok óta bizonyított az ötletek ünneplése a fejlett technológiák felett.

CSS.

Az oldalunk CSS tervezési stílusai így néznek ki.

Png); Szöveghez igazítás: maradt; Szín: # 333; Szélesség: 800px; Betűméret: 14px; Font-Család: Georgia, "Idő új rómaiak", Serif; Margó: 0 Auto; Padding: 0; ) A (szín: # 333; Szöveges dekoráció: nincs) A: Fókusz (vázlat: nincs;) H1 (betűméret: 34px; font-face: Verdana, Helvetica, Arial, Sans-Serif; Levél-távolság: - 2PX; Szín: # 394BEA; Betűtípus: 700; Padding: 20px 0 0, szöveg-árnyék: 0 1PX 1PX # 70C5ED;) H2 (betűméret: 24px, Font-Face: Verdana, Helvetica, Serif; Szín: # 5C81cb; Betűtípus: 400; Padding: 0 10px; Szöveg-árnyék: 0 1PX 1PX # 70C5ED;) H3, H3 A (betűméret: 14px; Font-face: Verdana, Helvetica, Arial, Sans-serif; levél-térfogat: -1px; Szín: # 333; Betűtípus: 700; Szöveg-transzformáció: nagybetű: Margó: 0, Padding: 8px 0 8px 0;) P (Szín: # 333; úszó ; Vonalmagasság: 22px; Margó: 5px; Padding: 0 10px;) #Container (Margin: 0, Padding: 0;) .moxes (háttér: #FFF; Border: 1PX Solid, Padding: 10px; helyzet: a relatív; szélesség: 600px;) img (Border: 5px szilárd #CCCCCC;) Div.info (Border-Bottom: 1px szilárd #CCCCCC; float: left; margó: 0; padding: 0; szélesség: 100% ;) .block (Colo R: # 0066cc; Balra lebeg; Túlcsordulás: rejtett; Pozíció: relatív; Szélesség: 600px; ) .Block h4, .block h4 a (szín: # 333333; betűméret: 11px; Padding: 5px 0; szöveg-árnyék: 0 1px 1px #cedefd; szöveg-transzformáció: nagybetűs;

JS.

Div egy osztályú elem .Dobozok. - Ez egy elem, egy blokk, amit meg akarunk változtatni a színt.
Itt hívjuk ezt a kódot a fejlécben.

$ (Dokumentum). Ready (funkció () ($ (". Dobozok"). Hover (funkció (). Animál (((((HAUDGINGCOLOR: "# 40B8FE"), 800);), funkció () ) .Stop (). Animál (((háttérfestmény: "#fifffff", 800);)););)); Paraméterekben háttérszín. A szín be van állítva, és az érték 800 - Ez az animáció sebessége.