CSS efekt při najetí myší na obrázek. Vytváříme originální hover efekty pomocí CSS3 Efekt různých pozadí v html

| 18.02.2016

CSS3 otevírá neomezené možnosti pro designéry uživatelského rozhraní a hlavní výhodou je, že prakticky jakýkoli nápad lze snadno implementovat a implementovat v reálném životě, aniž byste se museli uchýlit k JavaScriptu.

Je úžasné, jak jednoduchá slova mohou oživit domovskou stránku a zpřístupnit ji uživatelům. Přejděte do CSS3 a zjistěte, jak můžete prvku povolit transformaci a změnu stylu, například když najedete na kurzor. Devět CSS3 animačních aplikací, které jsou k dispozici níže, pomůže vytvořit na webu atmosféru rozmaru a také vylepší funky vzhled webu s krásnými plynulými přechody.

Pro podrobnější informace si můžete stáhnout archivy souborů.

Všechny efekty fungují pomocí power transition. přechod- „Transition“, „re-creation“) a pseudotřída: hover, která označuje styl prvku při najetí myší na nový kurzor (v našem asistentovi). Pro naše aplikace jsme použili blok div o rozměrech 500x309 pixelů, výstupní barva pozadí byla #6d6d6d a přechod z jedné fáze do druhé trval 0,3 sekundy.

