Hogyan változtassuk meg a kép, ha lebeg a kurzort, vagy egy kicsit a hover-hatások

Változások hatását a weboldal elem, ha az egérmutató gyakran nevezik hover-hatásokat. Ez annak a ténynek köszönhető, hogy a végrehajtás ilyen hatások segítségével ál: hover. amely meghatározza a stílust egy elem, ha lebeg az egeret.

Először is, úgy a lehetőséget is könnyebb. Tegyük fel, hogy ki a képet az oldalon, az alábbiak szerint:

És mondjuk meg kell változtatni fog megjelenni, ha fölé viszi azt az egérmutatót. Amikor behelyezi a kép img tag dobvim attribútum class = „animate1”. akkor a html-kódot a kép fog kinézni:

Kezdetnek, akkor egyszerűen lebeg, hogy a kép világos. Az átláthatóság a CSS opacitás tulajdonság találkozik. arra utal, hogy a CSS3. Az alkalmazott érték tört számok 0-tól 1, ahol zéró megfelel a teljes átláthatóság, és egy egység, éppen ellenkezőleg, az átlátszóságát a tárgy. A régebbi verziójú Internet Explorer, meg kell használni a szűrő ingatlan egy alfa érték (Opacity = X). mivel azok nem támogatják a homály tulajdon. Ahelyett, hogy X lesz, hogy helyettesítse a szám 0-100, ahol a 0 azt teljes átláthatóság és 100 - teljes fényelnyelés.

Aztán, hogy a kép világos, ha a kurzor a stílus fájl, vagy címkék között és html-fájlt, akkor hozzá kell adni a következő css kód:

Abban az esetben, ha nem ismeri a CSS, azt fogja magyarázni, hogy a rekord img.animate1: hover megmondja a böngészőnek, hogy minden elemét , egy osztály attribútum egyenlő animate1 ha lebeg felettük a kurzort, alkalmazza ezeket a stílusokat. A megadott stílusok zárójelek között <и>. Ha helyesen tette, akkor kap valami ilyesmit:

Tudod, hogy a kép az eredeti állapotában áttetsző, és ha lebeg felette nem átlátszó. Majd a CSS-fájlt meg kell adni a következő sorokat:

img.animate1 szűrő: alfa (opacitás = 25);
opacitás: 0,25;
>
img.animate1: hover szűrő: alfa (opacitás = 100);
opacitás: 1;
>

Az eredmény a következő lesz:

A hozzáadott hatás, akkor lassítja a változásokat az átláthatóságot a képet. Használhatja tulajdonát CSS átmenet. amely megállapítja átmeneti hatást két tagállam között. Add például egy második lassú. Akkor a CSS kódot az alábbiak lesznek:

img.animate1 szűrő: alfa (opacitás = 25);
opacitás: 0,25;
-moz-átmenet: minden 1s enyhíteni-in-out; / * Az átmeneti hatás Firefox verzió 16.0 * /
-WebKit-átmenet: minden 1s enyhíteni-in-out; / * Az átmeneti hatást a Chrome változata 26,0, Safari, Android és IOS * /
-o-átmenet: minden 1s enyhíteni-in-out; / * Az átmeneti hatás Opera verzió 12,10 * /
átmenet: minden 1s enyhíteni-in-out; / * Az átmeneti hatást más böngészők * /
>
img.animate1: hover szűrő: alfa (opacitás = 100);
opacitás: 1;
>

Az ingatlan átalakítani kép lehet méretezni, forgatni, eltolódott, döntve. Próbáljuk a nagyobb kép. Ezután a css-kód lesz:

img.animate1 - moz-átmenet: minden 1s enyhíteni;
- WebKit-átmenet: minden 1s enyhíteni;
- o-átmenet: minden 1s enyhíteni;
átmenet: minden 1s enyhíteni;
>
img.animate1: hover - moz-transzformáció: skála (1,5); / * A rendszerváltás hatása a Firefox verzió 16.0 * /
- WebKit-transzformáció: skála (1,5); / * A rendszerváltás hatása a Chrome változat 26,0, Safari, Android és iOS * /
- o-transzformáció: skála (1,5); / * A hatás az átalakulás az Opera verzió 12,10 * /
- MS-transzformáció: skála (1,5); / * A hatás a transzformáció IE 9.0 * /
transzformáció: skála (1,5); / * A hatás a transzformáció más böngészők * /
>

És az eredmény a következő lesz:

A nagyításhoz, akkor adjunk hozzá egy kis csavarral. Ezután css stílusokat kismértékben változhat:

img.animate1 - moz-átmenet: minden 1s enyhíteni;
- WebKit-átmenet: minden 1s enyhíteni;
- o-átmenet: minden 1s enyhíteni;
átmenet: minden 1s enyhíteni;
>
img.animate1: hover - moz-transzformáció: Forgatás (360deg) skála (1,5);
- WebKit-transzformáció: Forgatás (360deg) skála (1,5);
- o-transzformáció: Forgatás (360deg) skála (1,5);
- MS-transzformáció: Forgatás (360deg) skála (1,5);






transzformáció: Forgatás (360deg) skála (1,5);
>

Fent vettük figyelembe az esetet, amikor animátori része egy kép. Ezután megvizsgálja, hogyan lehet helyettesíteni egyik képről a másikra. Ebben az esetben általában előkészíti a két kép azonos méretű, az egyik az alap nézet, a másik a helyettesítő terméket.

Tegyük fel, hogy van két kép, egy fekete, a másik fehér szín:

