Kursora novietošanas efekts html css

Sveiki, dārgie webcodius emuāra lasītāji! Man bieži rodas jautājumi: kā panākt, lai attēls tīmekļa lapā mainītos, novietojot peles kursoru virs tā. Šis efekts ir atrodams daudzās vietnēs, un vienkāršākais piemērs ir, kad virzāt kursoru virs pogas un pēc tam maina krāsu. Dažreiz šī efekta radīšanai tiek izmantots JavaScript, taču parasti pietiek ar CSS, īpaši kopš CSS 3. versijas izlaišanas. Vēlāk rakstā es pastāstīšu kā mainīt attēlu, virzot peles kursoru virs tā izmantojot tikai vienu CSS, es apskatīšu vairākas metodes un dažādus efektus.

Tīmekļa lapas elementa maiņas ietekmi uz peles kursoru bieži sauc lidināšanās efekti. Tas ir saistīts ar faktu, ka, ieviešot šādus efektus, tas tiek izmantots, kas nosaka elementa stilu, kad peles kursors atrodas virs tā.

Vispirms apskatīsim vienkāršāku iespēju. Pieņemsim, ka jūsu lapā ir ievietots attēls, kā parādīts tālāk:

Un pieņemsim, ka jums ir jāmaina tā displejs, kad novietojat peles kursoru virs tā. Ievietojot šo attēlu img tagā, pievienojiet atribūtu class="animate1", tad attēla html kods izskatīsies apmēram šādi:

Vispirms varat vienkārši padarīt attēlu caurspīdīgu, virzot kursoru. CSS caurspīdīgumu kontrolē necaurredzamības rekvizīts, kas ir raksturīgs CSS3. Izmantotā vērtība ir daļskaitļi no 0 līdz 1, kur nulle atbilst pilnīgai caurspīdīgumam, bet viens, gluži pretēji, atbilst objekta necaurredzamībai. Vecākām Internet Explorer versijām būs jāizmanto filtra rekvizīts ar vērtību alfa(Necaurredzamība=X), jo tās neatbalsta necaurredzamības rekvizītu. X vietā jums būs jāaizstāj skaitlis no 0 līdz 100, kur 0 nozīmē pilnīgu caurspīdīgumu, bet 100 nozīmē pilnīgu necaurredzamību.

Pēc tam, lai padarītu attēlu caurspīdīgu, virzot kursoru virs stila faila vai starp tagiem Un html failam, jums jāpievieno šāds css kods:

Ja nesaprotat CSS, ieraksts img.animate1:hover norāda pārlūkprogrammai, ka visiem elementiem , kuras klases atribūts ir vienāds ar animēt1, virzot kursoru virs tiem, izmantojiet norādītos stilus. Un stili ir norādīti starp krokainajām lencēm ( un ). Ja visu izdarījāt pareizi, tam vajadzētu izskatīties apmēram šādi:

Varat padarīt attēlu caurspīdīgu tā sākotnējā stāvoklī, bet padarīt to necaurspīdīgu, virzot kursoru virs tā. Pēc tam CSS failam jāpievieno šādas rindas:

img.animate1 (
filtrs: alfa (necaurredzamība=25);
necaurredzamība: 0,25;
}
img.animate1:hover (

necaurredzamība: 1;
}

Rezultāts būs šāds:

Lai iegūtu lielāku efektu, varat palēnināt attēla caurspīdīguma izmaiņas. Lai to izdarītu, varat izmantot CSS pārejas rekvizītu, kas iestata pārejas efektu starp diviem elementa stāvokļiem. Kā piemēru pievienosim vienas sekundes palēninājumu. Tad mūsu CSS kods izskatīsies šādi:

img.animate1 (
filtrs: alfa (necaurredzamība=25);
necaurredzamība: 0,25;
-moz-pāreja: visas 1s vieglums-in-out; /* pārejas efekts Firefox līdz versijai 16.0 */
-Webkit-transition: visas 1s vieglums-in-out; /* pārejas efekts pārlūkam Chrome līdz versijai 26.0, Safari, Android un iOS */
-o-pāreja: visas 1s vieglums-in-out; /* pārejas efekts Operai līdz versijai 12.10 */
pāreja: visas 1s vieglums-in-out; /* pārejas efekts citām pārlūkprogrammām */
}
img.animate1:hover (
filtrs: alfa (necaurredzamība=100);
necaurredzamība: 1;
}

