Dobrý deň, priatelia! Toto je ďalší článok napísaný na žiadosť jedného z čitateľov môjho blogu. Dnes implementujeme možnosť zobrazenia obrázku pri prejdení kurzorom myši nad odkaz. Prečo by to mohlo byť potrebné? Všetko je veľmi jednoduché, týmto spôsobom ušetríte miesto na stránke a zároveň oživíte odkazy.
Ako viete, implementovať vyskakovacie obrázky možné s Pomocník jQuery, CSS a tiež HTML. V dnešnom článku uverejním hotový kód tento efekt, a tiež dať niekoľko dobré príklady. Každý skript je pomerne jednoduchý, vytvorený pomocou CSS+HTML. Už vás nebudem mučiť a dám vám hotové riešenia!
Vyskakovací obrázok pri umiestnení kurzora myši
a.site-ssilka:hover+div
Dovoľte mi stručne vysvetliť hlavné body. Ak chcete zobraziť kontextový obrázok, musíte sa obrátiť na značku
s atribútom src a za rovnítko v úvodzovkách napíšte cestu k obrázku, po jeho nahratí do koreňový priečinok stránky.
Tag <а> s povinným parametrom href je zodpovedný za vytvorenie a zobrazenie odkazu (v mojom príklade ide o text).
Ak sa prvky lokality presunuli, pomocou vlastnosti môžete nastaviť šírku a výšku obrázka šírka a výška. Parametre sú nastavené v pixeloch.
Atribút alt umožňuje vyhľadávačom presnejšie rozpoznať, čo je zobrazené na obrázku.
Kvôli prehľadnosti som zvýraznil časť kódu, ktorú s najväčšou pravdepodobnosťou chcete zmeniť.
Vyskakovací text pri umiestnení kurzora myši na odkaz
a.site-ssilka:hover+div
Odvážnejšie!!! Umiestnite kurzor myši na mňa!
Ako môžete vidieť z príkladu, keď umiestnite kurzor myši na text, zobrazí sa textový popis.
Miznúci obrázok pri umiestnení kurzora myši nad odkaz
a.site-ssilka:hover+div
Odvážnejšie!!! Umiestnite kurzor myši na mňa!
Ak chcete pridať určitý efekt vyššie, stačí skopírovať kód, ktorý vám vyhovuje, a vložiť ho do textový editor. Odkaz s vyskakovacím / miznúcim obrázkom môže byť napísaný kdekoľvek v článku.
Dôležitý bod! Každý z prezentovaných skriptov nepoškodzuje platnosť stránky.
Za nemenej pohodlné považujem implementáciu úlohy pridaním špeciálneho skriptu do súboru štýlu vašej šablóny, ktorý sa zvyčajne nazýva style.css.
Vyskakovací obrázok CSS
poloha: relatívna;
Thumbnail:hover(
Rozsah miniatúr ( /*CSS pre zväčšený obrázok*/
pozícia: absolútna;
farba pozadia: #3d3d3d;
okraj: 1px plná biela;
viditeľnosť: skryté;
text-dekorácia: žiadna;
border-radius: 4px 4px 4px 4px;
Moz-border-radius: 4px 4px 4px 4px;
Webkit-border-radius: 4px 4px 4px 4px;
Rozsah miniatúr img( /*CSS pre zväčšený obrázok*/
šírka okraja: 0
Thumbnail:hover span( /*CSS pre zväčšený obrázok pri umiestnení kurzora myši*/
viditeľnosť: viditeľné;
vľavo: 60px; /*pozícia, kde by mal byť zväčšený obrázok horizontálne posunutý */
Ak chcete pri umiestnení kurzora myši na odkaz zobraziť kontextové okno, vložte do textu nasledujúci odkaz:
Okrem toho je možné vložiť odkaz s vyskakovacím obrázkom určitú časť vašu šablónu. Ak to chcete urobiť, pridajte nasledujúci kód do súboru index.php. Ide o súbor, ktorý definuje vizuálne usporiadanie prvkov lokality.
V prípade, že nie ste oboznámení s CSS, vysvetlím, že položka img.animate1:hover hovorí prehliadaču, že pre všetky prvky , s atribútom triedy rovným animate1, keď na ne umiestnite kurzor myši, použite zadané štýly. A štýly sú špecifikované medzi kučeravé zátvorky( a ). Ak je všetko vykonané správne, malo by to vyzerať takto:
Môžete sa odfotiť pôvodný stav priesvitný, a keď nad ním prejdete, urobte ho nepriehľadným. Potom musíte do súboru CSS pridať nasledujúce riadky:
img.animate1(
filter: alfa (Nepriehľadnosť=25);
nepriehľadnosť: 0,25
}
img.animate1:hover (
nepriehľadnosť: 1
}
Výsledok bude takýto:
Pre väčší efekt môžete spomaliť zmeny v priehľadnosti obrázka. Na to môžete použiť vlastnosť prechodu CSS, ktorá nastavuje efekt prechodu medzi dvoma stavmi prvku. Pridajme napríklad jednu sekundu spomalenia. Potom bude náš kód CSS vyzerať takto:
img.animate1(
filter: alfa (Nepriehľadnosť=25);
nepriehľadnosť: 0,25
-moz-transition: všetky 1s easy-in-out; /* prechodový efekt pre Firefox pred verziou 16.0 */
-webkit-transition: všetky 1s easy-in-out; /* prechodový efekt pre Chrome do verzie 26.0, Safari, Android a iOS */
-o-prechod: všetky 1s uvoľnenie-in-out; /* prechodový efekt pre Operu pred verziou 12.10 */
prechod: všetky 1s easy-in-out; /* prechodový efekt pre iné prehliadače */
}
img.animate1:hover (
filter: alfa (Nepriehľadnosť=100);
nepriehľadnosť: 1
}
výsledok:
Pomocou vlastnosti transform je možné obrázok zmenšiť, otočiť, posunúť, nakloniť. Skúsme zväčšiť obrázok. Potom bude css kód vyzerať takto:
img.animate1(
- o-prechod: uvoľnenie všetkých 1 s;
prechod: ľahkosť všetkých 1 s;
}
img.animate1:hover(
- moz-transformácia: mierka (1,5); /* efekt transformácie pre Firefox pred verziou 16.0 */
- transformácia webkitu: mierka (1,5); /* efekt transformácie pre Chrome do verzie 26.0, Safari, Android a iOS */
- o-transformácia: mierka (1,5); /* efekt transformácie pre Operu pred verziou 12.10 */
- ms-transformácia: mierka (1,5); /* efekt transformácie pre IE 9.0 */
transform:scale(1.5); /* efekt transformácie pre iné prehliadače */
}
A výsledok bude takýto:
Na zväčšenie obrázka je možné pridať rotáciu. Potom sa štýly CSS trochu zmenia:
img.animate1(
moz-prechod: všetky 1 s ľahkosť;
webkit-transition: all 1s easy;
- o-prechod: uvoľnenie všetkých 1 s;
prechod: ľahkosť všetkých 1 s;
}
img.animate1:hover(
- moz-transformácia: otočte (360 stupňov) stupnicu (1,5);
- transformácia webkitu: otočte (360 stupňov) stupnicu (1,5);
- o-transformácia: otočte (360 stupňov) stupnicu (1,5);
- ms-transformácia: otočte (360 stupňov) stupnicu (1,5);
transformácia: rotácia (360 stupňov) mierka (1,5);
}
výsledok:
Vyššie sme uvažovali o prípadoch, keď je do animácie zapojený jeden obrázok. Ďalej zvážte ako nahradiť jeden obrázok iným. V tomto prípade sú zvyčajne pripravené dva obrázky rovnakej veľkosti: jeden pre pôvodný pohľad, druhý pre jeho nahradenie.
Povedzme, že máme dva obrázky, jeden čiernobiely a druhý farebný:
Urobme to tak, že keď umiestnite kurzor myši na čiernobiely obrázok, zobrazí sa farebný obrázok. Aby sme to urobili, urobíme z pôvodného obrázka pozadie prvku div pomocou vlastnosti background. A keď prejdete na obrázok kurzora, zmeníme sa obrázok na pozadí pomocou rovnakej pseudotriedy hover a vlastnosti pozadia. Na implementáciu tohto efektu na html stránku pridajte prvok div s triedou rotation1:
A pridajte nasledujúce popisy štýlu:
div.rotate1(
pozadie: url (img/2.jpg); /* Cesta k súboru s pôvodným obrázkom */
šírka: 480px /* Šírka obrázku */
výška: 360px; /* Výška obrázku */
}
div.rotate1:hover(
pozadie: url (img/1.jpg); /* Cesta k súboru s nahradeným obrázkom */
}
A výsledok:
Táto metóda má jednu významnú nevýhodu. Keďže druhý obrázok sa načíta len po umiestnení kurzora nad kurzor, ak má používateľ pomalé internetové pripojenie a veľkosť súboru s obrázkom je veľká, obrázok sa zobrazí s pauzou. Preto nižšie zvážime niekoľko ďalších spôsobov, ako nahradiť obrázky pri umiestnení kurzora myši.
Ďalšia metóda bude založená na spojení dvoch obrázkov do jedného súboru. Povedzme, že potrebujeme na stránku umiestniť tlačidlo, ktoré by pri prejdení kurzorom myši zmenilo svoj vzhľad. Aby sme to dosiahli, skombinujeme dva obrázky do jedného súboru a výsledný obrázok bude vyzerať asi takto:
V tomto prípade sa zmena z jedného vzoru na druhý vykoná posunom obrázok na pozadí vertikálne pomocou vlastnosti background-position. Keďže pri kliknutí na tlačidlo väčšinou prejdete na inú stránku, vložíme obrázok do prvku< a>. Potom vložte nasledujúci kód do html stránky:
A v súbore css, ako je tento:
a.rotate2(
pozadie: url (img/button.png); /* Cesta k súboru s pôvodným obrázkom */
displej:blok; /* Odkaz ako prvok bloku */
šírka: 50px /* Šírka obrázka v pixeloch */
výška: 30px; /* Výška obrázku */
}
a.rotate2:hover(
background-position: 0-30px; /* Odsadenie pozadia */
}
výsledok:
A posledný spôsob pre dnešok je, keď sa jeden obrázok umiestni pod druhý s css pozícia: absolútne pravidlá. V tomto prípade do kontajnera div vložíme dva obrázky:
A pridajte štýly CSS:
Animovať2(
poloha:relatívna;
margin:0 auto;/* nastaviť blok div do stredu stránky*/
šírka: 480px; /* Šírka */
výška: 360px; /* Výška */
}
.animate2 img(
poloha:absolútna; /* absolútne umiestnenie*/
vľavo: 0; /* zarovnanie obrázkov doľava horný roh div-a*/
hore: 0; /* zarovnať obrázky do ľavého horného rohu div */
}
Po pridaní pravidiel css budú obrázky umiestnené pod sebou. Teraz môžete ovládať priehľadnosť obrázkov pomocou vlastnosti nepriehľadnosti v normálnom stave zobrazíme druhý obrázok a keď prejdete myšou na prvý. Aby sme to urobili, v normálnom stave urobíme obrázok s prvou triedou úplne priehľadný a keď podržíte kurzor, opak je pravdou: obrázok s druhou triedou bude úplne priehľadný a s prvou triedou bude nebyť transparentný:
Animate2 img.first ( /* prvý obrázok je úplne priehľadný */
nepriehľadnosť:0;
filter:alpha (nepriehľadnosť=0);
}
.animate2:hover img.first ( /* prvý obrázok sa stane nepriehľadným po umiestnení kurzora myši */
nepriehľadnosť:1;
filter:alfa (nepriehľadnosť=100);
}
/* a druhý sa stane priehľadným po umiestnení kurzora myši */
nepriehľadnosť:0;
filter:alpha (nepriehľadnosť=0);
}
výsledok:
Plynulý prechod môžete dosiahnuť pridaním vlastnosti prechodu CSS do posledného pravidla:
Animate2:hover img.second, .animate2 img.second:hover (
nepriehľadnosť:0;
filter:alpha (nepriehľadnosť=0);
-moz-prechod: všetky 2 s ľahkosť;
-webkit-transition: všetky 2 s jednoduchosť;
-o-prechod: všetky 2s ľahkosť;
prechod: všetky 2 s ľahkosť;
}
A výsledok:
A ak pridáme vlastnosť transform:
Animate2:hover img.second, .animate2 img.second:hover (
nepriehľadnosť:0;
filter:alpha (nepriehľadnosť=0);
-moz-transform:scale(0, 1);
-webkit-transform:scale(0, 1);
-o-transform:scale(0, 1);
-ms-transform:scale(0, 1);
transform:scale(0, 1); /* zmenšiť šírku obrázka na 0 */
}
Dopadne to takto:
Kombináciou rôznych vlastností CSS môžete dosiahnuť rôzne efekty vznášania pri zmene obrázkov pri prejdení myšou. Tieto a ďalšie príklady som zverejnil na tejto stránke, kde si môžete stiahnuť aj zdrojový kód. To je všetko, kým sa znova nestretneme.
| 18.02.2016
CSS3 otvára neobmedzené možnosti pre dizajnérov používateľského rozhrania a hlavnou výhodou je, že takmer každý nápad možno ľahko implementovať a uviesť do života bez použitia JavaScriptu.
Je úžasné, ako jednoduché veci dokážu okoreniť obyčajnú webovú stránku a urobiť ju pre používateľov dostupnejšou. Hovoríme o prechodoch CSS3, pomocou ktorých môžete elementu povoliť transformáciu a zmenu štýlu napríklad pri prechode myšou. Deväť príkladov animácií CSS3 uvedených nižšie vám pomôže vytvoriť responzívny zážitok na vašom webe a tiež vylepšiť celkový vzhľad stránky s krásnymi plynulými prechodmi.
Pre podrobnejšie informácie si môžete stiahnuť archív so súbormi.
Všetky efekty pracujú s vlastnosťou prechodu. prechod- "prechod", "transformácia") a pseudotrieda: hover , ktorá určuje štýl prvku, keď sa nad ním umiestni kurzor myši ( v našom návode). V našich príkladoch sme použili div 500 x 309 pixelov, počiatočnú farbu pozadia #6d6d6d a trvanie prechodu 0,3 sekundy.
Body > div ( šírka: 500px; výška: 309px; pozadie: #6d6d6d; -webkit-transition: všetko 0,3 s ľahkosť;; -moz-prechod: všetkých 0,3 s ľahkosť;; -o-prechod: všetkých 0,3 s ľahkosť;; prechod: všetkých 0,3 s ľahkosť; )
1. Zmeňte farbu pri umiestnení kurzora myši
Kedysi bola implementácia takéhoto efektu dosť namáhavá práca s matematickými výpočtami určitých hodnôt RGB. Teraz stačí napísať css štýl, do ktorého je potrebné pridať pseudotriedu: prejdite kurzorom myši na selektor a nastavte farbu pozadia, ktorá plynulo (za 0,3 sekundy) nahradí pôvodnú farbu pozadia, keď umiestnite kurzor myši na blok:
Farba: vznášať sa (pozadie:#53ea93; )
2. Vzhľad rámu
Zaujímavou a jasnou transformáciou je vnútorný rám, ktorý sa hladko objaví, keď prejdete myšou. Dobré na zdobenie rôznych gombíkov. Na dosiahnutie tohto efektu používame pseudotriedu :hover a vlastnosť box-shadow s parametrom inset (nastavuje tieň vo vnútri prvku). Okrem toho budete musieť nastaviť roztiahnutie tieňa (v našom prípade je to 23px) a jeho farbu:
Border:hover ( box-shadow: inset 0 0 0 23px #53ea93; )
3. Hojdačka
Táto CSS animácia je výnimkou, pretože tu nie je použitá vlastnosť prechodu. Namiesto toho sme použili:
- @keyframes je základná smernica na vytváranie CSS animácie po snímke, ktorá umožňuje robiť tzv. storyboard a opíšte animáciu ako zoznam kľúčových bodov;
- animation a animation-itation-count - vlastnosti pre nastavenie parametrov animácie (trvanie a rýchlosť) a počtu cyklov (opakovaní). V našom prípade zopakujte 1.
4. Rozpad
Efekt vyblednutia je v podstate len zmena priehľadnosti prvku. Animácia sa vytvára v dvoch fázach: najprv je potrebné nastaviť počiatočný stav priehľadnosti na 1 – teda plnú nepriehľadnosť, a potom určiť jej hodnotu pri prejdení myšou – 0,6:
Fade ( nepriehľadnosť: 1; ) .fade:hover ( nepriehľadnosť: 0,6; )
Pre opačný výsledok zameňte hodnoty:
5. Priblíženie
Aby sa box zväčšil pri prechode myšou, použijeme vlastnosť transform a nastavíme jej hodnotu na scale(1.2) . V tomto prípade sa blok zvýši o 20 percent pri zachovaní jeho proporcií:
Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )
6. Znižovanie
Zmenšenie prvku je rovnako jednoduché ako jeho zvýšenie. Ak sme v piatom odseku na zvýšenie mierky potrebovali zadať hodnotu väčšiu ako 1, potom na zmenšenie bloku jednoducho zadáme hodnotu, ktorá bude menšia ako jedna, napríklad scale(0,7) . Teraz, keď podržíte myš, blok sa proporcionálne zmenší o 30 percent svojej pôvodnej veľkosti:
Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )
7. Transformácia do kruhu
Jednou z bežne používaných animácií je obdĺžnikový prvok, ktorý sa po umiestnení kurzora myši zmení na kruh. Užívanie nehnuteľnosti css border-radius, ktorý sa používa v spojení s :hover and transition , možno to implementovať bez problémov:
Kruh: podržte sa (polomer okraja: 70 %; )
8. Rotácia
Vtipnou možnosťou animácie je otočenie prvku o určitý počet stupňov. Na to opäť potrebujeme vlastnosť transform, ale s inou hodnotou - rotationZ(20deg) . S týmito parametrami sa blok otočí o 20 stupňov v smere hodinových ručičiek vzhľadom na os Z:
Rotate:hover ( -webkit-transform: rotationZ(20deg); -ms-transform:otočteZ(20deg); transform:otočteZ(20deg); )
9. 3D tieň
Dizajnéri sa nezhodujú na tom, či je tento efekt vhodný v plochom dizajne. Táto CSS3 animácia je však celkom originálna a používa sa aj na webových stránkach. Trojrozmerný efekt dosiahneme pomocou nám už známych vlastností box-shadow (vytvorí viacvrstvový tieň) a transformujeme pomocou parametra translateX (-7px) (zabezpečí posunutie bloku horizontálne doľava o 7 pixelov ):
threed:hover ( box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px9 #53ea73, 5epxit-#3px -web -7px); transform: translateX(-7px); )
Podpora prehliadača
Vlastnosť prechodu je momentálne podporovaná nasledujúcimi prehliadačmi:
| Desktopové prehliadače | |
|---|---|
| internet Explorer | Podporuje IE 10 a vyššie |
| Chrome | Podporované od verzie 26 (pred verziou 25 funguje s predponou -webkit-) |
| Firefox | Podporované od verzie 16 (vo verziách 4-15 pracuje s predponou -moz-) |
| Opera | Podporované od verzie 12.1 |
| safari | Podporované od verzie 6.1 (vo verziách 3.1-6 funguje s predponou -webkit-) |
Ostatné vlastnosti použité v týchto príkladoch, ako napríklad transform , box-shadow atď., sú tiež podporované takmer všetkými moderné prehliadače. Ak sa však chystáte použiť tieto nápady pre svoje projekty, dôrazne vám odporúčame skontrolovať kompatibilitu medzi rôznymi prehliadačmi.
Dúfame, že tieto príklady animácií CSS3 boli pre vás užitočné. Prajeme vám tvorivý úspech!
Predtým, ako sa budeme zaoberať tlačidlami, pozrime sa na nastavenia, ktoré sú spoločné pre všetky z nich.
HTML
Pre tlačidlá budú použité veľmi jednoduchý html kód:
Prihlásiť sa na odber
css
Tiež budú mať všetky tlačidlá Všeobecné nastavenia pre text nápisu a zrušenie výberu odkazov:
ButtonText ( písmo: 18px/1,5 Helvetica, Arial, bezpätkové; farba: #fff; ) a ( farba: #fff; dekorácia textu: žiadna; )
Používateľ zvyčajne očakáva pomerne mierny efekt, keď umiestnite kurzor myši na odkaz alebo tlačidlo. A v našom prípade tlačidlo zmení veľkosť - zväčší sa a zobrazí ďalšiu správu.
Hlavný kód CSS
Na začiatok musíme dať tlačidlu tvar a farbu. Definujte výšku 28px a šírku 115px, pridajte okraje a výplň a dajte tlačidlu svetlé orámovanie.
#button1 ( pozadie: #6292c2; orámovanie: 2px plné #eee; výška: 28px; šírka: 115px; okraj: 50px 0 0 50px; výplň: 0 0 0 7px; pretečenie: skryté; zobrazenie: blok; )
CSS3 efekty
Niekomu sa páči, keď je jednoduché tlačidlo sprevádzané pomerne veľkým množstvom CSS kódu. AT túto sekciu poskytuje ďalšie štýly CSS3 pre naše tlačidlo. Zaobídete sa aj bez nich, no dodávajú gombíku modernejší vzhľad.
Zaoblete rohy rámu a pridajte gradient. Tu je malý trik s tmavým gradientom, ktorý funguje s akoukoľvek farbou pozadia.
/*Zaoblené rohy*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
CSS animácia
Teraz poďme nainštalovať CSS prechod. Animácia sa použije na akékoľvek zmeny vlastností a bude trvať pol sekundy.
Vznášaj sa myšou
Zostáva len pridať štýl na rozbalenie tlačidla, keď naň prejdete myšou. Tlačidlo musí mať šírku 230 pixelov, aby sa zobrazil celý príspevok.
#button1:hover (šírka: 230px; )
Jednoduchá zmena farebného tónu
Veľmi jednoduchý a obľúbený CSS efekt pre tlačidlo. Pri pohybe kurzorom myši sa plynulo mení tón farby pozadia.
Hlavný kód CSS
CSS kód je veľmi podobný predchádzajúcemu príkladu. Používa sa iná farba pozadia a tvar je mierne upravený. Text je tiež vycentrovaný a výška riadku pre tlačidlo je nastavená tak, aby bol vertikálne vycentrovaný.
#button2 ( pozadie: #d11717; orámovanie: 2px plné #eee; výška: 38px; šírka: 125px; okraj: 50px 0 0 50px; pretečenie: skryté; zobrazenie: blok; zarovnanie textu: stred; výška riadku: 38px; )
CSS3 efekty
Nastavte zaoblenie rohov, gradient pre pozadie a ďalší tieň. Pomocou rgba urobíme tieň čiernym a priehľadným.
/*Zaoblené rohy*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2);
CSS animácia
Animácia je prakticky rovnaká ako v predchádzajúcom príklade.
/*Prechod*/ -webkit-transition: Všetky 0,5 s ľahkosť; -moz-prechod: Všetky 0,5 s ľahkosť; -o-prechod: Všetky 0,5 s ľahkosť; -ms-transition: Všetky 0,5 s ľahkosť; prechod: všetkých 0,5 s ľahkosť;
Vznášaj sa myšou
Pri prejdení kurzorom myši sa nastaví iná farba pozadia. Skúste vo Photoshope zvoliť svetlejšiu farbu, aby ste dosiahli skvelý efekt.
#button2:hover (farba pozadia: #ff3434; )
Tento efekt môže byť celkom pôsobivý v závislosti od výberu obrázka na pozadí. Demo používa neopísateľné pozadie a efekt vyzerá neopísateľne. Skúste použiť iný obrázok a môžete skončiť s úžasným efektom.
Hlavný kód CSS
Hlavná časť kódu je rovnaká ako v predchádzajúcich príkladoch. Všimnite si, že používame obrázok na pozadí. Počiatočná poloha pozadia je nastavená na "0 0". Keď umiestnite kurzor myši nad kurzor, pozícia sa posunie vertikálne.
#button3 ( background: #d11717 url("bkg-1.jpg"); background-position: 0 0; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0,3); font-size: 22px; height : 58px; šírka: 155px; okraj: 50px 0 0 50px; pretečenie: skryté; zobrazenie: blok; zarovnanie textu: na stred; výška riadku: 58px; )
CSS3 efekty
V tomto príklade nie je nič zvláštne - zaoblené rohy a tiene.
/*Zaoblené rohy*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0,2);
CSS animácia
Animácia v tomto prípade je dlhšia, aby vytvorila plynulý a zaujímavý efekt.
/*Prechod*/ -webkit-transition: Všetky 0,8 s ľahkosť; -moz-prechod: Všetky 0,8 s ľahkosť; -o-prechod: Všetky 0,8 s ľahkosť; -ms-transition: Všetky 0,8 s ľahkosť; prechod: všetkých 0,8 s ľahkosť;
Vznášaj sa myšou
Teraz je čas presunúť obrázok na pozadí. Počiatočná pozícia bola "0 0". Nastavte druhý parameter na 150px. Ak chcete posunúť horizontálne, musíte zmeniť prvý parameter.
#button3:hover (pozícia na pozadí: 0px 150px; )
3D simulované stlačenie tlačidla
Posledný príklad v našom návode sa zameriava na populárnu 3D metódu simulácie kliknutia na tlačidlo, keď naň prejdete myšou. Animácia pre tento prípad je taká jednoduchá, že nevyžaduje ani prechod CSS. Ale konečný výsledok je celkom pôsobivý.
Hlavný kód CSS
CSS kód pre naše tlačidlo.
#button4 ( pozadie: #5c5c5c; tieň textu: 0px 2px 0px rgba(0, 0, 0, 0,3); veľkosť písma: 22px; výška: 58px; šírka: 155px; okraj: 50px 0 0 50px; pretečenie: skryté ; display: block; text-align: center; line-height: 58px; )
CSS3 efekty
V tomto prípade už CSS3 nie je príjemná možnosť. Na dosiahnutie efektu sú potrebné tiene a gradient. Tvrdý tieň vytvára vzhľad 3D tlačidla.
/*Zaoblené rohy*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0,8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0,8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0,8); /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Vznášaj sa myšou
V tomto prípade máme najväčšiu vznášaciu sekciu. Dĺžka tieňa je znížená a okraje vytvárajú prelínanie tmavej zóny. Všetko spolu vytvára ilúziu stlačenia tlačidla. Prevrátením gradientu sa efekt zosilní.
#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0,8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0,8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0,8); /*Gradient*/ obrázok na pozadí: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); obrázok na pozadí: -moz-linear-gradient(dole, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4 )); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); background-image: -ms-linear-gradient( bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4));