Hezký den, přátelé! Toto je další článek napsaný na přání jednoho ze čtenářů mého blogu. Dnes implementujeme možnost zobrazení obrázku při najetí kurzorem myši na odkaz. Proč to může být nutné? Vše je velmi jednoduché, tímto způsobem můžete ušetřit místo na webu a zároveň oživit odkazy.
Jak víte, realizovat vyskakovací obrázky možné s nápověda jQuery, CSS a také HTML. V dnešním článku zveřejním hotový kód tento efekt, stejně jako některé ilustrativní příklady. Každý skript je poměrně jednoduchý, vytvořený pomocí CSS+HTML. Nebudu vás dále mučit a dám vám hotová řešení!
Vyskakovací obrázek při umístění kurzoru
a.site-ssilka:hover+div
Dovolte mi stručně vysvětlit hlavní body. Chcete-li zobrazit vyskakovací obrázek, musíte se podívat na značku
s atributem src a za rovnítko v uvozovkách napište cestu k obrázku, po nahrání do kořenový adresář místo.
Štítek <а> s povinným parametrem href je zodpovědný za vytvoření a zobrazení odkazu (v mém příkladu se jedná o text).
Pokud se prvky webu přesunuly, můžete pomocí vlastnosti nastavit šířku a výšku obrázku šířka A výška. Parametry jsou nastaveny v pixelech.
Atribut alt umožňuje vyhledávačům přesněji rozpoznat, co je na obrázku zobrazeno.
Pro přehlednost jsem zvýraznil část kódu, kterou s největší pravděpodobností budete chtít změnit.
Vyskakovací text při najetí myší na odkaz
a.site-ssilka:hover+div
Odvážnější!!! Postavte se nade mnou!
Jak můžete vidět z příkladu, když najedete myší na text, objeví se textová nápověda.
Zmizí obrázek při najetí myší na odkaz
a.site-ssilka:hover+div
Odvážnější!!! Postavte se nade mnou!
Chcete-li přidat určitý efekt výše, stačí zkopírovat kód, který vám vyhovuje, a vložit jej do textový editor. Odkaz s vyskakovacím / mizejícím obrázkem lze tedy napsat kamkoli do článku.
Důležitý bod! Každý z prezentovaných skriptů nepoškozuje platnost webu.
Za neméně vhodné považuji implementaci úkolu přidáním speciálního skriptu do souboru stylu vaší šablony, který se obvykle nazývá style.css.
Vyskakovací obrázek CSS
poloha: relativní;
Thumbnail:hover(
Rozsah miniatur ( /*CSS pro zvětšený obrázek*/
pozice: absolutní;
barva pozadí: #3d3d3d;
ohraničení: 1px plná bílá;
viditelnost: skrytý;
text-dekorace: žádná;
border-radius: 4px 4px 4px 4px;
Moz-border-radius: 4px 4px 4px 4px;
Webkit-border-radius: 4px 4px 4px 4px;
Thumbnail span img( /*CSS pro zvětšený obrázek*/
šířka okraje: 0
Thumbnail:hover span( /*CSS pro zvětšený obrázek při umístění kurzoru*/
viditelnost: viditelný;
vlevo: 60px; /*pozice, kde by se měl zvětšený obrázek horizontálně odsadit */
Chcete-li při najetí myší na odkaz zobrazit vyskakovací okno, vložte do textu následující odkaz:
Kromě toho lze vložit odkaz s vyskakovacím obrázkem určitá část vaši šablonu. Chcete-li to provést, přidejte následující kód do souboru index.php. Jedná se o soubor, který definuje vizuální uspořádání prvků webu.
V případě, že nejste obeznámeni s CSS, vysvětlím, že záznam img.animate1:hover říká prohlížeči, že pro všechny prvky , s atributem třídy rovným animate1, když na ně umístíte kurzor myši, aplikujte zadané styly. A styly jsou specifikovány mezi složené závorky( A ). Pokud je vše provedeno správně, mělo by to vypadat nějak takto:
Můžete se vyfotit původní stav průsvitný, a když na něj umístíte, udělejte jej neprůhledný. Poté musíte do souboru CSS přidat následující řádky:
img.animate1(
filtr: alfa (Neprůhlednost=25);
krytí: 0,25
}
img.animate1:hover (
neprůhlednost: 1
}
Výsledek bude takový:
Pro větší efekt můžete zpomalit změny v průhlednosti obrázku. K tomu můžete použít vlastnost přechodu CSS, která nastavuje efekt přechodu mezi dvěma stavy prvku. Připočtěme například jednu sekundu zpomalení. Náš CSS kód pak bude vypadat takto:
img.animate1(
filtr: alfa (Neprůhlednost=25);
krytí: 0,25
-moz-transition: všechny 1s easy-in-out; /* přechodový efekt pro Firefox před verzí 16.0 */
-webkit-transition: všechny 1s easy-in-out; /* přechodový efekt pro Chrome až do verze 26.0, Safari, Android a iOS */
-o-přechod: všechny 1s náběh a výstup; /* přechodový efekt pro Operu před verzí 12.10 */
přechod: všechny 1s easy-in-out; /* přechodový efekt pro jiné prohlížeče */
}
img.animate1:hover (
filtr: alfa (Neprůhlednost=100);
neprůhlednost: 1
}
Výsledek:
Pomocí vlastnosti transform lze obrázek zmenšit, otočit, posouvat, naklánět. Zkusme obrázek zvětšit. Pak bude css kód vypadat takto:
img.animate1(
- o-přechod: všechny 1s snadné;
přechod: všechny 1s snadné;
}
img.animate1:hover(
- moz-transformace: měřítko (1,5); /* efekt transformace pro Firefox starší než verze 16.0 */
- transformace webkitu: měřítko (1,5); /* efekt transformace pro Chrome až do verze 26.0, Safari, Android a iOS */
- o-transformace: měřítko (1,5); /* efekt transformace pro Operu před verzí 12.10 */
- ms-transformace: měřítko (1,5); /* efekt transformace pro IE 9.0 */
transform:scale(1.5); /* efekt transformace pro jiné prohlížeče */
}
A výsledek bude takový:
Pro zvětšení obrázku lze přidat rotaci. Pak se styly css trochu změní:
img.animate1(
moz-transition: lehkost všech 1s;
webkit-transition: all 1s easy;
- o-přechod: všechny 1s snadné;
přechod: všechny 1s snadné;
}
img.animate1:hover(
- moz-transformace: otočení (360 stupňů) stupnice (1,5);
- transformace webkitu: otočte (360 stupňů) měřítko (1,5);
- o-transformace: otočení (360 stupňů) stupnice (1,5);
- ms-transformace: otočení (360 stupňů) stupnice (1,5);
transformace: rotace (360 stupňů) měřítko (1,5);
}
Výsledek:
Výše jsme uvažovali o případech, kdy je do animace zapojen jeden obrázek. Dále zvažte jak nahradit jeden obrázek jiným. V tomto případě jsou obvykle připraveny dva obrázky stejné velikosti: jeden pro původní pohled, druhý pro jeho nahrazení.
Řekněme, že máme dva obrázky, jeden černobílý a druhý barevný:
Udělejme to tak, že když najedete nad černobílý obrázek zobrazeny barevně. Za tímto účelem uděláme z původního obrázku pozadí prvku div pomocí vlastnosti background. A když najedete na obrázek kurzoru, změníme se obrázek na pozadí pomocí stejné pseudotřídy hover a vlastnosti pozadí. Chcete-li tento efekt implementovat na html stránku přidejte prvek div s třídou rotation1:
A přidejte následující popis stylu:
div.rotate1(
pozadí: url (img/2.jpg); /* Cesta k souboru s původním obrázkem */
šířka: 480px /* Šířka obrázku */
výška: 360px; /* Výška obrázku */
}
div.rotate1:hover (
pozadí: url (img/1.jpg); /* Cesta k souboru s nahrazeným obrázkem */
}
A výsledek:
Tato metoda má jednu významnou nevýhodu. Vzhledem k tomu, že druhý obrázek se načte pouze při umístění kurzoru, pak pokud má uživatel pomalé připojení k internetu a velikost souboru s obrázkem je velká velikost, snímek se zobrazí s určitou pauzou. Proto níže zvážíme několik dalších způsobů, jak nahradit obrázky při najetí kurzorem myši.
Další metoda bude založena na spojení dvou obrázků do jednoho souboru. Řekněme, že potřebujeme na stránku umístit tlačítko, které by při najetí kurzorem myši změnilo svůj vzhled. Za tímto účelem zkombinujeme dva obrázky do jednoho souboru a výsledný obrázek bude vypadat asi takto:
V tomto případě se změna z jednoho vzoru na jiný provede posunem obrázek na pozadí vertikálně pomocí vlastnosti background-position. Vzhledem k tomu, že při kliknutí na tlačítko obvykle přejdete na jinou stránku, vložíme obrázek do prvku< a>. Poté vložte následující kód do html stránky:
A v souboru css, jako je tento:
a.rotate2(
pozadí: url (img/button.png); /* Cesta k souboru s původním obrázkem */
displej:blok; /* Odkaz jako prvek bloku */
šířka: 50px /* Šířka obrázku v pixelech */
výška: 30px; /* Výška obrázku */
}
a.rotate2:hover(
background-position: 0-30px; /* Odsazení pozadí */
}
Výsledek:
A poslední způsob pro dnešek je, když se jeden obrázek umístí pod druhý s css pozice: absolutní pravidla. V tomto případě jsme do kontejneru div vložili dva obrázky:
A přidejte styly css:
Animovat2(
poloha:relativní;
margin:0 auto;/* nastaví blok div na střed stránky*/
šířka:480px; /* Šířka */
výška: 360px; /* Výška */
}
.animate2 img(
poloha:absolutní; /* absolutní umístění*/
vlevo: 0; /* zarovná obrázky doleva horní roh div-a*/
nahoře: 0; /* zarovnat obrázky do levého horního rohu div */
}
Po přidání css pravidel budou obrázky umístěny pod sebou. Nyní ovládáte průhlednost obrázků pomocí vlastnosti neprůhlednosti v normálním stavu zobrazíme druhý obrázek a když najedete myší na první. Abychom to udělali, v normálním stavu uděláme obrázek s první třídou zcela průhledný, a když najedete kurzorem, opak je pravdou: obrázek s druhou třídou bude zcela průhledný a s první třídou bude nebýt transparentní:
Animate2 img.first ( /* první obrázek je plně průhledný */
neprůhlednost:0;
filter:alpha (neprůhlednost=0);
}
.animate2:hover img.first ( /* první obrázek se stane neprůhledným při umístění kurzoru */
neprůhlednost:1;
filtr:alfa (neprůhlednost=100);
}
/* a druhý se po najetí stane průhledným */
neprůhlednost:0;
filter:alpha (neprůhlednost=0);
}
Výsledek:
Hladkého přechodu můžete dosáhnout přidáním vlastnosti přechodu CSS do posledního pravidla:
Animate2:hover img.second, .animate2 img.second:hover (
neprůhlednost:0;
filter:alpha (neprůhlednost=0);
-moz-transition: všechny 2s snadné;
-webkit-transition: všechny 2s snadné;
-o-přechod: všechny 2s snadné;
přechod: všechny 2s snadné;
}
A výsledek:
A pokud přidáme vlastnost transform:
Animate2:hover img.second, .animate2 img.second:hover (
neprůhlednost:0;
filter:alpha (neprůhlednost=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ší šířku obrázku na 0 */
}
Dopadne to takto:
Kombinací různých vlastností CSS můžete dosáhnout různých efekty vznášení při změně obrázků při najetí myší. Tyto a další příklady jsem zveřejnil na této stránce, kde si také můžete stáhnout zdrojový kód. To je vše, dokud se znovu nesejdeme.
| 18.02.2016
CSS3 otevírá neomezené možnosti pro designéry uživatelského rozhraní a hlavní výhodou je, že téměř jakýkoli nápad lze snadno implementovat a uvést do života bez použití JavaScriptu.
Je úžasné, jak jednoduché věci dokážou okořenit obyčejnou webovou stránku a učinit ji pro uživatele dostupnější. Řeč je o přechodech CSS3, pomocí kterých můžete prvku umožnit transformaci a změnu stylu například při najetí myší. Devět příkladů animací CSS3 níže vám pomůže vytvořit na vašem webu responzivní prostředí a také zlepšit celkový vzhled stránky s krásnými plynulými přechody.
Pro podrobnější informace si můžete stáhnout archiv se soubory.
Všechny efekty pracují s vlastností přechodu. přechod- "přechod", "transformace") a pseudotřída: hover , která určuje styl prvku, když na něj najedete kurzorem myši ( v našem tutoriálu). Pro naše příklady jsme použili div 500x309 pixelů, počáteční barvu pozadí #6d6d6d a dobu přechodu 0,3 sekundy.
Body > div ( šířka: 500px; výška: 309px; pozadí: #6d6d6d; -webkit-transition: všech 0,3 s lehkost;; -moz-přechod: všech 0,3 s lehkost;; -o-přechod: všech 0,3 s lehkost;; přechod: všech 0,3 s snadnost;)
1. Změňte barvu při najetí myší
Kdysi byla implementace takového efektu docela namáhavá práce s matematickými výpočty určitých hodnot RGB. Teď už stačí napsat styl css, do kterého je potřeba přidat pseudotřídu: najeďte na selektor a nastavte barvu pozadí, která plynule (za 0,3 sekundy) nahradí původní barvu pozadí, když najedete na blok:
Barva:hover (pozadí:#53ea93; )
2. Vzhled rámu
Zajímavou a jasnou proměnou je vnitřní rámeček, který se plynule objeví, když najedete myší. Dobré pro zdobení různých knoflíků. K dosažení tohoto efektu používáme pseudotřídu :hover a vlastnost box-shadow s parametrem inset (nastavuje stín uvnitř prvku). Navíc budete muset nastavit roztažení stínu (v našem případě je to 23px) a jeho barvu:
Border:hover ( box-shadow: inset 0 0 0 23px #53ea93; )
3. Houpačka
Tato CSS animace je výjimkou, protože zde není použita vlastnost přechodu. Místo toho jsme použili:
- @keyframes je základní direktiva pro tvorbu CSS animace snímek po snímku, která umožňuje provádět tzv. scénář a popište animaci jako seznam klíčových bodů;
- animation a animation-itation-count - vlastnosti pro nastavení parametrů animace (trvání a rychlost) a počtu cyklů (opakování). V našem případě opakujte 1.
4. Rozpad
Efekt vyblednutí je v podstatě jen změna průhlednosti prvku. Animace se vytváří ve dvou fázích: nejprve je potřeba nastavit počáteční stav průhlednosti na 1 – tedy plnou neprůhlednost, a poté zadat její hodnotu při najetí myší – 0,6:
Fade ( opacity: 1; ) .fade:hover ( opacity: 0.6; )
Pro opačný výsledek vyměňte hodnoty:
5. Přiblížení
Aby se box zvětšil při najetí myší, použijeme vlastnost transform a nastavíme jeho hodnotu na scale(1.2) . V tomto případě se blok zvýší o 20 procent při zachování jeho proporcí:
Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )
6. Snížení
Snížení prvku je stejně snadné jako jeho zvýšení. Pokud jsme v pátém odstavci pro zvětšení měřítka potřebovali zadat hodnotu větší než 1, pak pro zmenšení bloku jednoduše zadáme hodnotu, která bude menší než jedna, například scale(0.7) . Nyní, když najedete myší, blok se proporcionálně zmenší o 30 procent své původní velikosti:
Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )
7. Transformace do kruhu
Jednou z běžně používaných animací je obdélníkový prvek, který se po najetí myší změní na kruh. Používáním vlastnosti css border-radius , používaný ve spojení s :hover and transition , to lze bez problémů implementovat:
Kruh:hover (poloměr ohraničení: 70 %; )
8. Rotace
Vtipnou možností animace je otočení prvku o určitý počet stupňů. K tomu opět potřebujeme vlastnost transform, ale s jinou hodnotou - rotationZ(20deg) . S těmito parametry bude blok otočen o 20 stupňů ve směru hodinových ručiček vzhledem k ose Z:
Rotate:hover ( -webkit-transform: rotationZ(20deg); -ms-transform:otočteZ(20deg); transform:otočteZ(20deg); )
9. 3D stín
Návrháři se neshodnou na tom, zda je tento efekt vhodný v plochém designu. Tato CSS3 animace je však zcela originální a používá se i na webových stránkách. Trojrozměrného efektu dosáhneme pomocí nám již známých vlastností box-shadow (vytvoří vícevrstvý stín) a transformujeme pomocí parametru translateX (-7px) (zajistí posunutí bloku vodorovně doleva o 7 pixelů ):
threed:hover ( box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px9 #53ea73, 5eapxit- #3px:web -7px); transform: translateX(-7px); )
Podpora prohlížeče
Vlastnost přechodu je aktuálně podporována následujícími prohlížeči:
| Desktopové prohlížeče | |
|---|---|
| internet Explorer | Podporováno IE 10 a vyšší |
| Chrome | Podporováno od verze 26 (před verzí 25 pracuje s prefixem -webkit-) |
| Firefox | Podporováno od verze 16 (ve verzích 4-15 pracuje s prefixem -moz-) |
| Opera | Podporováno od verze 12.1 |
| safari | Podporováno od verze 6.1 (ve verzích 3.1-6 pracuje s prefixem -webkit-) |
Zbytek vlastností použitých v těchto příkladech, jako je transform , box-shadow atd., jsou také podporovány téměř všemi moderní prohlížeče. Pokud však tyto nápady hodláte použít pro své projekty, důrazně doporučujeme zkontrolovat kompatibilitu mezi různými prohlížeči.
Doufáme, že tyto příklady animací CSS3 byly pro vás užitečné. Přejeme vám kreativní úspěch!
Než se budeme zabývat tlačítky, podívejme se na nastavení, která jsou pro všechna společná.
HTML
Pro tlačítka budou velmi používána jednoduchý html kód:
předplatit
css
Také všechna tlačítka budou mít Obecné nastavení pro text nápisu a zrušení výběru odkazů:
ButtonText ( písmo: 18px/1,5 Helvetica, Arial, bezpatkové; barva: #fff; ) a ( barva: #fff; zdobení textu: žádné; )
Uživatel obvykle očekává poměrně mírný efekt, když najede myší na odkaz nebo tlačítko. A v našem případě tlačítko změní velikost - zvětší se a zobrazí další zprávu.
Hlavní CSS kód
Pro začátek potřebujeme pouze dát tlačítku tvar a barvu. Definujte výšku 28px a šířku 115px, přidejte okraje a odsazení a dejte tlačítku světlý okraj.
#button1 ( pozadí: #6292c2; ohraničení: 2px plné #eee; výška: 28px; šířka: 115px; okraj: 50px 0 0 50px; výplň: 0 0 0 7px; přetečení: skryté; zobrazení: blok; )
CSS3 efekty
Někomu se líbí, když je jednoduché tlačítko doprovázeno poměrně velkým množstvím CSS kódu. V tato sekce poskytuje další styly CSS3 pro naše tlačítko. Obejdete se bez nich, ale tlačítku dodávají modernější vzhled.
Zaoblete rohy rámu a přidejte přechod. Zde je malý trik s tmavým přechodem, který funguje s jakoukoli barvou pozadí.
/*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 animace
Nyní pojďme nainstalovat CSS přechod. Animace bude použita pro jakékoli změny vlastností a bude trvat půl sekundy.
Vznášet myš
Zbývá pouze přidat styl pro rozbalení tlačítka, když na něj najedete myší. K zobrazení celého příspěvku musí být tlačítko široké 230 pixelů.
#button1:hover ( šířka: 230px; )
Snadná změna barevného tónu
Velmi jednoduchý a oblíbený CSS efekt pro tlačítko. Při pohybu kurzorem myši plynule mění tón barvy pozadí.
Hlavní kód CSS
CSS kód je velmi podobný předchozímu příkladu. Je použita jiná barva pozadí a tvar je mírně upraven. Text je také vycentrován a výška řádku pro tlačítko je nastavena tak, aby byl svisle vycentrován.
#button2 ( pozadí: #d11717; ohraničení: 2px plné #eee; výška: 38px; šířka: 125px; okraj: 50px 0 0 50px; přetečení: skryté; zobrazení: blok; zarovnání textu: na střed; výška řádku: 38px; )
CSS3 efekty
Nastavte zaoblení rohů, přechod pro pozadí a další stín. Pomocí rgba uděláme stín černý a průhledný.
/*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)); /*Stín*/ -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 animace
Animace je prakticky stejná jako v předchozím příkladu.
/*Přechod*/ -webkit-transition: Všech 0,5 s snadnost; -moz-transition: Všechny 0,5s volnosti; -o-přechod: Všechny 0,5s snadnost; -ms-transition: Všechny 0,5s snadnost; přechod: všech 0,5 s lehkost;
Vznášet myš
Při najetí kurzorem myši se nastaví jiná barva pozadí. Zkuste ve Photoshopu vybrat světlejší barvu, abyste dosáhli skvělého efektu.
#button2:hover (barva pozadí: #ff3434; )
Tento efekt může být docela působivý v závislosti na výběru obrázku na pozadí. Demo používá nepopsatelné pozadí a efekt vypadá nepopsatelně. Zkuste použít jiný obrázek a můžete skončit s úžasným efektem.
Hlavní kód CSS
Hlavní část kódu je stejná jako v předchozích příkladech. Všimněte si, že používáme obrázek na pozadí. Výchozí poloha pozadí je nastavena na "0 0". Když najedete na kurzor, pozice se posune svisle.
#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; šířka: 155px; okraj: 50px 0 0 50px; přetečení: skryté; zobrazení: blok; zarovnání textu: na střed; výška řádku: 58px; )
CSS3 efekty
V tomto příkladu není nic zvláštního - zaoblené rohy a stíny.
/*Zaoblené rohy*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px /*Stín*/ -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 animace
Animace je v tomto případě delší, aby vytvořila plynulý a zajímavý efekt.
/*Přechod*/ -webkit-transition: Vše 0,8s snadnost; -moz-transition: Všechny 0,8s volnosti; -o-přechod: všech 0,8s lehkost; -ms-transition: Všech 0,8s snadnost; přechod: všech 0,8 s lehkost;
Vznášet myš
Nyní je čas přesunout obrázek na pozadí. Výchozí pozice byla "0 0". Nastavte druhý parametr na 150px. Chcete-li se posunout vodorovně, musíte změnit první parametr.
#button3:hover (pozice na pozadí: 0px 150px; )
3D simulované stisknutí tlačítka
Poslední příklad v našem tutoriálu se zaměřuje na populární 3D metodu simulace kliknutí na tlačítko, když na něj najedete myší. Animace pro tento případ je tak jednoduchá, že ani nevyžaduje přechod CSS. Ale konečný výsledek je docela působivý.
Hlavní kód CSS
CSS kód pro naše tlačítko.
#button4 ( pozadí: #5c5c5c; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0,3); velikost písma: 22px; výška: 58px; šířka: 155px; okraj: 50px 0 0 50px; přetečení: skryté ; display: block; text-align: center; line-height: 58px; )
CSS3 efekty
V tomto případě už CSS3 není dobrá volba. K dosažení efektu jsou nutné stíny a přechod. Tvrdý stín vytváří vzhled 3D tlačítka.
/*Zaoblené rohy*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px /*Stín*/ -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ášet myš
V tomto případě máme největší hover sekci. Délka stínu je zkrácena a okraje vytvářejí prolnutí tmavé zóny. Vše dohromady vytváří iluzi stisknutí tlačítka. Převrácení přechodu zesiluje efekt.
#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ázek na pozadí: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); obrázek 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));)