Rezultāts:

Izmantojot transformācijas īpašību, attēlu var mērogot, pagriezt, pārvietot vai noliekt. Mēģināsim palielināt attēlu. Tad css kods būs šāds:

img.animate1(


— o-pāreja: visas 1s vieglums;
pāreja: viss 1s vieglums;
}
img.animate1:hover(
- moz-transform: skala (1,5); /* pārveidošanas efekts Firefox līdz versijai 16.0 */
- webkit-transform: mērogs (1,5); /* pārveidošanas efekts pārlūkam Chrome pirms versijas 26.0, Safari, Android un iOS */
- o-transformācija: skala (1,5); /* transformācijas efekts Operai līdz versijai 12.10 */
— ms-transformācija: skala (1,5); /* transformācijas efekts IE 9.0 */
transformēt:mērogs(1.5); /* transformācijas efekts citām pārlūkprogrammām */
}

Un rezultāts būs šāds:

Varat pievienot rotāciju, lai palielinātu attēlu. Tad css stili nedaudz mainās:

img.animate1(
— moz-pāreja: visas 1s vieglums;
- Webkit-pāreja: viss 1s vieglums;
— o-pāreja: visas 1s vieglums;
pāreja: viss 1s vieglums;
}
img.animate1:hover(
- moz-transform: pagriezt (360grādu) skalu (1,5);
- Webkit-transform: pagriezt (360grādu) skalu (1,5);
- o-transformācija: pagriezt (360grādu) skalu (1,5);
- ms-transformācija: pagriezt (360grādu) skalu (1,5);
pārveidot: pagriezt (360 grādu) skalu (1,5);
}

Rezultāts:

Iepriekš aplūkojām gadījumus, kad animācijā ir iesaistīta viena bilde. Tālāk mēs apsvērsim veidi, kā aizstāt vienu attēlu ar citu. Šajā gadījumā parasti tiek sagatavoti divi vienāda izmēra attēli: viens sākotnējam skatam, otrs tā nomaiņai.

Pieņemsim, ka mums ir divi attēli, viens melnbalts un otrs krāsains:

Padarīsim tā, lai, virzot kursoru virs melnbalta attēla, tiktu parādīts krāsains attēls. Lai to izdarītu, izveidojiet sākotnējo attēlu par div elementa fonu, izmantojot fona rekvizītu. Un, novietojot kursoru virs attēla, mēs mainīsim fona attēlu, izmantojot to pašu kursora pseidoklasi un fona rekvizītu. Lai ieviestu šo efektu, pievienojiet html lapai div elementu ar klasi rotate1:

Un pievienojiet šādus stila aprakstus:

div.rotate1(
fons: url (img/2.jpg); /* Ceļš uz failu ar avota attēlu */
platums: 480 pikseļi; /* Attēla platums */
augstums: 360 pikseļi; /* Attēla augstums */
}
div.rotate1:hover (
fons: url (img/1.jpg); /* Ceļš uz failu ar aizstājamo attēlu */
}

Un rezultāts:

Šai metodei ir viens būtisks trūkums. Tā kā otrā bilde tiek ielādēta tikai tad, kad kursors ir novietots, tad, ja lietotājam ir lēns interneta pieslēgums un attēla faila izmērs ir liels, attēls tiks parādīts ar nelielu pauzi. Tāpēc tālāk mēs apsvērsim vēl vairākus veidus, kā aizstāt attēlus, virzot peles kursoru.

Nākamā metode būs balstīta uz divu attēlu apvienošanu vienā failā. Pieņemsim, ka lapā ir jānovieto poga, kas, novietojot peles kursoru virs tās, maina tās izskatu. Lai to izdarītu, apvienojiet abus attēlus vienā failā, un iegūtais attēls izskatīsies apmēram šādi:

Šajā gadījumā pāreja no viena attēla uz citu tiks veikta, pārvietojot fona attēlu vertikāli, izmantojot īpašību fona pozīcija. Tā kā, noklikšķinot uz pogas, parasti tiek atvērta cita lapa, mēs ievietosim attēlu elementā< a>. Pēc tam html lapā ievietojiet šādu kodu:

Un css fails ir šāds:

a.rotate2 (
fons: url (img/button.png); /* Ceļš uz failu ar avota attēlu */
displejs: bloks; /* Saite kā bloka elements */
platums: 50 pikseļi; /* Attēla platums pikseļos */
augstums: 30 pikseļi; /* Attēla augstums */
}
a.rotate2:hover (
fona pozīcija: 0–30 pikseļi; /* Fona nobīde */
}

Rezultāts:

Un pēdējā šodienas metode ir, kad viens attēls tiek novietots zem cita, izmantojot CSS kārtulas pozīciju: absolūtais . Šajā gadījumā mēs ievietojam divus attēlus div konteinerā:

Un pievienojiet css stilus:

Animēt2(
pozīcija: radinieks;
margin:0 auto;/* iestatiet div bloku lapas centrā */
platums: 480 pikseļi; /* Platums */
augstums: 360 pikseļi; /* Augstums */
}
.animate2 img (
pozīcija: absolūts; /* absolūtā pozicionēšana*/
pa kreisi: 0; /* izlīdziniet attēlus div augšējā kreisajā stūrī*/
augšā: 0; /* izlīdziniet attēlus div augšējā kreisajā stūrī */
}

Pēc css noteikumu pievienošanas attēli tiks novietoti viens zem otra. Tagad, kontrolējot attēlu caurspīdīgumu, izmantojot necaurredzamības īpašību, normālā stāvoklī mēs parādīsim otro attēlu, bet, virzot kursoru, pirmo. Lai to izdarītu, normālā stāvoklī mēs padarām attēlu ar pirmo klasi pilnīgi caurspīdīgu, un, virzot kursoru, otrādi: attēls ar otro klasi būs pilnīgi caurspīdīgs, bet ar pirmo klasi tas nebūs caurspīdīgs. :

Animate2 img.first ( /* pirmais attēls ir pilnīgi caurspīdīgs */
necaurredzamība:0;
filtrs:alpha (necaurredzamība=0);
}
.animate2:hover img.first ( /* virzot kursoru, pirmais attēls kļūst necaurspīdīgs */
necaurredzamība: 1;
filtrs:alpha (necaurredzamība=100);
}
/* un otra kļūst caurspīdīga, virzot kursoru */
necaurredzamība:0;
filtrs:alpha (necaurredzamība=0);
}

Rezultāts:

Varat panākt vienmērīgu pāreju, pievienojot CSS pārejas rekvizītu pēdējam noteikumam:

Animate2:hover img.second, .animate2 img.second:hover (
necaurredzamība:0;
filtrs:alpha (necaurredzamība=0);
-moz-pāreja: visas 2s vieglums;
-Webkit-transition: visas 2s vieglums;
-o-pāreja: visas 2s vieglums;
pāreja: visas 2s vieglums;
}

Un rezultāts:

Un, ja pievienojat transformācijas rekvizītu:

Animate2:hover img.second, .animate2 img.second:hover (
necaurredzamība:0;
filtrs:alpha (necaurredzamība=0);
-moz-transform:scale(0, 1);
-webkit-transform:scale(0, 1);
-o-transform:scale(0, 1);
-ms-transform:scale (0, 1);
pārveidot:scale(0, 1); /* samazināt attēla platumu līdz 0 */
}

Tas izrādīsies šādi:

Apvienojot dažādas CSS īpašības, jūs varat sasniegt dažādas pārvietošanas efekti, mainot attēlus, turot peles kursoru. Šos un citus piemērus esmu ievietojis šajā lapā, kur var arī lejupielādēt avotus. Tas arī viss, tiekamies vēlreiz.