Body > div ( šířka: 500px; výška: 309px; pozadí: #6d6d6d; -webkit-přechod: 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 umístěním kurzoru

Pokud by implementace takového efektu vyžadovala hodně práce s matematickými výpočty hodnot RGB písně. Nyní musíte napsat styl CSS, ve kterém musíte do selektoru přidat pseudotřídu:hover a nastavit barvu pozadí, která plynule (za 0,3 sekundy) nahradí výstupní barvu pozadím, když najedete kurzorem na blok:

Barva:hover (pozadí:#53ea93; )

2. Vzhled rámu

Nejviditelnější transformací je vnitřní rámeček, který se hladce objeví, když na něj najedete myší. Dobré pro zpříjemnění různých tlačítek. K dosažení tohoto efektu použijte následující pseudotřídu: hover a sílu box-shadow s parametrem inset (nastavuje stín středu prvku). Navíc je potřeba nastavit stínování (v našem odstínu 23px) na stejnou barvu:

Border:hover ( box-shadow: inset 0 0 0 23px #53ea93; )

3. Houpačka

CSS animace je dána - výtka, protože zde není využita síla přechodu. Místo toho se nás dotklo:

@keyframes - základní direktiva pro tvorbu CSS animace snímek po snímku, která umožňuje pracovat tak dále. storyboarding a popis animace se seznamem klíčových bodů;
animace a animace-iterace-počet - možnost nastavit parametry animace (sladkost a plynulost) a počet cyklů (opakování). Občas opakujte 1.

@-webkit-keyframes swing ( 15 % ( -webkit-transform: translateX(9px); transform: translateX(9px); ) 30 % ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40 % ( -webkit-transform: translateX(6px); transform: translateX(6px); ) 50 % ( -webkit-transform: translateX(-6px); transform: translateX(-6px); ) 65 % ( -webkit -transform: translateX(3px); transform: translateX(3px); ) 100 % ( -webkit-transform: translateX(0); transform: translateX(0); ) ) @keyframes swing ( 15 % ( -webkit-transform: 30 % ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40 % ( -webkit-transform: translateX(6px); transform : translateX(6px); ) 50 % ( -webkit- transform: translateX(-6px); transform: translateX(-6px); ) 65 % ( -webkit-transform: translateX(3px); transform: translateX(3px); ) 100 % ( -webkit-transform: translateX(0) ; transform: translateX(0); ) ) .swing:hover ( -webkit-animation: švih 0,6 s lehkost; animace: švih 0,6 s lehkost; -webkit-animation-iteration-count: 1; animation-itration-count: 1 ; )

4. Zgasannya

Efekt plynulého zániku je v podstatě normální změnou jasnosti prvku. Animace je vytvořena ve dvou fázích: je nutné nastavit klas viditelnosti úrovně 1 - pak nebude viditelnost, poté zadejte tyto hodnoty při najetí myší - 0,6:

Fade ( opacity: 1; ) .fade:hover ( opacity: 0.6; )

Pro nejlepší výsledek změňte hodnoty na místech:

5. Zbilshenya

Aby se blok při najetí kurzorem zvětšil, rychle použijeme transform a nastavíme hodnotu na scale(1.2) . V tomto případě se blok zvýší o 20 stovek uložením jeho proporcí:

Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )

6. Změna

Změna prvku je stejně jednoduchá jako jeho zvětšení. Protože v pátém odstavci, abychom zvětšili měřítko, museli jsme zadat hodnotu větší než 1, pak pro změnu bloku jednoduše zadáme hodnotu, která je menší než jedna, například scale(0,7). Nyní, když najedete myší, blok se proporcionálně změní o 30 setin své velikosti:

Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )

7. Transformace v koloně

Jednou z nejoblíbenějších animací je přímkový prvek, který se po najetí kurzorem změní na kruh. Pro další výkon CSS border-radius, vikorista na stejné úrovni jako: hover and transition, to lze bez problémů implementovat:

Kruh:hover (poloměr ohraničení: 70 %; )

8. Obertannya

Praktickou verzí animace je otočení prvku o několik stupňů. K tomuto účelu opět potřebujeme sílu transformace a také s jinými hodnotami - rotaciZ(20deg). S těmito parametry bude blok otočen o 20 stupňů za šipkou roku podél osy Z:

Rotate:hover ( -webkit-transform: rotationZ(20deg); -ms-transform:otočteZ(20deg); transform:otočteZ(20deg); )

9. 3D stín

Nápady designérů se liší v přesném účinku plochého designu. Neméně tato CSS3 animace je velmi originální a je oblíbená i na webových stránkách. Dosáhněte triviálního efektu pomocí již známých schopností box-shadow (pro vytvoření bohatého stínu) a transformujte pomocí parametru translateX(-7px) (aby bylo zajištěno, že se blok posune 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 6px - 6px transform: translate-X( -7px transform): translate-X( -7px 7px);

Podpora prohlížeče

Ode dneška podporují přechod napájení následující prohlížeče:

Desktopové prohlížeče
internet Explorer	Podporováno IE 10 a vyšší
Chrome	Podporováno od verze 26 (do verze 25 je podporováno s předponou -webkit-)
Firefox	Podporováno verzí 16 (verze 4-15 používají předponu -moz-)
Opera	Podporováno verzí 12.1
Safari	Podporováno ve verzi 6.1 (verze 3.1-6 používají předponu -webkit-)

Ostatní funkce a variace v těchto aplikacích, jako je transformace, box-shadow atd., jsou také podporovány většinou současných prohlížečů. Pokud však tyto nápady hodláte použít pro své projekty, důrazně doporučujeme znovu zkontrolovat funkčnost napříč prohlížeči.

Jsme si jisti, že tyto animační aplikace CSS3 shledáte užitečné. Přejeme vám kreativní úspěch!

Hover-efekty – dokončete téma pro učení. I jejich implementace může udělat váš web dynamičtějším a živějším. Dnes se podíváme na některé efekty pro práci s obrázky. Totéž platí pro HTML a CSS kódy, které se můžete naučit ze hry.

Zbilshennya

Pro začátek je důležité, že pokud uživatel najede kurzorem na obrázek, fotografie se zvětší, ale bude se dál ztrácet v kordonech.

Osa HTML-kód:

"http://lorempixel.com/400/400/people/9" alt="(!JAZYK:na výšku" > !}!}

Vezměte prosím na vědomí, že obrázek, stejně jako ten na obrázku, měří 400 x 400 pixelů. Teď se divme CSS.

/*GROW*/ .grow img ( výška : 300px ; šířka : 300px ; -webkit-transition: all 1s easy; -moz-transition: all 1s easy; -o-transition: all 1s easy; -ms-transition: 1s easy; transition: all 1s easy; ) .grow img:hover ( width : 400px ; height : 400px ; )

Zpočátku jsme nastavili velikost zoo obrázku na 300 pixelů a poté, když na něj uživatel najede, se zvětší na 400 pixelů. Máme přetečení – skryté, což nám umožňuje odstranit efekt škálování.

Stisnennya

V minulosti jsme žasli nad tím, jak se obrázky zvětší, když je kurzor na myši. Pojďme se podívat na efekt otáčení. Tento způsob je v podstatě stejný, jen tentokrát budete rozměry považovat za 400px a při najetí kurzorem je změníte na 300px.

"http://lorempixel.com/400/400/nightlife/4" alt="(!JAZYK:město" > !}!}

