Jó napot barátaim! Ez egy újabb cikk a blogom egyik olvasójának kérésére. Ma megvalósítjuk a kép megjelenítésének lehetőségét, amikor az egérmutatót egy hivatkozás fölé viszi. Miért lehet erre szükség? Minden nagyon egyszerű, így helyet takaríthat meg az oldalon, és egyúttal újraélesztheti a hivatkozásokat.
Mint tudod, a megvalósításhoz felugró képek-vel lehetséges jQuery segítség, CSS és HTML is. A mai cikkben közzéteszem kész kód ezt a hatást, és ad egy pár jó példák. Mindegyik szkript meglehetősen egyszerű, CSS+HTML használatával készült. Nem kínozlak tovább, és kész megoldásokat adok!
Előugró kép az egérrel
a.site-ssilka:hover+div
Hadd magyarázzam el röviden a főbb pontokat. Egy felugró kép megjelenítéséhez hivatkoznia kell a címkére
az src attribútummal és az egyenlőségjel után idézőjelben írja be a kép elérési útját, miután feltöltötte ide gyökérkönyvtár webhely.
Címke <а> a kötelező href paraméterrel a hivatkozás létrehozásáért és megjelenítéséért felelős (az én példámban ez szöveg).
Ha a webhely elemei elmozdultak, a tulajdonság segítségével beállíthatja a kép szélességét és magasságát szélességés magasság. A paraméterek pixelben vannak megadva.
Az alt attribútum lehetővé teszi, hogy a keresőmotorok pontosabban felismerjék a képen látható dolgokat.
Az egyértelműség kedvéért kiemeltem a kódnak azt a részét, amelyet valószínűleg módosítani szeretne.
Felugró szöveg, amikor az egérmutatót egy link fölé viszi
a.site-ssilka:hover+div
Merészebb!!! Lebegj felettem!
Amint a példából is látható, ha a szöveg fölé viszi az egérmutatót, megjelenik egy szöveges eszköztipp.
Eltűnő kép, amikor az egérmutatót egy link fölé viszi
a.site-ssilka:hover+div
Merészebb!!! Lebegj felettem!
A fenti hatás hozzáadásához egyszerűen másolja ki az Önnek megfelelő kódot, és illessze be szöveg szerkesztő. Így a cikkben bárhol beírható egy felugró / eltűnő képpel rendelkező hivatkozás.
Fontos pont! A bemutatott szkriptek egyike sem sérti a webhely érvényességét.
Nem kevésbé kényelmesnek tartom a feladat megvalósítását úgy, hogy egy speciális szkriptet adunk hozzá a sablon stílusfájljához, amelyet általában style.css-nek hívnak.
CSS felugró kép
pozíció: relatív;
Miniatűr:hover(
Thumbnail span( /*CSS a kinagyított képhez*/
pozíció: abszolút;
háttérszín: #3d3d3d;
szegély: 1px tömör fehér;
láthatóság: rejtett;
szöveg-dekoráció: nincs;
border-radius: 4px 4px 4px 4px;
Moz-border-radius: 4px 4px 4px 4px;
Webkit-border-radius: 4px 4px 4px 4px;
Thumbnail span img( /*CSS a kinagyított képhez*/
szegély szélessége: 0
Thumbnail:hover span( /*CSS a kinagyított képhez*/
láthatóság: látható;
bal: 60px; /*pozíció, ahol a kinagyított képnek vízszintesen el kell tolnia */
Ha egy felugró ablakot szeretne megjeleníteni, amikor egy hivatkozás fölé viszi az egérmutatót, illessze be a következő hivatkozást a szövegbe:
Ezen kívül egy felugró képpel ellátott hivatkozás is beilleszthető bizonyos részét a sablonod. Ehhez adja hozzá a következő kódot az index.php fájlhoz. Ez egy olyan fájl, amely meghatározza a webhely elemeinek vizuális elrendezését.
Ha nem ismeri a CSS-t, elmagyarázom, hogy az img.animate1:hover bejegyzés közli a böngészővel, hogy minden elemre , amelynek osztályattribútuma egyenlő az animáció1-el, amikor az egérmutatót föléjük viszi, alkalmazza a megadott stílusokat. A stílusok pedig között vannak megadva göndör fogszabályozó( és ). Ha mindent jól csinált, akkor valahogy így kell kinéznie:
Képet tudsz csinálni eredeti állapotáttetsző legyen, és ha rámutat, ne legyen átlátszó. Ezután hozzá kell adnia a következő sorokat a CSS-fájlhoz:
img.animate1(
szűrő: alfa (Opacity=25);
átlátszatlanság: 0,25
}
img.animate1:hover(
átlátszatlanság: 1
}
Az eredmény a következő lesz:
A nagyobb hatás érdekében lelassíthatja a kép átlátszóságának változását. Ehhez használhatja a CSS átmeneti tulajdonságát, amely beállítja az átmenet hatását egy elem két állapota között. Például adjunk hozzá egy másodperces lassulást. Ekkor a CSS kódunk így fog kinézni:
img.animate1(
szűrő: alfa (Opacity=25);
átlátszatlanság: 0,25
-moz-transition: mind 1s easy-in-out; /* átmeneti hatás a Firefox 16.0-s verziója előtt */
-webkit-átmenet: minden 1-es könnyű be-ki; /* átmeneti effektus a Chrome-hoz 26.0-s verzióig, Safari, Android és iOS verzióig */
-o-átmenet: minden 1-es könnyű be-ki; /* átmeneti hatás az Opera 12.10-es verziója előtt */
átmenet: mind 1s könnyű be-ki; /* átmeneti effektus más böngészőkhöz */
}
img.animate1:hover(
szűrő: alfa (Opacity=100);
átlátszatlanság: 1
}
Eredmény:
A transzformációs tulajdonság segítségével a kép méretezhető, forgatható, eltolva, dönthető. Próbáljuk meg nagyítani a képet. Ekkor a css kód a következő lesz:
img.animate1(
- o-átmenet: minden 1-es könnyű;
átmenet: minden 1s könnyű;
}
img.animate1:hover(
- moz-transzformáció: skála (1,5); /* átalakítási effektus a 16.0-s verzió előtti Firefoxhoz */
- webkit-transzformáció: skála (1,5); /* átalakítási effektus Chrome-hoz 26.0-s verzióig, Safari, Android és iOS verzióig */
- o-transzformáció: skála (1,5); /* transzformációs effektus az Opera 12.10 előtti verziójához */
- ms-transzformáció: skála (1,5); /* transzformációs effektus IE 9.0-hoz */
transzformáció:scale(1.5); /* transzformációs effektus más böngészőkhöz */
}
Az eredmény pedig a következő lesz:
A kép kinagyításához forgatást lehet hozzáadni. Aztán a css stílusok kicsit megváltoznak:
img.animate1(
moz-átmenet: minden 1-es könnyű;
webkit-átmenet: minden 1s könnyű;
- o-átmenet: minden 1-es könnyű;
átmenet: minden 1s könnyű;
}
img.animate1:hover(
- moz-transzformáció: forgatás (360 fok) skála (1,5);
- webkit-transzformáció: a skála elforgatása (360 fok) (1,5);
- o-transzformáció: elforgatni (360 fokos) skálát (1,5);
- ms-transzformáció: a skála elforgatása (360 fok) (1,5);
transzformáció: forgatás(360 fok) skála(1,5);
}
Eredmény:
Fentebb megvizsgáltuk azokat az eseteket, amikor egy kép szerepel az animációban. Ezután fontolja meg hogyan lehet az egyik képet egy másikra cserélni. Ilyenkor általában két egyforma méretű kép készül: az egyik az eredeti nézethez, a másik a cseréjéhez.
Tegyük fel, hogy van két képünk, az egyik fekete-fehér, a másik színes:
Tegyük úgy, hogy ha egy fekete-fehér kép fölé viszi az egeret, egy színes kép jelenjen meg. Ehhez az eredeti képet a div elem hátterévé tesszük a background tulajdonság segítségével. És amikor a kurzor képe fölé viszi az egeret, megváltozunk háttér kép ugyanazt a hover pszeudoosztályt és háttértulajdonságot használva. Ennek a hatásnak a végrehajtásához html oldal adjunk hozzá egy div elemet a rotate1 osztállyal:
És adja hozzá a következő stílusleírásokat:
div.rotate1(
háttér: url (img/2.jpg); /* Az eredeti képet tartalmazó fájl elérési útja */
szélesség: 480 képpont /* A kép szélessége */
magasság: 360 képpont; /* Kép magassága */
}
div.rotate1:hover (
háttér: url (img/1.jpg); /* A lecserélt képet tartalmazó fájl elérési útja */
}
És az eredmény:
Ennek a módszernek van egy jelentős hátránya. Mivel a második kép csak akkor töltődik be, ha a kurzort fölé viszi, ezért ha a felhasználónak lassú az internetkapcsolata és nagy a képfájl mérete, a kép szünettel jelenik meg. Ezért az alábbiakban megvizsgálunk néhány további módot a képek cseréjére, amikor az egérmutatót mozgatjuk.
A következő módszer két kép egy fájlba való egyesítésén alapul. Tegyük fel, hogy el kell helyeznünk egy gombot az oldalon, aminek ha az egérmutatót fölé viszi, megváltozik a megjelenése. Ehhez két képet egyesítünk egy fájlba, és a kapott kép így fog kinézni:
Ebben az esetben az egyik mintáról a másikra való váltás eltolással történik háttérkép függőlegesen a background-position tulajdonság használatával. Mivel a gombra kattintva általában egy másik oldalra lépünk, a képet beillesztjük az elembe< a>. Ezután illessze be a következő kódot a html oldalra:
És egy ilyen css fájlban:
a.rotate2(
háttér: url (img/button.png); /* Az eredeti képet tartalmazó fájl elérési útja */
display:block; /* Hivatkozás blokk elemként */
szélesség: 50 képpont /* A kép szélessége pixelben */
magasság: 30 képpont; /* Kép magassága */
}
a.rotate2:hover(
háttérpozíció: 0-30 képpont; /* Háttér eltolás */
}
Eredmény:
A mai nap utolsó módja pedig az, amikor az egyik kép a másik alá kerül css pozíció: abszolút szabályok. Ebben az esetben két képet helyezünk a div tárolóba:
És adjunk hozzá css stílusokat:
Animate2(
pozíció:relatív;
margó:0 auto;/* a div blokkot az oldal közepére állítja*/
szélesség: 480 képpont; /* Szélesség */
magasság: 360 képpont; /* Magasság */
}
.animate2 img(
pozíció:abszolút; /* abszolút pozicionálás*/
balra: 0; /* igazítsa a képeket balra felső sarok díva*/
felső: 0; /* igazítsa a képeket a div bal felső sarkához */
}
A css szabályok hozzáadása után a képek egymás alá kerülnek. Most a képek átlátszóságát szabályozza átlátszatlanság tulajdonságai normál állapotban a második képet jelenítjük meg, és amikor az egérmutatót az első fölé viszi. Ehhez normál állapotban az első osztályú képet teljesen átlátszóvá tesszük, és amikor a kurzort felvisszük, az ellenkezője igaz: a második osztályú kép teljesen átlátszó lesz, az első osztállyal pedig ne legyen átlátszó:
Animate2 img.first ( /* az első kép teljesen átlátszó */
átlátszatlanság:0;
filter:alpha (átlátszatlanság=0);
}
.animate2:hover img.first ( /* az első kép átlátszatlanná válik a lebegtetéskor */
átlátszatlanság:1;
filter:alpha (átlátszatlanság=100);
}
/* és a második átlátszóvá válik a lebegtetéskor */
átlátszatlanság:0;
filter:alpha (átlátszatlanság=0);
}
Eredmény:
Zökkenőmentes átmenetet érhet el, ha az utolsó szabályhoz hozzáadja a CSS-átmenet tulajdonságot:
Animate2:hover img.second, .animate2 img.second:hover (
átlátszatlanság:0;
filter:alpha (átlátszatlanság=0);
-moz-átmenet: minden 2s könnyű;
-webkit-átmenet: minden 2 egyszerű;
-o-átmenet: minden 2s könnyű;
átmenet: minden 2s könnyű;
}
És az eredmény:
És ha hozzáadjuk a transzformációs tulajdonságot:
Animate2:hover img.second, .animate2 img.second:hover (
átlátszatlanság:0;
filter:alpha (átlátszatlanság=0);
-moz-transform:scale(0, 1);
-webkit-transform:scale(0, 1);
-o-transzformáció:scale(0, 1);
-ms-transform:scale(0, 1);
transzformáció:scale(0, 1); /* a kép szélességének csökkentése 0-ra */
}
Így fog kiderülni:
A különböző CSS-tulajdonságok kombinálásával különböző eredményeket érhet el lebegő effektusok amikor az egér lebegtetése közben képeket változtat. Ezeket és más példákat ezen az oldalon tettem közzé, ahonnan a forráskódot is letöltheti. Ez minden, amíg újra nem találkozunk.
| 18.02.2016
A CSS3 korlátlan lehetőségeket nyit meg a felhasználói felület tervezői számára, és a fő előnye, hogy szinte minden ötlet könnyen megvalósítható és életre kelthető JavaScript használata nélkül.
Lenyűgöző, hogy egyszerű dolgok mennyire feldobnak egy közönséges weboldalt, és így könnyebben elérhetővé teszik a felhasználók számára. CSS3-as átmenetekről beszélünk, amelyekkel lehetővé teheti az elem átalakítását és stílusának megváltoztatását, például lebegtetéskor. Az alábbi kilenc CSS3-animációs példa segít reszponzív élmény kialakításában webhelyén, valamint javítja az oldal általános megjelenését a gyönyörű sima átmenetekkel.
Részletesebb információkért letöltheti a fájlokat tartalmazó archívumot.
Minden effektus az átmeneti tulajdonsággal működik. átmenet- "átmenet", "transzformáció") és egy pszeudoosztály: hover , amely meghatározza az elem stílusát, amikor az egérkurzort fölé viszi (az oktatóanyagunkban). Példáinkhoz 500x309 pixeles div-t, #6d6d6d kezdeti háttérszínt és 0,3 másodperces átmeneti időtartamot használtunk.
Body > div ( szélesség: 500 képpont; magasság: 309 képpont; háttér: #6d6d6d; -webkit-transition: minden 0.3s könnyű; -moz-transition: minden 0.3s könnyű; -o-transition: minden 0.3s könnyű;; átmenet: minden 0,3 másodperccel egyszerű;)
1. Változtassa meg a színt lebegtetéskor
Valamikor egy ilyen hatás megvalósítása meglehetősen fáradságos munka volt, bizonyos RGB-értékek matematikai számításaival. Most elég leírni css stílusban, amelyben hozzá kell adni a pszeudoosztályt: vigye az egérmutatót a választóra, és állítsa be a háttérszínt, amely simán (0,3 másodperc alatt) lecseréli az eredeti háttérszínt, ha a blokk fölé viszi az egérmutatót:
Szín: lebegő ( háttér: #53ea93; )
2. A keret megjelenése
Érdekes és fényes átalakítás a belső keret, amely simán megjelenik, ha az egér fölé viszi az egeret. Különféle gombok díszítésére alkalmas. A hatás eléréséhez a :hover pszeudoosztályt és a box-shadow tulajdonságot használjuk az inset paraméterrel (beállítja az árnyékot az elemen belül). Ezenkívül be kell állítania az árnyékfeszítést (esetünkben 23 képpont) és annak színét:
Szegély:lebegés (box-shadow: inset 0 0 0 23px #53ea93; )
3. Swing
Ez a CSS-animáció kivétel, mivel itt nem használjuk az átmeneti tulajdonságot. Ehelyett a következőket használtuk:
- A @keyframes egy alapvető direktíva egy képkockánkénti CSS-animáció létrehozásához, amely lehetővé teszi, hogy ún. storyboard és írja le az animációt a kulcspontok listájaként;
- animation és animation-itration-count - tulajdonságok az animációs paraméterek (időtartam és sebesség) és a ciklusok számának (ismétlődések) beállításához. Esetünkben ismételje meg az 1.
4. Bomlás
A fade hatás alapvetően csak egy elem átlátszóságának megváltoztatását jelenti. Az animáció két lépésben jön létre: először be kell állítania a kezdeti átlátszósági állapotot 1-re - azaz teljes átlátszatlanságra, majd az egérmutató rámutatásakor adja meg az értékét - 0,6:
Fade ( átlátszatlanság: 1; ) .fade:hover ( opacitás: 0,6; )
Az ellenkező eredményhez cserélje fel az értékeket:
5. Nagyítás
Ahhoz, hogy a doboz nagyobb legyen lebegtetés közben, a transzformációs tulajdonságot használjuk, és az értékét a scale(1.2) értékre állítjuk. Ebben az esetben a blokk 20 százalékkal nő, miközben megtartja arányait:
Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )
6. Csökkentő
Egy elem csökkentése ugyanolyan egyszerű, mint növelése. Ha az ötödik bekezdésben a skála növeléséhez 1-nél nagyobb értéket kellett megadnunk, akkor a blokk csökkentéséhez egyszerűen olyan értéket adunk meg, amely egynél kisebb lesz, például skála(0,7) . Most, amikor az egeret lebegteti, a blokk arányosan az eredeti méretének 30 százalékával csökken:
Shrink:hover ( -webkit-transzformáció: scale(0.7); -ms-transform: scale(0.7); transzformáció: skála(0.7); )
7. Átalakítás körré
Az egyik leggyakrabban használt animáció egy téglalap alakú elem, amely körré alakul, ha fölé viszi az egérmutatót. Az ingatlan használata css határsugár, a :hover és az átmeneti funkcióval együtt használva, ez probléma nélkül megvalósítható:
Kör:lebegés (szegélysugár: 70%; )
8. Forgatás
Egy vicces animációs lehetőség egy elem bizonyos számú fokkal történő elforgatása. Ehhez ismét szükségünk van a transzformációs tulajdonságra, de más értékkel - rotateZ(20deg) . Ezekkel a paraméterekkel a blokk 20 fokkal az óramutató járásával megegyező irányban el lesz forgatva a Z tengelyhez képest:
Rotate:hover ( -webkit-transzformáció: forgatásZ(20 fok); -ms-transzformáció: forgatásZ(20 fok); transzformáció: forgatásZ(20 fok); )
9. 3D árnyék
A tervezők nem értenek egyet abban, hogy ez a hatás megfelelő-e a lapos kialakításban. Ez a CSS3 animáció azonban meglehetősen eredeti, és weboldalakon is használják. Háromdimenziós hatást érünk el a már ismert box-shadow tulajdonságokkal (többrétegű árnyékot hoz létre) és transzformációt a translateX (-7px) paraméterrel (biztosítja, hogy a blokk vízszintesen balra 7 képponttal eltolódjon) ):
threed:hover ( doboz-árnyék: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 5px 5px #53ea93, 6px 5px #53ea93, 6px #px -7px); transzformáció: translateX(-7px); )
Böngésző támogatás
Az átmeneti tulajdonságot jelenleg a következő böngészők támogatják:
| Asztali böngészők | |
|---|---|
| internet böngésző | IE 10 és újabb verzió támogatja |
| Króm | A 26-os verzió óta támogatott (mielőtt a 25-ös verzió a -webkit- előtaggal működött) |
| Firefox | A 16-os verzió óta támogatott (a 4-15-ös verziókban -moz- előtaggal működik) |
| Opera | A 12.1-es verzió óta támogatott |
| szafari | A 6.1-es verzió óta támogatott (a 3.1-6-os verziókban -webkit- előtaggal működik) |
A példákban használt többi tulajdonságot, például a transzformációt, a box-shadow stb., szintén szinte minden támogatja modern böngészők. Ha azonban ezeket az ötleteket használja projektjeihez, erősen javasoljuk, hogy ellenőrizze még egyszer a böngészők közötti kompatibilitást.
Reméljük, hogy ezek a CSS3 animációs példák hasznosak voltak az Ön számára. Kreatív sikereket kívánunk!
Mielőtt a gombokkal foglalkoznánk, nézzük meg azokat a beállításokat, amelyek mindegyikre jellemzőek.
HTML
A gombokat nagyon fogják használni egyszerű html a kód:
Iratkozz fel
css
Valamint minden gombnak meglesz Általános beállítások a felirat szövegéhez és a hivatkozások kijelölésének megszüntetéséhez:
ButtonText ( betűtípus: 18px/1,5 Helvetica, Arial, sans-serif; szín: #fff; ) a ( szín: #fff; szövegdekoráció: nincs; )
Általában a felhasználó meglehetősen enyhe hatást vár el, amikor az egeret egy hivatkozás vagy gomb fölé viszi. És esetünkben a gomb mérete megváltozik - növekszik, további üzenetet mutatva.
Fő CSS kód
Kezdésként csak formát és színt kell adnunk a gombnak. Határozzon meg 28 képpont magasságot és 115 képpont szélességet, adjon hozzá margókat és párnázást, és adjon világos keretet a gombnak.
#button1 (háttér: #6292c2; szegély: 2px tömör #eee; magasság: 28px; szélesség: 115px; margó: 50px 0 0 50px; kitöltés: 0 0 0 7px; túlcsordulás: rejtett; kijelző: blokk; )
CSS3 effektusok
Vannak, akik szeretik, ha egy egyszerű gombot elég sok CSS-kód kísér. NÁL NÉL ez a szekció további CSS3 stílusokat biztosít gombunkhoz. Meg lehet nélkülük is, de modernebb megjelenést kölcsönöznek a gombnak.
Kerekítse le a keret sarkait, és adjon hozzá egy színátmenetet. Íme egy kis sötét gradiens trükk, amely bármilyen háttérszínnel működik.
/*Lekerekített sarkok*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; határsugár: 15 képpont; /*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áció
Most telepítsük CSS átállás. Az animációt a rendszer minden tulajdonságváltozáshoz felhasználja, és fél másodpercig tart.
Egér lebeg
Csak egy stílust kell hozzáadni a gomb kibontásához, amikor az egérmutatót fölé viszi. A teljes bejegyzés megjelenítéséhez a gombnak 230 képpont szélesnek kell lennie.
#button1:hover (szélesség: 230 képpont; )
Könnyű színtónusváltás
Egy nagyon egyszerű és népszerű CSS-effektus egy gombhoz. Ha mozgatja az egérkurzort, simán megváltozik a háttérszín tónusa.
Fő CSS kód
A CSS kód nagyon hasonló az előző példához. Eltérő háttérszínt használnak, és a forma kissé módosul. A szöveg szintén középre kerül, és a gomb sormagassága úgy van beállítva, hogy függőlegesen középre kerüljön.
#button2 ( háttér: #d11717; szegély: 2px tömör #eee; magasság: 38px; szélesség: 125px; margó: 50px 0 0 50px; túlcsordulás: rejtett; megjelenítés: blokk; szövegigazítás: középre; vonalmagasság: 38px; )
CSS3 effektusok
Állítsa be a sarkok lekerekítését, a háttér színátmenetét és a kiegészítő árnyékot. Az rgba segítségével feketévé és átlátszóvá tesszük az árnyékot.
/*Lekerekített sarkok*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; szegélysugár: 10 képpont /*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áció
Az animáció gyakorlatilag megegyezik az előző példával.
/*Transition*/ -webkit-transition: Minden 0,5 s egyszerű; -moz-transition: Minden 0,5 másodperc egyszerű; -o-átmenet: Minden 0,5 s könnyű; -ms-transition: Minden 0,5 másodperc egyszerű; átmenet: Minden 0,5 s könnyű;
Egér lebeg
Amikor az egérmutatót mozgatja, egy másik háttérszín lesz beállítva. A nagyszerű hatás érdekében próbáljon világosabb színt választani a Photoshopban.
#button2:hover ( háttérszín: #ff3434; )
Ez a hatás meglehetősen lenyűgöző lehet a háttérkép kiválasztásától függően. A demó nem leírható hátteret használ, és a hatás leírhatatlannak tűnik. Próbáljon meg másik képet használni, és lenyűgöző hatást érhet el.
Fő CSS kód
A kód fő része megegyezik az előző példákkal. Vegye figyelembe, hogy háttérképet használunk. A háttér kezdeti pozíciója "0 0"-ra van állítva. Ha az egérmutatót a kurzor fölé viszi, a pozíció függőlegesen eltolódik.
#button3 ( háttér: #d11717 url("bkg-1.jpg"); háttér helyzete: 0 0; szövegárnyék: 0px 2px 0px rgba(0, 0, 0, 0.3); betűméret: 22px; magasság : 58 képpont; szélesség: 155 képpont; margó: 50 képpont 0 0 50 képpont; túlcsordulás: rejtett; megjelenítés: blokk; szövegigazítás: középre; vonalmagasság: 58 képpont; )
CSS3 effektusok
Ebben a példában nincs semmi különös - lekerekített sarkok és árnyékok.
/*Lekerekített sarkok*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; szegélysugár: 5 képpont /*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áció
Ebben az esetben az animáció hosszabb, hogy egyenletes és érdekes hatást hozzon létre.
/*Transition*/ -webkit-transition: Minden 0.8s egyszerű; -moz-transition: Minden 0.8s könnyű; -o-átmenet: Minden 0.8s könnyű; -ms-transition: Minden 0.8s egyszerű; átmenet: Minden 0.8s könnyű;
Egér lebeg
Itt az ideje áthelyezni a háttérképet. A kezdeti pozíció "0 0" volt. A második paramétert állítsa 150 képpontra. A vízszintes eltoláshoz meg kell változtatni az első paramétert.
#button3:hover ( háttérpozíció: 0px 150px; )
3D szimulált gombnyomás
Az oktatóanyagunk utolsó példája a népszerű 3D-s módszerre összpontosít, amely szimulálja a gombkattintást, amikor az egérmutatót fölé viszi. Az animáció ebben az esetben olyan egyszerű, hogy még CSS átmenetet sem igényel. De a végeredmény egészen lenyűgöző.
Fő CSS kód
CSS kód gombunkhoz.
#button4 ( háttér: #5c5c5c; szövegárnyék: 0px 2px 0px rgba(0, 0, 0, 0.3); betűméret: 22px; magasság: 58px; szélesség: 155px; margó: 50px 0 0 50px; túlcsordulás ; kijelző: blokk; szövegigazítás: középre; vonalmagasság: 58 képpont; )
CSS3 effektusok
Ebben az esetben a CSS3 már nem jó választás. A hatás eléréséhez árnyékokra és színátmenetre van szükség. A kemény árnyék egy 3D gomb megjelenését kelti.
/*Lekerekített sarkok*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; szegélysugár: 5 képpont /*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));
Egér lebeg
Ebben az esetben a legnagyobb lebegő szakaszunk van. Az árnyék hossza lecsökken, a margók pedig a sötét zónát keverik össze. Mindez együtt egy gombnyomás illúzióját kelti. A színátmenet megfordítása fokozza a hatást.
#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*/ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); háttérkép: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4 )); háttérkép: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); háttérkép: -ms-linear-gradient( alsó, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); háttérkép: lineáris gradiens(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4));)