Laba diena, draugi! Šis ir vēl viens raksts, kas rakstīts pēc viena mana emuāra lasītāja lūguma. Šodien mēs ieviešam iespēju parādīt attēlu, novietojot peles kursoru virs saites. Kāpēc tas varētu būt nepieciešams? Viss ir ļoti vienkārši, tādā veidā jūs varat ietaupīt vietu vietnē un tajā pašā laikā atdzīvināt saites.

Kā jūs zināt, īstenojiet uznirstošie attēli varat izmantot jQuery, CSS un HTML. Šodienas rakstā es ievietošu gatavo kodu šim efektam, kā arī sniegšu vairākus vizuālus piemērus. Katrs skripts ir diezgan vienkāršs, izveidots, izmantojot CSS+HTML. Es jūs vairs negarlaikošu un sniegšu gatavus risinājumus!

Uznirstošais attēls novieto kursoru

a.site-ssilka:hover+div

Ļaujiet man īsi izskaidrot galvenos punktus. Lai parādītu uznirstošo attēlu, ir jāatsaucas uz tagu ar atribūtu src un pēc vienādības zīmes pēdiņās ierakstiet ceļu uz attēlu, vispirms to augšupielādējot vietnes saknes mapē.

Tag <а> ar nepieciešamo parametru href ir atbildīgs par saites izveidi un parādīšanu (manā piemērā tas ir teksts).

Ja vietnes elementi ir pārvietoti, varat iestatīt attēla platumu un augstumu, izmantojot īpašumu platums Un augsts. Parametri ir norādīti pikseļos.

Alt atribūts ļauj meklētājprogrammām precīzāk atpazīt attēlā attēloto.

Lielākas skaidrības labad esmu izcēlis to koda daļu, kuru, visticamāk, vēlaties mainīt.

Uznirstošais teksts, virzot kursoru virs saites

a.site-ssilka:hover+div

Esi drosmīgs!!! Novietojiet kursoru uz mani!

Kā redzams piemērā, virzot kursoru virs teksta, tiek parādīts teksta rīka padoms.

Attēls pazūd, virzot kursoru virs saites

a.site-ssilka:hover+div

Esi drosmīgs!!! Novietojiet kursoru uz mani!

Lai iepriekš pievienotu konkrētu efektu, vienkārši nokopējiet sev piemēroto kodu un ielīmējiet to teksta redaktorā. Tādējādi saiti ar uznirstošu/pazūdošu attēlu var pievienot jebkurā rakstā.

Svarīgs punkts! Katrs no iesniegtajiem skriptiem nekaitē vietnes derīgumam.

Man šķiet ne mazāk ērti uzdevumu īstenot, pievienojot veidnes stilu failam īpašu skriptu, ko parasti sauc par style.css.

Uznirstošais attēls CSS

pozīcija: relatīvs;

Sīktēls:hover(

Sīktēlu diapazons (/*CSS palielinātam attēlam*/

pozīcija: absolūta;

fona krāsa: #3d3d3d;

apmale: 1px viendabīga balta;

redzamība: slēpta;

teksta noformējums: nav;

apmales rādiuss: 4px 4px 4px 4px;

Moz-border-radius: 4px 4px 4px 4px;

Webkit-border-radius: 4px 4px 4px 4px;

Sīktēlu span img( /*CSS palielinātam attēlam*/

apmales platums: 0;

Sīktēls: kursora novietošana (/*CSS palielinātam attēlam, virzot kursoru*/

redzamība: redzama;

pa kreisi: 60 pikseļi; /*pozīcija, kur palielinātajam attēlam jābūt horizontāli nobīdītam */

Lai, virzot kursoru virs saites, tiktu parādīts uznirstošais logs, tekstā ievietojiet šo saiti:

Turklāt saiti ar uznirstošo attēlu var ievietot noteiktā veidnes daļā. Lai to izdarītu, failam index.php pievienojiet šādu kodu. Šis ir fails, kas nosaka vietnes elementu vizuālo izvietojumu.