/*SHRINK*/ .shrink img ( výška : 400px ; šířka : 400px ; -webkit-transition: all 1s easy; -moz-transition: all 1s easy; -o-transition: all 1s easy; -all-trans 1s easy ; přechod: snadnost všech 1 s; ) .shrink img:hover ( šířka : 300px ; výška : 300px ; )

Boční panorama

V aktuálním efektu se velikost obrázku nemění, ale po kliknutí se fotografie odsune. To je dobrý způsob, jak zvýšit pevnost objektu.

"http://lorempixel.com/600/300/sports/8" alt="kop" > !}!}

Zde použijeme obrázek vikorist o šířce 600px a výšce menší než 300px - měníme horizontální polohu fotografie a nepotřebujeme zmrazovat efekty do výšky.

/*SIDEPAN*/ .sidepan img ( margin-left : 0px ; -webkit-transition: margin 1s easy; -moz-transition: margin 1s easy; -o-transition: margin 1s easy; -ms-transition: margin 1s easy přechod: margin 1s easy; ) .sidepan img:hover ( margin-left : -200px ; )

Abychom vytvořili efekt panorámování, neměníme velikost obrázku, jako jsme to udělali minule, ale místo toho se stejným okrajem umístíme obrázek levou rukou. Pokud chcete, aby se obraz pohyboval pravou rukou, vyberte okraj vpravo.

Vertikální panorama

Abychom efekt přenesli do roury, zopakujme tento efekt ještě jednou – to se hodí i pro vytvoření vertikálního rýžování.

"http://lorempixel.com/300/600/sports/5" alt = "(!JAZYK:vylézt" > !}!}

/*VERTPAN*/ .vertpan img ( margin-top : 0px ; -webkit-transition: margin 1s easy; -moz-transition: margin 1s easy; -o-transition: margin 1s easy; transition: margin 1s easy; ) . vertpan img:hover ( margin-top : -200px ; )

Kód je prakticky stejný jako minule, jen nyní nahrazujeme margin-left za margin-top.

Proměna

Okamžité efekty jsou dynamické.

Nakhil

Nyní to uděláme tak, že když najedete na obrázky, uvidíte střih.

"http://lorempixel.com/300/300/transport/5" alt="auto" > !}!}

/*TILT*/ .tilt ( -webkit-transition: všech 0,5 s lehkost; -moz-přechod: všech 0,5 s lehkost; -o-transition: všech 0,5 s lehkost; -ms-přechod: všech 0,5 s ese; přechod: všech 0,5 s plynulost; ) .tilt :hover ( -webkit-transform: otočit(-10 stupňů) ; -moz-transform: otočit (-10 stupňů) ; -o-transformovat: otočit(-10 stupňů) ; - ms-transform: otočit (-10 stupňů) ; transformovat: otočit (-10 stupňů) ; )

Jak vidíte, vše, co potřebujeme, je otočit obrázek o deset stupňů. Je to tak účinné!

Zaoblení řezů

Když na obrázek ukážete, začne se otáčet a přeměnit se z kolíku na čtverec.

"http://lorempixel.com/300/300/nature/5" alt="pláž" > !}!}

