Tere kallid lugejad ajaveebi webcodius! Saan sageli küsimusi: kuidas panna veebilehel olev pilt muutuma, kui hiirekursorit selle kohale viia. Seda efekti leidub paljudel saitidel ja lihtsaim näide on see, kui hõljutate kursorit nupu kohal ja see muudab seejärel värvi. Mõnikord kasutatakse selle efekti loomiseks JavaScripti, kuid tavaliselt piisab ainult CSS-ist, eriti kuna välja tuli CSS-i versioon 3. Hiljem artiklis räägin kuidas muuta pilti, kui hõljute kursorit kasutades ainult ühte CSS-i, vaatan mitut meetodit ja erinevaid efekte.
Sageli nimetatakse veebilehe elemendi muutmise mõju hiirekursorile hõljumise efektid. See on tingitud asjaolust, et selliste efektide rakendamisel kasutatakse seda, mis määrab elemendi stiili, kui hiirekursorit selle kohal liigutada.
Esiteks vaatame lihtsamat võimalust. Oletame, et teie lehele on sisestatud pilt, nagu allpool näidatud:
Ja oletame, et peate selle kuva muutma, kui hõljutate hiirekursorit selle kohal. Kui lisate selle pildi img-sildile, lisage klassi atribuut="animate1" , siis näeb pildi html-kood välja umbes selline:
Alustuseks saate kursori hõljutamisel pildi lihtsalt läbipaistvaks muuta. CSS-i läbipaistvust kontrollib läbipaistmatuse omadus, mis on spetsiifiline CSS3-le. Väärtust kasutatakse murdarvud 0 kuni 1, kus null vastab täielikule läbipaistvusele ja üks, vastupidi, vastab objekti läbipaistmatusest. Vanadele inimestele Interneti-versioonid Explorer peab kasutama filtri atribuuti väärtusega alfa(Opacity=X), kuna nad ei toeta läbipaistmatuse atribuuti. X asemel peate asendama arvu 0 kuni 100, kus 0 tähendab täielikku läbipaistvust ja 100 täielikku läbipaistmatust.
Seejärel, et muuta pilt läbipaistvaks, kui hõljute kursorit stiilifaili kohal või siltide vahel
Ja html-faili peate lisama järgmise css-koodi:Kui te CSS-ist aru ei saa, teatab kirje img.animate1:hover brauserile, et kõigi elementide puhul , mille klassiatribuut on võrdne atribuudiga anima1, kui hõljute nende kohal hiirekursoriga, rakendage määratud stiile. Ja stiilid on märgitud vahele lokkis traksid(Ja). Kui tegite kõik õigesti, peaks see välja nägema umbes selline:
Pildistada saab sisse algne seisukord poolläbipaistev ja kursori hõljutamisel muuta see läbipaistmatuks. Seejärel peate CSS-faili lisama järgmised read:
img.animate1 (
filter: alfa (läbipaistmatus=25);
läbipaistmatus: 0,25;
}
img.animate1:hover (
läbipaistmatus: 1;
}
Tulemus saab olema selline:
Suurema efekti saavutamiseks saate aeglustada muutusi pildi läbipaistvuses. Selleks saab kinnistut kasutada CSS-i üleminek, mis määrab üleminekuefekti elemendi kahe oleku vahel. Lisame näitena ühe sekundilise aeglustumise. Siis näeb meie CSS-kood välja selline:
img.animate1 (
filter: alfa (läbipaistmatus=25);
läbipaistmatus: 0,25;
-moz-üleminek: kõik 1-d on lihtne sisse-välja; /* üleminekuefekt Firefoxile kuni versioonini 16.0 */
-veebikomplekti üleminek: kõik 1-d on lihtne sisse-välja; /* üleminekuefekt Chrome'ile kuni versioonini 26.0, Safari, Androidi ja iOS-i jaoks */
-o-üleminek: kõik 1-d lihtsus sisse-välja; /* üleminekuefekt Opera jaoks kuni versioonini 12.10 */
üleminek: kõik 1s lihtne sisse-välja; /* üleminekuefekt teistele brauseritele */
}
img.animate1:hover (
filter: alfa (läbipaistmatus=100);
läbipaistmatus: 1;
}
Tulemus:
Kasutades teisendusomadust, saab pilti skaleerida, pöörata, nihutada või kallutada. Proovime pilti suurendada. Siis on css-kood järgmine:
img.animate1(
— o-üleminek: kõik 1-sid on lihtne;
üleminek: kõik 1s lihtne;
}
img.animate1:hover(
- moz-teisendus: skaala (1,5); /* teisendusefekt Firefoxile kuni versioonini 16.0 */
- webkit-transform: skaala (1,5); /* Chrome'i teisendusefekt enne versiooni 26.0, Safari, Android ja iOS */
- o-teisendus: skaala (1,5); /* Opera teisendusefekt kuni versioonini 12.10 */
— ms-teisendus: skaala (1,5); /* teisendusefekt IE 9.0 jaoks */
teisendus:skaala(1,5); /* teisendusefekt teistele brauseritele */
}
Ja tulemus saab olema selline:
Pildi suurendamiseks saate lisada pööramise. Siis css stiilid muuda veidi:
img.animate1(
— moz-üleminek: kõik 1s lihtne;
— veebikomplekti üleminek: kõik 1 on lihtne;
— o-üleminek: kõik 1-sid on lihtne;
üleminek: kõik 1s lihtne;
}
img.animate1:hover(
- moz-transform: pöörake (360 kraadi) skaalat (1,5);
- veebikomplekti teisendus: pöörake (360 kraadi) skaalat (1,5);
- o-teisendus: pöörake (360 kraadi) skaalat (1,5);
- ms-teisendus: pöörake (360 kraadi) skaalat (1,5);
teisendus: pööra (360 kraadi) skaalat (1,5);
}
Tulemus:
Eespool vaatlesime juhtumeid, kui animatsioonis osaleb üks pilt. Järgmisena kaalume viise ühe pildi asendamiseks teisega. Sel juhul valmistatakse tavaliselt ette kaks ühesuurust pilti: üks originaalvaate jaoks, teine selle asendamiseks.
Oletame, et meil on kaks pilti, üks must-valge ja teine värviline:
Teeme selle nii, et kui hõljutate kursorit üle mustvalge pilt kuvati värviliselt. Selleks tehke algne pilt div elemendi taustaks, kasutades atribuuti background. Ja kui hõljutate kursorit pildi kohal, siis me muutume taustapilt kasutades sama hõljumise pseudoklassi ja taustaomadust. Selle mõju realiseerimiseks html leht lisada div element klassiga rotate1:
Ja lisage järgmised stiilikirjeldused:
div.rotate1(
taust: url (img/2.jpg); /* Lähtepildiga faili tee */
laius: 480 pikslit; /* Pildi laius */
kõrgus: 360 pikslit; /* Pildi kõrgus */
}
div.rotate1:hover (
taust: url (img/1.jpg); /* Asendatava pildiga faili tee */
}
Ja tulemus:
Sellel meetodil on üks märkimisväärne puudus. Kuna teine pilt laetakse ainult kursori hõljutamisel, siis kui kasutaja aeglane internet, ja pildifaili suurus on suur suurus, kuvatakse pilt mõne pausiga. Seetõttu käsitleme allpool veel mitmeid viise piltide asendamiseks hiirekursori hõljutamisel.
Järgmine meetod põhineb kahe pildi ühendamisel üheks failiks. Oletame, et peame lehele asetama nupu, mis muudab selle välimust, kui hiirekursor selle kohal hõljub. Selleks ühendage kaks pilti üheks failiks ja saadud pilt näeb välja umbes selline:
Sel juhul toimub üleminek ühelt pildilt teisele, nihutades taustpilti vertikaalselt, kasutades atribuuti background-position. Kuna nupule vajutamine viib tavaliselt teisele lehele, siis sisestame pildi elemendi sisse< a>. Seejärel sisestage html-lehele järgmine kood:
Ja css-fail on selline:
a.rotate2 (
taust: url (img/button.png); /* Lähtepildiga faili tee */
kuva: plokk; /* Link as ploki element */
laius: 50 pikslit; /* Pildi laius pikslites */
kõrgus: 30 pikslit; /* Pildi kõrgus */
}
a.rotate2:hover (
taustapositsioon: 0–30 pikslit; /* Tausta nihe */
}
Tulemus:
Ja viimane meetod tänapäeval on see, kui üks pilt asetatakse teise alla css-i kasutades reeglid seisukoht: absoluutne . Sel juhul paigutame div-konteinerisse kaks pilti:
Ja lisage css-stiile:
Animate2(
asend:suhteline;
margin:0 auto;/* seatud div plokk lehe keskel*/
laius: 480 pikslit; /* Laius */
kõrgus: 360 pikslit; /* Kõrgus */
}
.animate2 img (
positsioon: absoluutne; /* absoluutne positsioneerimine*/
vasakule: 0; /* joondada pilte vasakule ülemine nurk div*/
ülemine: 0; /* joonda pildid diivi ülemise vasaku nurgaga */
}
Pärast lisamist css reeglid, paigutatakse pildid üksteise alla. Nüüd kontrollige piltide läbipaistvust kasutades läbipaistmatuse omadused tavaolekus näitame teist pilti ja kursori hõljutamisel esimest. Selleks muudame tavaolekus esimese klassiga pildi täiesti läbipaistvaks ja kursori hõljutamisel vastupidi: teise klassi pilt on täiesti läbipaistev, kuid esimese klassiga pole see läbipaistev. :
Animate2 img.first ( /* esimene pilt on täiesti läbipaistev */
läbipaistmatus: 0;
filter:alpha (läbipaistmatus=0);
}
.animate2:hover img.first ( /* kursori hõljutamisel muutub esimene pilt läbipaistmatuks */
läbipaistmatus: 1;
filter:alpha (läbipaistmatus=100);
}
/* ja teine muutub kursori hõljutamisel läbipaistvaks */
läbipaistmatus: 0;
filter:alpha (läbipaistmatus=0);
}
Tulemus:
Lisades saate saavutada sujuva ülemineku viimane reegel CSS-i ülemineku atribuut:
Animate2:hover img.second, .animate2 img.second:hover (
läbipaistmatus: 0;
filter:alpha (läbipaistmatus=0);
-moz-üleminek: kõik 2s on lihtne;
-veebikomplekti üleminek: kõik 2 on lihtne;
-o-üleminek: kõik 2-d on kerged;
üleminek: kõik 2s lihtne;
}
Ja tulemus:
Ja kui lisate teisendusomaduse:
Animate2:hover img.second, .animate2 img.second:hover (
läbipaistmatus: 0;
filter:alpha (läbipaistmatus=0);
-moz-transform:scale(0, 1);
-webkit-transform:scale(0, 1);
-o-teisendus:skaala(0, 1);
-ms-teisendus:skaala (0, 1);
teisendus:skaala(0, 1); /* vähenda pildi laiust 0-ni */
}
See selgub järgmiselt:
Erinevate kombineerimine CSS-i omadused võite saavutada erinevaid hõljutusefektid, kui muudate pilte hiirekursori hõljutamise ajal. Need ja teised näited olen pannud siia lehele, kust saab ka allikad alla laadida. See on kõik, näeme jälle.
Ülesanne
Asendage üks pilt teisega, kui hõljutate selle kohal hiirekursorit.
Lahendus
Ühe pildi muutmist teiseks, kui hõljutate selle kohal hiirekursorit, nimetatakse veerevaks efektiks. Tavaliselt kasutatakse veereva efekti loomiseks JavaScripti, kuid enamikul juhtudel piisab CSS-ist.
Pseudoklass: hõlju
Kõigepealt vaatame, kuidas efekt ise luuakse. Selleks kasutatakse pseudoklassi :hover, mis lisatakse soovitud valijale. See pseudoklass määrab elemendi stiili, kui hiirekursor selle kohal hõljub, mis on täpselt see, mida me vajame. Märgime kohe, et sisse Interneti-brauser Exploreri versioonid 6 ja alla selle töötab :hover ainult linkidel, samas kui teised brauserid saavad :hoverist aru ka muudel elementidel. Nii et mitmekülgsuse huvides peate pildi konteinerisse paigutama . Pilt ise lisatakse ja muudetakse tausta stiili atribuudi abil. Toimingute algoritm on järgmine.
- Valmistatakse ette kaks ühesuurust pilti, üks originaalvaate jaoks ja teine selle asendamiseks veereva efektiga.
- Lähtekujutis lisatakse taustapildina valijale A tausta stiili atribuudi kaudu väärtusega url(URI), kus URI on pildifaili tee.
- Kinnitame pseudoklassi valijale A ja lülitame taustaomaduse uuesti sisse, kuid määrame väärtuseks kohatäite kujutise.
- Et link pildile sobiks, tuleks see muuta plokielemendiks, kasutades kuva omadust koos väärtusega block , ning määrata ka lingi kõrgus ja laius.
Joonisel fig. Joonisel 1 on kaks pilti: originaal (joonis 1a) ja asendus (joonis 1b).
A 
b
Riis. 1. Pildid veereva efekti loomiseks
Jääb üle vaid kogu kood kokku panna, nagu on näidatud näites 1. Et vältida lingi viimist konkreetsesse faili, mis antud juhul pole vajalik, lisame räsisümboli kujul oleva “stub” (# ) märgendi href atribuudile .
Näide 1: pseudoklass:hover kasutamine
HTML5 CSS 2.1 IE Cr Op Sa Fx
Kuigi ülaltoodud meetodil on lihtne rakendada, on sellel teatud puudus. Kuna teine pilt laaditakse alles siis, kui hõljutate kursorit lingi kohal, kuvatakse pilti mõne pausiga. Selle viivituse kõrvaldamiseks võite kasutada mitte kahte, vaid ainult ühte pilti.
Rulliefekt ühe mustriga
Tundub, et siin on vastuolu, sest rullimise mõju on ühe pildi asendamine teisega, kuidas siis ühe pildiga läbi saab? Tegelikult on kaks pilti (joonis 2), kuid need salvestatakse ühte graafikafaili.
Riis. 2. Pilt kahe pildiga
Ühelt pildilt teisele vahetamine toimub pilti vertikaalselt nihutades, kasutades universaalset atribuuti background või background-position , nagu on näidatud näites 2.
Näide 2: Pildi asukoha muutmine
HTML5 CSS 2.1 IE Cr Op Sa Fx
Selektori A puhul määratakse taustpilt tausta atribuudi kaudu, laius (laius) on sama, mis pildil ja kõrgus (kõrgusomadus) on võrdne poole pildi kõrgusest. Selle tulemusel tuleks alguses kuvada kogu roheline vahekaart.
Kui teile efekt meeldib, saate valmis koodi lihtsalt kopeerida ja seda kasutada!
Muutke oma veebisait ellu!
Erinevad hõljutusefektid võivad teie veebisaidi lehtedele värskust lisada. Varem pidite iga efekti jaoks tegelema javascriptiga, kuid tänapäeval, pärast CSS3 tehnoloogia tulekut, saab kõike teha ilma JavaScripti kasutamata.
Tänased näited on kõik juurutatud ja optimeeritud uute kaasaegsete brauserite jaoks ning töötavad nendes kindlasti (näiteks Mozillas või WebKiti perekonna brauserites). Me ei saa teile kinnitada, et see IE-s töötab, kuid viimastes versioonides töötavad efektid kindlasti nii, nagu nad peaksid. Kuid ärge unustage, et iga efekti jaoks on loodud atraktiivne tagasipööramise valik juhuks, kui brauser ikka veel seda efekti ei toeta.
01. Suum
Demo: Vaatamiseks
Seda efekti on väga lihtne rakendada ja seda saab teha mitmel viisil. Kasutasime meetodit, kus igale pildile lisatakse veerise parameeter ja seejärel hiirekursorit hõljutades see parameeter eemaldatakse. Oletame, et veerise seadistus algab 15 pikslist ja hõljutades muutub see 2 piksliks, mistõttu näib, et pilt hüppab. Seda efekti saate kasutada ka lihtsalt tekstiga, isegi kui lingid on paigutatud vertikaalselt, mitte horisontaalselt.
Siin saab üleminekut määrata oma äranägemise järgi ja efekt on atraktiivne ka ilma üleminekuta. Näiteks muutsime efekti veidi siledaks, mis arvasime, et see annab efektile veidi maitset juurde.
Bump Up Effect CSS-kood
Ex1 img(
ääris: 5px solid #ccc;
ujuk: vasak;
veeris: 15 pikslit;
-veebikomplekti üleminek: veerise 0,5 s kergendus;
-moz-üleminek: veerise 0,5 s kergendus;
-o-üleminek: veeris 0,5 s leevendust;
}
Ex1 img:hover (
veeris-ülemine: 2px;
}
02. Stack & Grow
Demo: Vaatamiseks
Ilmselt tahtis selle efekti autor saavutada mingisuguse laavalampi efekti, kuna hiirekursorit linkide loendi kohal hõljutades laieneb iga pilt aeglaselt ja naaseb seejärel oma algsuurusesse.
Siin kasutati 400x133 piksliga pilte. Seejärel muudeti nende suurus CSS-i abil 300x100 pikslini ja kursorit liigutades laiendati. Kuna näites on kogu loend joondatud keskele, murdis piltide uus suurus kogu joonduse. Selle probleemi saab lahendada, määrates negatiivsed veerised poole võrra suurendatud piltide laiusest.
Stack & Grow CSS-kood
/*Näide 2*/
#container (
laius: 300 pikslit;
marginaal: 0 auto;
}
#ex2 img(
kõrgus: 100 pikslit;
laius: 300 pikslit;
veeris: 15 pikslit 0;
-veebikomplekti üleminek: kõik 1 on lihtne;
-moz-üleminek: kõik 1s lihtne;
-o-üleminek: kõik 1-d on lihtne;
}
#ex2 img:hover (
kõrgus: 133 pikslit;
laius: 400 pikslit;
veeris-vasak: -50px;
}
03. Teksti sisse tuhmumine
Demo: Vaatamiseks
Siin soovis autor luua midagi javascripti tüüpi sündmust, kus hõljutate kursorit ühe üksuse kohal ja efekt kuvatakse teisel. Siin tehti tekst ja pilt ning paigutati seejärel eraldi vasakule joondatud lahtrisse. Järgmisena lisati lahtrisse parameetrid color: transparent ja line-height: 0px. See võimaldas meil asetada teksti piki div ülemist serva ja peita selle täielikult.
Teksti uuesti kuvamiseks muudame lihtsalt värvi ja rea kõrgust. Kui hõljutate kursorit pildi kohal, ilmub tekst uuesti. Väga naljakas ja lihtne efekt.
Fade Text In Effect CSS-kood
#ex3 (
laius: 730 pikslit;
kõrgus: 133 pikslit;
rea kõrgus: 0 pikslit;
värv: läbipaistev;
fondi suurus: 50 pikslit;
fondiperekond: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
fondi kaal: 300;
text-transform: suurtähtedega;
}
#ex3:hover (
rea kõrgus: 133 pikslit;
värv: #575858;
}
#ex3 img(
ujuk: vasak;
veeris: 0 15 pikslit;
}
04. Kõver foto
Demo: Vaatamiseks
See efekt on väga lihtne, kuid see sobiks suurepäraselt pisipiltide galerii jaoks. Alustuseks peate looma piltidest ruudustiku ja seejärel pilte pöörama, kui hõljutate kursorit nende kohal, mis loob atraktiivse efekti.
Siin saab kasutada palju uusi CSS-i väärtusi, seega tasub kaaluda ka brauserite varasemate versioonide juurde naasmist. Meie galerii kasutab aga teie soovil üleminekuid, teisendusi ja plokkide varje. Teisendus vastutab pildi pööramise eest ning üleminekud pehme ja sujuva efekti eest.
Siin saate kasutada pseudovalijaid.
Crooked Photo CSS-kood
#ex4 (
laius: 800 pikslit;
marginaal: 0 auto;
}
#ex4 img (
veeris: 20 pikslit;
ääris: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0,2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0,2);
kast-vari: 4px 4px 4px rgba(0,0,0,0,2);
-veebikomplekti üleminek: kõik 0,5 s kergendused;
-moz-üleminek: kõik 0,5 sekundit on lihtne;
-o-üleminek: kõik 0,5 s lihtsus;
}
#ex4 img:hover (
-veebikomplekti teisendus: pööra (-7 kraadi);
-moz-teisendus: pööra (-7 kraadi);
-o-teisendus: pööra (-7 kraadi);
}
05. Fade In ja Reflect
Demo: Vaatamiseks
Seda efekti on veidi keerulisem rakendada, nii et korraliku efekti saavutamiseks pidime selle kallal veidi nokitsema. Kujutise vaikepositsioon on kergelt läbipaistev. Seejärel, kui hõljutate kursorit pildi kohal, alandatakse läbipaistvuse taset ja pilt naaseb esialgsele välimusele, samuti ilmneb kerge helendav valgus ja peegeldus (ainult WebKiti brauserid).
Kahjuks ei ole peegeldus just üleminek, nii et see ilmub kohe, kuigi ülejäänud sisu kuvatakse aegluubis.
Kui olete peegeldus-CSS-i osas segaduses, saate selle kohta rohkem lugeda sellest artiklist (David Walsh).
Fade sisse ja peegelda CSS-koodi
#ex5 (
laius: 700 pikslit;
marginaal: 0 auto;
min-kõrgus: 300 pikslit;
}
#ex5 img (
veeris: 25 pikslit;
läbipaistmatus: 0,8;
ääris: 10px solid #eee;
/*Üleminek*/
-veebikomplekti üleminek: kõik 0,5 sekundit on lihtne;
-moz-üleminek: kõik 0,5 sekundit on lihtne;
-o-üleminek: kõik 0,5 s lihtsus;
/*Peegeldus*/
-webkit-box-reflect: alla 0px -veebikomplekti gradient(lineaarne, vasak ülemine, vasak alumine, from(läbipaistev), color-stop (.7, läbipaistev), kuni(rgba(0,0,0,0,1)) );
}
#ex5 img:hover (
läbipaistmatus: 1;
/*Peegeldus*/
-webkit-box-reflect: alla 0 piksli -veebikomplekti gradient (lineaarne, vasak ülemine, vasak alumine, alates (läbipaistev), color-stop (.7, läbipaistev), kuni (rgba(0,0,0,0,4)) );
/*Sära*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0,8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0,8);
kast-vari: 0px 0px 20px rgba(255,255,255,0,8);
}
Järeldus
Nendest 5 näitest peaks piisama, et inspireerida teid looma midagi oma. Pidage meeles, et saate alati katsetada valmis näidetega ja seejärel meile neist rääkida.
Kui olete kusagil võrgus kohanud muid ahvatlevaid efekte, siis rääkige sellest meile ja teistele lugejatele.
Erinevate CSS-i hõljumise efektide rakendamine pildi, lingi või teksti kohal hõljutamisel on üks levinumaid CSS-i tehnikaid.
Selles artiklis olen kogunud palju lahedaid CSS3 hiirekursori efekte. Saate neid hõlpsalt oma veebisaidil või muudes veebiprojektides rakendada. Vaatame, mida ma teile valmistasin.
1. 10 stiilset hõljumise efekti
Nagu nimigi ütleb, on see 10 uskumatult stiilse hõljumise efekti kollektsioon.
Lähtekood
2. Suunateadlik hõljukefekt
Kui hõljutate kursorit erinevate elementide kohal, CSS-i hõljutamise efekt hõljutamisel järgib kursorit ja loob hämmastavaid 3D-esitlusi.
Lähtekood
3. Wacomi hõljukefekt
See on juba üsna hakitud efekt, kuid paljud inimesed naudivad selle kasutamist endiselt. Esitlus on lihtne, kuid atraktiivne.
Lähtekood
4. CSS3 hõljumise efektid
Kui otsite ringikujulisi hõljukefekte, leiate siit huvitavaid. Saadaval on kokku 12 erinevat CSS-i hõljukraami efekti.
Lähtekood
5. Hover Animatsioon UNIQLO-st
See on veel üks huvitav hõljumise efekt. See sobib ideaalselt pisipiltide või muud tüüpi piltide jaoks.
Lähtekood
6. Nupu hõljumise efektid
Siin on mõned muljetavaldavad nuppude hõljumise efektid. Kõik need sobivad ideaalselt igat tüüpi saitidele.
Lähtekood
7. 10 vapustavat hõljumise efekti
Veel 10 CSS-i hõljutusefekti nuppude jaoks. Enamik neist on üsna muljetavaldavad.
Lähtekood
8. CSS3 hõljumise efektid 2
See on nelja erineva pildi hõljumise efekti kogum. Koos sellega kuvatakse efekti nimi ja kirjeldus.
Lähtekood
9. Põrgata hõljukil
See on piltide jaoks lõbus ja huvitav hõljukefekt. Ümmargune raam sobib ideaalselt meeskonnaliikmete avataridele ja soovituspiltidele kandmiseks.
Lähtekood
10. 8-bitine hõljumine
See stiilne vanaaegne CSS-i hõljukefekt tekitab nostalgiatunde. Saate seda kasutada oma veebisaidile retrostiili loomiseks.
Lähtekood
11. Lihtne pealkirja hõljumise efekt
Kui hõljutate kursorit pildi kohal, kuvab see efekt pealkirjad vähese läbipaistmatusega taustal.
Lähtekood
12. Keeramise efekt
See on veel üks lihtne, kuid väga ilus CSS-i hõljumise efekt. Kui hõljutate kursorit pildi kohal, kuvab see nutika pühkimise efekti abil pealkirja ja kirjelduse.
Lähtekood
13. Uudishimu auhind
Kuni viite hiirekursori pildi kohale, ei mõista te selle efekti ilu. Juhuslikud jooned tehakse ilusti logoks ja seejärel värvitakse see värvidega.
Lähtekood
14. Pildi hõljumise efekt
See on pildiraamide jaoks uskumatu CSS-i hõljumise efekt. See, kuidas üks pilt teise vastu paistab, on uskumatu!
Lähtekood
15.Hover Animatsioon
Kui hõljutate kursorit pildi kohal, väheneb läbipaistmatus, keskendudes lingile.
Lähtekood
16. Hover Me Brother
See ei pruugi olla väga kasulik CSS-i hõljumise efekt, kuid see on lõbus. Lihtsalt hõljutage kursorit päikeseprillide kohal ja maagia algab.
Lähtekood
17. Nautilus SCSS HAML hõljumise efektid
See on loominguline hõljumise efekt, mis on saadaval mitmes variandis. Need pakuvad ainulaadseid võimalusi pildi kujundamiseks.
Lähtekood
18. SVG Border Hover Effect 1
Sobib teksti, nuppude või piltide jaoks. Kaadri järkjärguline taasloomine on tõeliselt huvitav efekt.
Lähtekood
19. Hõljutage kursorit otsingu kaardi ikoon
Kas vajate otsinguriba või kaardiikooni hõljutamisel CSS-i hõljutusefekti? See on täpselt tema. Selle sujuvad muudatused pakuvad silmailu.
Lähtekood
20. Sotsiaalne ikoonipaan
Seda hõljutusefekti saab kasutada sotsiaalmeedia ikoonide algul peitmiseks ja seejärel kuvamiseks, kui kasutaja hõljutab kursorit nende kohal.
Lähtekood
21. Tooteartikli lisateave
See on suurepärane võimalus veebipoes toodete kohta lisateavet anda. Kui hõljutate kursorit tootepildi kohal, kuvatakse selle kohta käiv teave kauni efektiga.
Lähtekood
22. Animeeritud ümbrik
Täiuslik CSS-i hõljumise efekt jaotise "" jaoks Võtke meiega ühendust". See kuvab kontaktteabe hüpikakna ümbrikus, kuid alles pärast seda, kui kasutaja hõljutab kursorit pildi kohal.
Lähtekood
23. Tagasi üles
See nupu Tagasi üles ainulaadne hõljutusefekt võimaldab teil pakkuda külastajatele ilusat animeeritud kursorit.
Lähtekood
24. Fancy Hover
Kui hõljutate kursorit pildi kohal, siis see mitte ainult ei suurenda, vaid muudab ka selle kuvamisviisi.
Lähtekood
25. Meeldetuletuste ikooni hõljumise efekt
See CSS-i hõljumise efekt lisab pildile kauneid stiile.
Lähtekood
26. Ringpildi hõljutamine
Ringikujuliste piltide hõljutamise efekt. Kollektsioonis on neli erinevat stiili hõljumise efekti.
Lähtekood
27. Safari ikooni hõljukefekt
See CSS-i hõljumise efekt taasloob Safari ikooni animatsiooni hõljutamisel. Saate ikooni asendada oma pildi või logoga.
Kui sul on mõne objekti kood, siis 99% sellest saab mähitud atribuudisse:hover. Muidugi ei võta me arvesse kõiki võimalikke a:hover kasutusviise.
Video hõljumise HTML-i css-i hõljutusefektist
Ja hotellivideo HoverisMa nimetasin alati omaduseks "hover" ja otsustage ise, et objektide muutmise võime on omadusele kõige õigem nimi, kuid tegelikult on "hover" pseudoklass.
Mis on hõljumine?
Määratlus tuleb anda algusest peale. Mis on hõljumine!? Hover - nagu ma varem kirjutasin - võimalus muuta selle omadusi, kui hiirekursorit liigutate.
1. Kuna meil ajendas seda lehte kirjutama spetsiaalselt „hover”, kasutame mõnda väga lihtsat näidet, et mõista, kuidas a:hover töötab.
Värvi muutmine "hover" abil
siin ta on
Peate mõistma, et seda klassi on vaja ainult selle lehe jaoks. Või näiteks kui soovite muuta kursorit mõnes lehe plokis:
Muutke kursorit hõljutades lingi värvi
Järeldus hõljutuse rakendamise ja kasutamise kohta
Hõljuti pseudoklassi kasutamiseks tuleb see hõljuja kinnitada mõne objekti, klassi, sildi külge, lingi jaoks on see a:hover, mõne klassi puhul, mida me eespool kasutasime, on see esimene klass ja seal on link selles. Loogika on järgmine: kõigepealt kirjutame lingi "a", seejärel klassi ".first" ja seejärel meie ":hover" nende kahe juurde, nii et peaksime saama midagi sellist:
2. Noh, teine näide - muudame näiteks pildi hõljumise omadust - lisage ääris - see on esimene asi, mis meelde tuli.
me vajame mingit pilti – pole vahet, milline pilt see saab olema, näiteks see –, mis tähistab meie css-i teemat ja .. ja midagi ei juhtu! ja midagi ei juhtu, sest... et meiega pole midagi kirja pandud