Legyen úgy, hogy ha az egérmutatót a fekete-fehér kép kijelző színét. Ehhez az eredeti képet fog tenni a háttérben egy div egy tulajdonság háttérben. És amikor navednii kurzort a kép meg fogja változtatni a háttérképet segítségével ugyanazt a pszeudo-hover és a tulajdon háttérben. Ahhoz, hogy ezt a hatást a html oldal hozzáadása a div elem egy osztály rotate1:

És hozzá a következő leírással stílusok:

div.rotate1 background: url (img / 2.jpg); / * A fájl elérési útvonalát az eredeti minta * /
szélesség: 480px; / * Szélesség * kép /
magasság: 360px; / * Magasság * ábra /
>
div.rotate1: lebeg background: url (img / 1.jpg); / * File Path cserélhető mintás * /
>

Ez a módszer egy nagy hátránya. Mivel a második kép betöltődik, ha a kurzor, abban az esetben, ha a felhasználó egy lassú internet kapcsolat, és a fájl mérete kép mérete nagy, a kép fog történni néhány szünet. Ezért a következő pillantást néhány módszer, hogy helyettesítse a képeket egérráhelyezéskor.

A következő módszer alapján ötvözi a két képet egy fájlba. Tegyük fel, hogy meg kell tenni az oldalon gombot, amely, ha lebeg felette az egér kurzort a megjelenést. Ebből a célból a két kép egyesítjük egy file-ba, és az így kapott kép fog kinézni:

Ebben az esetben a változás egyik minta a másikra hajtjuk végre, hogy a háttérkép függőlegesen egy ingatlan background-position. Mert ha rákattint a gombra általában váltani egy másik oldalt, majd illessze a képet a cellába . Aztán egy HTML-oldalt, illessze be a következő kódot:

És a css-fájlt, mint ez:

És tart ma így van, ha egy kép alá helyezik a másik segítségével szabályok css position: absolute. Ebben az esetben egy edénybe helyezik osztásnál két kép:

És hozzá CSS-stílusok:

animate2 helyzet: a relatív;
margin: 0 auto; / * ustanvalivaem a div az oldal közepére * /
szélesség: 480px; / * Szélesség * /
magasság: 360px; / * Magasság * /
>
.animate2 img position: abszolút; / * Abszolút pozicionálás * /
bal: 0; / * Állítsa be a kép bal felső sarkában a div-a * /
top: 0; / * Állítsa be a kép bal felső sarkában a div-a * /
>

Hozzáadása után a szabályokat css, képek alá kerül egymással. Most ellenőrző átláthatóság képeket a homály ingatlan normál állapotban jelenik meg a második képet, és amikor a kurzor az első. Ehhez a normál állapotban ezt a képet az osztály első teljesen átlátszó, és amikor a kurzor az ellenkezője: a kép az osztály második lesz teljesen átlátható, és az első osztályú, nem átlátszó:

Lehetőség van elérni a sima átmenetet a végső szabály hozzátéve CSS átmenet tulajdonság:

animate2: hover img.second. animate2 img.second: lebeg opacitás: 0;
szűrő: alfa (opacitás = 0);
-moz-átmenet: minden 2s enyhíteni;
-WebKit-átmenet: minden 2s enyhíteni;
-o-átmenet: minden 2s enyhíteni;
átmenet: minden 2s enyhíteni;
>

És ha hozzáadjuk a transzformációs tulajdonság:

animate2: hover img.second. animate2 img.second: lebeg opacitás: 0;
szűrő: alfa (opacitás = 0);
-moz-transzformáció: skála (0, 1);
-WebKit-transzformáció: skála (0, 1);
-o-transzformáció: skála (0, 1);
-ms-transzformáció: skála (0, 1);
transzformáció: skála (0, 1); / * Csökkenti a kép szélessége 0 * /
>

Kombinálásával különböző CSS tulajdonságokat lehet elérni különböző hover effektek, amikor a változó képek alatt egér fölötte van. Ezek és más példák helyeztem ezen az oldalon. Ott lehet letölteni a forráskódot. Ez minden, amíg újra nem találkozunk.

az út a kép kérte nem igaz. kódot kell nézni, túl kevés információ.

Tehát egyszerű.

Tegyük fel, hogy van két kép 100 x 100 pixel. Ahhoz, hogy ezek egyike azáltal, hogy az első képen a felső, második alulról. Ön kap a kép 100-200.

Az oldalon, hogy a készülék a mérete az eredeti kép: 100 100, és állítsa be a háttérképet kapunk.

Kiderülhet, hogy csak akkor legyen látható a felső fele a háttérképet, azaz első rajz.

A légpárnás vannak előfeszíti az áramlási minta segítségével háttér-helyzetben 100px felfelé, azaz a zadaeta háttér-helyzetben: 0 -100px;

Ebben az esetben lesz látható alsó felében a tapéta - a második képet.

Véletlen kép betöltése kép egyedi lebeg (hosszabbítás) / random image egéráthúzáskor script /

funkció randomPick (arr)

var kiválasztott = arr [Math.floor (Math.random () * arr.length)]

Kösz a cikket. Készült a webhelyen hatás animate4 - működik! Volt egy pár kérdést: stílusok, elengedhetetlen, hogy felírni? Először próbált regisztrálni a CSS fájlban - nem működött. És még egy. Mivel ezek a stílusok működnek a mobil oldalon? Miután a kurzor valójában nem ezt a feladatot kattintson a képekre. Azt gombra kattintva nyílik meg a fotót a másik oldalon. Szeretném megtartani ezt a funkciót, de az új stílusok animate4 eltűnt. És hogyan hajtsák végre a visszatérés a kép normál méretű? kattintva valahol a közelben? Ez nem működik. Lehet ez is valahogy regisztrálni?

Dean: Jó napot!

Stílusok lehet felírni a css-fájlt. Úgy látszik, hogy van valahol egy hiba.