/*MORPH*/ .morph ( -webkit-transition: všech 0,5 s lehkost; -moz-přechod: všech 0,5 s lehkost; -o-transition: všech 0,5 s lehkost; -ms-přechod: všech 0,5 s snadnost; přechod: všech 0,5 s snadnost; ) .morph :hover ( border-radius: 50 % ; -webkit-transform: otočit (360 stupňů); -Moz-transformace: otočení (360 stupňů); -o-transformace: otočení (360 stupňů); -ms-transform: otočit (360 stupňů); transformace: rotace (360 stupňů) ; )

Zde je vložena třída morph, která se začne otáčet o 360 stupňů, když na ni najedete kurzorem myši, a border-radius se postupně změní na 50% a poté se změní na kruh.

Soustředit se

Dalším způsobem je použít border-radius k zaoblení obrázku. Tentokrát však nezvětšíme jen border-radius, ale i další věc. Použití border-boxu vytvoří efekt, který se zaměří na určitou část obrázku.

"http://lorempixel.com/300/300/sports/1" alt="kriket" > !}!}

/*FOCUS*/ .focus ( -webkit-transition: všechny 1s snadné; -moz-transition: všechny 1s snadné; -o-transition: všechny 1s snadné; -ms-transition: všechny 1s snadné; přechod: všechny 1s snadné; ) .focus :hover ( border : 70px solid # 000 ; hraniční poloměr: 50 % ; }

Vzali jsme okraj 10px a změnili černý okraj o 70px a otočili jsme poloměr až o 50%, což jsme udělali na frontendu.

Filtr Webkit

Aby byla zajištěna maximální funkčnost prohlížeče, takové aplikace nebudou používat předponu WebKit. Tato data již nejsou dostupná v Safari a Chrome. Bez ohledu na omezení vám filtry Webkit umožňují měnit akce, abyste dosáhli úžasných efektů! Demo

Rosmittya

První efekt, který jsme zastosovuvatimemo, je prostě rosmitya. Nyní se můžete dostat k další malé řadě kódů.

Nejprve pro ty, kteří se v předmětu ještě úplně nebo vůbec neorientují, stručně vysvětlím, co je to vznášení. Na prvky webu lze s kurzorem myši aplikovat různé typy efektů (titulky, popisky, plynulé přechody, transformace, rotace, vylepšení, přemístění atd.). Ty lze implementovat buď pomocí různých pluginů jQuery, nebo v čisté podobě.
Dnes jsem připravoval velkou sbírku originálních hover efektů pro obrázky, vytvořených pomocí CSS3, bez připojení javascriptových knihoven. Nebudu mluvit o výhodách a nedostatcích implementace hover efektů na čistém CSS3, to je jiné téma, jen žasněte nad příklady a v případě potřeby podobnosti na svém webu vikorizujte. Všechny efekty jsou prezentovány na první pohled s demonstračním zadkem a dokumentací zpráv s výstupními zařízeními. Příručky jsou víceméně buržoazní, ale vše je víceméně intuitivně pochopeno.

Rád bych vyjádřil vaši úctu k tomu, že všechny tyto aplikace fungují správně pouze v současných prohlížečích, které podporují sílu CSS3.

Aby nedošlo ke zkažení skrytého obrazu, aniž by došlo k překroucení strojovým překladem názvů efektů (pro všechny účely), zbavení originálů názvů, jak je vydavatel nazval.

Velmi znatelný efekt při zaměření na miniaturu je zobrazen s výskytem tenkých čar v designu a dalších částech. Objevuje se řada různých typů efektů od titulků po obrázky, měkké a nevtíravé 3D transformace a plynulé přechody pseudoprvků. V moderních prohlížečích funguje méně dobře.

iHover má pozoruhodnou sbírku efektů, když se vznášíte na čistém CSS3, s pomocí Bootstrap 3. Inspirováno Scss CSS (soubor), snadno upravitelné. Modulární kód, není nutné zahrnout celý soubor do práce. 30+ různých efektů v jednom balení. Vše je dobře zdokumentováno, účinky jsou ve Vikoristánu ještě jednodušší. Vše, co musíte udělat, je správně rozvržení HTML a před zahájením práce zahrnout soubor CSS.

Vytváří řadu jednoduchých, ale stylových efektů v závislosti na hodině podpisu obrázku. Myšlenka je taková, že když najedete myší na miniaturu, efektně se zobrazí název, jméno autora a tlačítko odkazu. Pro určité efekty se používají vizuální 3D transformace.

Velmi jednoduchý přechodový efekt, bez jakýchkoli zvláštních zvonků a píšťalek, kolem obrazu v rámečku, se při vznášení promění v měnící se ohnisko a to je vše.

pro miniatury pomocí CSS3

Maloobchodník umístí své dílo jako galerii zadku, která zobrazuje efekty přechodů z vyskakovacích anotací (titulek) k miniaturám. Uvádí se, že jej budou podporovat současné prohlížeče včetně IE 9+. Plnohodnotnou galerii je samozřejmě těžké nazvat, ale efekt vzhledu podpisů je kompletní.

Základní sada pravidel CSS pro vytváření nepříznivých efektů při najetí myší na dokonale kulaté miniatury. Balíček obsahuje 7 typů přechodů CSS3 včetně dokumentace ze školení a vývoje. Efekty jsou podporovány současnými prohlížeči.

Obtékání miniatur při najetí myší

Jednoduchý efekt obtékání kulatých miniatur při najetí kurzorem myši na ně, přibližně stejný, jaký můžete vidět na mém blogu, v oznámeních nahrávek na hlavě. Je implementován pomocí několika řádků kódu CSS.

Chcete-li doslovně přeložit: „Sexuální efekt, když se na něj ukáže“. Něco tak sexuálního, čehož si pravděpodobně nevšimnete, pokud nemáte bujnou fantazii, ale účinek je svým způsobem užitečný a zvyšuje respekt k novému muži.

Pět různých efektů, které se zobrazí, když na ně ukážete. Signatury ve třech variantách, závěsy s různou mírou viditelnosti a ovinutí s horizontálními pohyby.

4 Podívejte se na animační efekty popisků obrázků, implementované včetně použití CSS3. Různé polohy s výskytem přechodových efektů jsou zcela standardní. Abyste pochopili, jak animace funguje, podívejte se na výstupní kód ukázkové stránky, aniž byste viděli doprovodnou dokumentaci.

Do sítě galerií byly přidány miniatury s různými efekty, jako jsou podpisy, obalování, vyvolávání, spojování atd. Dokumentace od zdroje a úprava je mizivá, ale můžete požádat o zvláštní požadavek.

Tento efekt není nic zvláštního, jde o banální změnu jasu obrazu při vznášení nebo dokonce přidání prvku animace. Podrobnosti implementace budete muset zjistit sami přečtením výstupní ukázky.

Další sada 10 efektů hover pro obrázky, různé pohledy na miniatury při vznášení, zoom, rotace, rotace, ztmavení atd.

Různé efekty animace rámečku kolem obrázku, vypadá to velmi atraktivně a je tam zpráva o úpravě a wiki.

Původní efekty přechodu na CSS3, které se používají pro efektivní vzhled titulků miniatur při najetí myší. Sada pravidel CSS obsahuje 10 různých efektů, které lze přizpůsobit pro různé obrázky. Účinky skutečně ovlivňují, zejména pokud jde o pochopení toho, co se dělá bez pomoci CSS3. Podrobný průvodce, který vám pomůže zjistit, co se děje.

Cílem je vytvořit SVG, což je formulář na pozadí pro jakékoli psaní a přemění se do jiné formy, když na něj najedete myší. Tímto způsobem můžete vytvořit řadu různých možností a příklad ukazuje tři typy přechodových efektů. Výhodou použití SVG je, že můžeme změnit velikost formuláře tak, aby odpovídal velikosti původního kontejneru.

Rozsuvní obrázky

Podstatou tohoto efektu je, že se obrázek zobrazuje nahoru a dolů, aby se objevil titulek. Pokud si pohrajete s parametry stylu, myslím, že můžete dosáhnout pěkných efektů, ale celkově vše vypadá docela jednoduše.

S tímto efektem je vše jednoduché, popisky k obrázkům jsou vidět vpravo nahoře nebo dole, dole na stránce se objevují čáry s tmavým pozadím, vše je jednoduše přeformátováno pomocí síly CSS .

Jak byly navrženy, miniatury jsou zobrazeny v tmavém vzhledu; když na ně umístíte ukazatel myši, zobrazí se obrázky a podpis se spojí na světlé pozadí.

Popisek před obrázkem se objeví z rohu a diagonálně se rozšíří po celé ploše obrázku.

Existuje řada dalších řešení pro implementaci podpisů před miniaturami obrázků. V online editoru můžete experimentovat s parametry a dosáhnout požadovaných výsledků.

Sada krásných efektů při najetí na miniatury, různé typy vzhledu a provedení popisků k obrázkům. Tenké čáry v kontrastu s malým ztmavením vytvářejí snadno srozumitelné informační bloky.

Chimérické formy a efekt jsou vylepšeny díky efektu animace, když se titulky objeví před zobrazením miniatur.

Příklad vytvoření efektu vizuálního snímku pro zobrazení objemových titulků na obrázcích pouze pomocí CSS3 a HTML5.

6 popisků k obrázkům

6 možností pro vzhled titulků před obrázky při najetí myší na další CSS3. Nejužitečnější lekce z implementace a úpravy k dispozici na víkend.

No, konečně, konečně, nemůžu si pomoct, ale přemýšlím o nejjednodušším způsobu, jak vytvořit slučovací titulek k miniatuře pomocí CSS3.

O této metodě jsem se dozvěděl v jedné z mých předchozích lekcí: .

Chtěli byste co nejdříve poslat zprávu robotovi na stránce? Nyní je to zcela možné! Z těchto jednoduchých důvodů se na trhu TemplateMonster objevila nová sekce. Kolekce bude aktualizována, ale nyní můžete zjistit, co je vhodné pro váš online projekt. Vše, co musíte udělat, je vybrat si ideální hotové řešení a propracovat se prezentací požadovaných informací. A nezapomeňte, že text do šablony dopisu musíte napsat ručně.

S úctou Andriy

Nejprve pro ty, kteří se v předmětu ještě úplně nebo vůbec neorientují, stručně vysvětlím, co to je. Různé typy efektů (titulky, popisky, plynulé přechody, transformace, rotace, vylepšení, přemístění atd.) lze aplikovat na prvky webu, když na ně najedete kurzorem myši. Tyto efekty lze implementovat pomocí různých pluginů jQuery nebo v čistém .
Dnes jsem připravoval velkou sbírku originálních hover efektů pro obrázky, vytvořených pomocí CSS3, bez připojení javascriptových knihoven. Nebudu mluvit o výhodách a nedostatcích implementace hover efektů na čistém CSS3, to je jiné téma, jen žasněte nad příklady a v případě potřeby podobnosti na svém webu vikorizujte. Všechny efekty jsou prezentovány na první pohled s demonstračním zadkem a dokumentací zpráv s výstupními zařízeními. Příručky jsou víceméně buržoazní, ale vše je víceméně intuitivně pochopeno.

Rád bych vyjádřil vaši úctu k tomu, že všechny tyto aplikace fungují správně pouze v současných prohlížečích, které podporují sílu CSS3.

Aby nedošlo ke zkažení skrytého obrazu, aniž by došlo k překroucení strojovým překladem názvů efektů (pro všechny účely), zbavení originálů názvů, jak je vydavatel nazval.

Velmi jednoduchý přechodový efekt, bez jakýchkoli zvláštních zvonků a píšťalek, kolem obrazu v rámečku, se při vznášení promění v měnící se ohnisko a to je vše.