CSS-i suumiefekt hõljutamisel. Ilus piltide suurendamine kasutades CSS3 - CSS - Web. Suurenda pilti lingi kaudu

| 18.02.2016

CSS3 avab kasutajaliidese kujundajatele piiramatud võimalused ning peamiseks eeliseks on see, et peaaegu iga ideed saab hõlpsasti ellu viia ja ellu viia ilma JavaScripti kasutamata.

On hämmastav, kui lihtsad asjad võivad tavalist veebilehte elavdada ja kasutajatele paremini kättesaadavaks teha. Jutt on CSS3 üleminekutest, mille abil saate lubada elemendil teisendada ja stiili muuta, näiteks hõljutades. Allolevad üheksa CSS3 animatsiooni näidet aitavad teil luua saidil tundliku tunde ning parandada lehe üldist välimust kaunite ja sujuvate üleminekutega.

Täpsema teabe saamiseks saate alla laadida arhiivi koos failidega.

Kõik efektid töötavad üleminekuomaduste abil. üleminek- "üleminek", "teisendus" ja pseudoklass:hover, mis määrab elemendi stiili, kui hiirekursor hõljub selle kohal (meie õpetuses). Näidete jaoks kasutasime 500 x 309 px div, algset taustavärvi #6d6d6d ja ülemineku kestust 0,3 sekundit.

Keha > div ( laius: 500 pikslit; kõrgus: 309 pikslit; taust: #6d6d6d; -veebikomplekti üleminek: kõik 0,3 s lihtsus; -moz-üleminek: kõik 0,3 s lihtsus;; -o-üleminek: kõik 0,3 s lihtsus;; üleminek: kõik 0,3 sekundit lihtne)

1. Muutke värvi hõljutamisel

Kunagi oli sellise efekti rakendamine teatud RGB väärtuste matemaatiliste arvutustega üsna vaevarikas töö. Nüüd pole vaja teha muud, kui kirjutada CSS-stiil, milles tuleb lisada valijale pseudoklass:hover ja määrata taustavärv, mis asendab sujuvalt (0,3 sekundiga) algse taustavärvi, kui kursorit ploki kohal :

Värv: hõljumine ( taust: # 53ea93; )

2. Raami välimus

Huvitav ja silmatorkav teisendus on sisemine raam, mis ilmub sujuvalt hiirekursori hõljutamisel. Sobib hästi erinevate nuppude kaunistamiseks. Selle efekti saavutamiseks kasutame pseudo-class:hover ja inset-parameetriga atribuuti box-shadow (määrab elemendi sees oleva varju). Lisaks peate määrama varju venituse (meie puhul on see 23 pikslit) ja selle värvi:

Ääris: hõljuta ( kasti vari: sisestus 0 0 0 23px #53ea93; )

3. Kiik

See CSS-animatsioon on erand, kuna siin ei kasutata üleminekuatribuuti. Selle asemel kasutasime:

@keyframes on kaader-kaadri haaval CSS-animatsiooni loomise põhidirektiiv, mis võimaldab teha nn. storyboard ja kirjeldage animatsiooni põhipunktide loendina;
animation ja animation-itration-count - omadused animatsiooni parameetrite (kestus ja kiirus) ning tsüklite arvu (korduste) määramiseks. Meie puhul korrake 1.

@-webkit-keyframes swing ( 15% ( -webkit-transform: translateX(9px); teisendus: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); teisendus: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); teisendus: translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); teisendus: translateX(-6px); ) 65% ( -webkit -transform: translateX(3px) teisendus: translateX(3px) 100% ( -webkit-transform: translateX(0); teisendus: translateX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: translateX(); 9px teisendus: translateX(9px) 30% ( -webkit-transform: translateX(-9px); teisendus: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); teisendus: translateX); (6px) 50% ( -webkit-transform: translateX(-6px); teisendus: translateX(-6px); ) 65% ( -webkit-transform: translateX(3px); teisendus: translateX(3px); ) 100 % ( -webkit-transform: translateX(0); teisendus: translateX(0); ) ) .swing:hover ( -webkit-animation: swing 0,6s easy; animatsioon: kiik 0,6 s lihtsus; -veebikomplekti animatsiooni iteratsioonide arv: 1; animatsiooni iteratsioonide arv: 1; )

4. Sumbumine

Fade-efekt on sisuliselt lihtne muutus elemendi läbipaistvuses. Animatsioon luuakse kahes etapis: kõigepealt peate määrama esialgseks läbipaistvuse olekuks 1 - see tähendab täielikku läbipaistmatust ja seejärel määrama selle väärtuse hiirekursori hõljutamisel - 0,6:

Fade ( läbipaistmatus: 1; ) .fade:hover ( läbipaistmatus: 0,6; )

Vastupidise tulemuse saamiseks vahetage väärtused:

5. Suurendus

Ploki suuremaks muutmiseks, kui hõljutada kursorit, kasutame teisendusomadust ja määrame selle skaalale (1.2) . Sel juhul suureneb plokk 20 protsenti, säilitades selle proportsioonid:

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

6. Vähendamine

Elemendi väiksemaks muutmine on sama lihtne kui selle suurendamine. Kui viiendas punktis pidime skaala suurendamiseks määrama väärtuse, mis on suurem kui 1, siis ploki vähendamiseks määrame lihtsalt väärtuse, mis on väiksem kui üks, näiteks skaala(0,7) . Nüüd, hiirt hõljutades, väheneb plokk proportsionaalselt 30 protsenti oma algsest suurusest:

Shrink:hover ( -webkit-transform: scale (0,7); -ms-transform: scale (0,7); teisendus: skaala (0,7); )

7. Ümberkujundamine ringiks

Üks sagedamini kasutatavaid animatsioone on ristkülikukujuline element, mis muutub ringiks, kui kursorit selle kohal liigutada. Kasutades CSS-i atribuuti border-radius, mida kasutatakse koos :hover ja üleminekuga, saab seda probleemideta saavutada:

Ring: hõljuta (äärise raadius: 70%; )

8. Pöörlemine

Lõbus animatsioonivõimalus on elemendi pööramine teatud arvu kraadi võrra. Selleks vajame teisendusomadust uuesti, kuid erineva väärtusega - rotateZ(20deg) . Nende parameetritega pööratakse plokki Z-telje suhtes 20 kraadi päripäeva:

Pööra: hõljutage ( -veebikomplekti teisendus: pööraZ(20 kraadi); -ms-teisendus: pööraZ(20 kraadi); teisendus: pööraZ(20 kraadi); )

9. 3D vari

Disainerite arvamused erinevad selle kohta, kas see efekt on tasapinnalises disainis sobiv. See CSS3 animatsioon on aga üsna originaalne ja seda kasutatakse ka veebilehtedel. Saavutame kolmemõõtmelise efekti kasutades juba tuttavaid kasti-varju omadusi (loob mitmekihilise varju) ja teisendame parameetriga translateX(-7px) (tagab ploki horisontaalse nihke 7 piksli võrra vasakule ):

Kolmik: hõljumine ( kasti vari: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 3px 3px #53ea93, 3px 3pxe ; -webkit-transform: translateX( -7px; teisendus: translateX(-7px)

Brauseri tugi

Järgmised brauserid toetavad praegu üleminekuatribuuti:

Lauaarvuti brauserid
Internet Explorer	Toetab IE 10 ja uuemad versioonid
Chrome	Toetatud alates versioonist 26 (kuni versioon 25 töötab eesliitega -webkit-)
Firefox	Toetatud alates versioonist 16 (versioonides 4-15 töötab see eesliitega -moz-)
Ooper	Toetatud alates versioonist 12.1
Safari	Toetatud alates versioonist 6.1 (versioonides 3.1–6 töötab see eesliitega -webkit-)

Peaaegu kõik kaasaegsed brauserid toetavad ka ülejäänud nendes näidetes kasutatud atribuute, nagu transform , box-shadow jne. Kui aga kavatsete neid ideid oma projektide jaoks kasutada, soovitame tungivalt brauseritevahelise ühilduvuse üle kontrollida.

Loodame, et need CSS3 animatsiooni näited olid teile kasulikud. Soovime teile loomingulist edu!

Sellise suurendamise korraldamiseks pakun välja kaks meetodit. Mõlemad on puhtad CSS, kasutamata JavaScript. Esimene meetod suurendab plokki või pilti olenevalt sellest, millele te seda meetodit rakendate, ilma et see mõjutaks ülejäänud leheelemente. Tundub, et see kasvab ülejäänu peale. Sellise sujuva suurendamise korraldamiseks vajate:
1. Määrake, milline element see on. Meie puhul on see klassiga plokk blokk

2. Kuvame selle oma saidi html-koodis õiges kohas

Stiilifailis määrame sellele järgmised parameetrid:

Block (laius: 150 pikslit; kõrgus: 150 pikslit; taust: # f30; ekraan: plokk; läbipaistmatus: 1; -veebikomplekti teisendus: skaala (1,1); -veebikomplekti ülemineku-ajafunktsioon: hõlpsasti eemaldatav; -veebikomplekt -transition-duration: 550ms -moz-transform: scale(1,1) -moz-transition-time-function: ease-out -moz-transition-duration: scale(1.2,1.2); -webkit-transition-timing-function: -webkit-transition-duration: 550ms -moz-transform: scale(1.2,1.2) - moz-transition-duration: 550ms;

Saate lõpptulemust kontrollida. Seadistage laius, kõrgus, taust ja muud parameetrid mis iganes soovite, peamine on parameetrid õigesti määrata - teisendada- vastutab suurendamise suuruse eest ja te ei pea seda plokis lihtsalt puudutama, vaikimisi on see 1 - algne suurus, kuid atribuudiga :hõljuma muudame selle soovitud suuruseks, milliseks suurendatakse, antud juhul 1.2.
Muidugi saab ka teistpidi muuta, näiteks kui vajad hõljumisel sujuvat langust, siis keegi ei keela seda teha.
Järgmine vara on - üleminek, vastutab animatsiooni kiiruse eest millisekundites. Kui te seda ei kasuta, suureneb ja väheneb kõik dramaatiliselt. Selles näites on selle parameetri väärtus 550 ms.

Teine meetod erineb veidi esimesest. Selle animatsioon ja suurenemine mõjutavad teisi lehe plokke ja elemente. Suurendades liigub see justkui külgedele. Kuid seda meetodit kasutatakse ka ja paljud vajavad seda konkreetse probleemi lahendamiseks.
Mida me peame tegema, et korraldada hõljumisel nii sujuv suum?

1. Nagu esimeses näites, määratleme ploki juba klassiga plokk2

2. Jällegi kuvame selle õiges kohas

Ja määrake sellele stiilid:

Plokk2( laius: 150 pikslit; kõrgus: 150 pikslit; taust: # 390; -veebikomplekti üleminek: kõik 2s lihtne; -moz-üleminek: kõik 2s lihtne; -ms-üleminek: kõik 2s lihtne; -o-üleminek: kõik 2s lihtne üleminek: kõik 2s lihtne ) .block2:hover (laius: 200px; kõrgus: 200px; )

Sel juhul muudame lihtsalt ploki suurust pikslites ja lisame atribuudi - üleminek, mis muudab tõusu sujuvaks. Erinevalt esimesest meetodist määrame animatsiooni aja mitte millisekundites, vaid sekundites. Näites on see 2 sekundit. Nendel lihtsatel viisidel saate sujuvalt suurendada ilma skripte kasutamata. Saate puhta CSS-iga hakkama.

Brauserite vanemad versioonid ei pruugi aru saada, mida nad tahavad, nii et vaadake ise. Mina isiklikult ei pööra sellele tähelepanu ega muretse selle halva asja pärast, et võib-olla külastab mu saiti 1 miljonist iidse kehva Internet Exploreri kaudu ja midagi ei kuvata. Sellistele kasutajatele kuvan sõnumi, et neil on aeg prügist loobuda ja lülituda tavalisele, inimlikule brauserile.

See on kõik, tänan tähelepanu eest. 🙂

Kujutise suurendamise mõju hiirekursori hõljutamisel on paljudele teada. Kuidas aga teha nii, et suurendataks ainult taustapilti, ilma plokielemendi põhisisu suurendamata?

Loome plokielemendi laiusega 340 pikslit ja kõrgusega 230 pikslit.

Määrame selle stiili:

Vozm (
laius: 340 pikslit;
kõrgus: 230 pikslit;
ujuk:vasak;
ülevool: peidetud;
}

Joondage vasakule - hõljuge: vasakule. Samuti määrame ületäitumise atribuudi peidetud väärtusega, et taustpilt ei ulatuks meie ploki alast kaugemale.

Järgmine samm on sisu paigutamine meie plokielemendisse:

Tekst 1

Vozm p (
värv:#da291c;
font-weight:bold;
fondi suurus: 16 pikslit;
rea kõrgus: 21 pikslit;
}
.vozm .red_bl (
laius: 30 pikslit;
kõrgus: 6px;
background-color:#da291c;
}

Määrake plokielemendi lõikude tekstivärv - värv väärtusega #da291c. Samuti märgime, et tekst on paksus kirjas fondi suurusega 16 pikslit ja rea kõrgusega 21 pikslit.

Stiil "red_bl" lisab meie ploki konteinerisse kena horisontaalse punase elemendi. Laius 30 pt, kõrgus 6 pt, värv sama mis tekstil.

Lisame ka sisemise ploki stiili:

Vposf (
asend:suhteline;
z-indeks: 9999;
vasak:45px;
ülemine: 40px;
}

Näitame sisemise ploki suhtelist asukohta sisemiste veeristega 45 punkti vasakul ja 40 punkti ülal.

Lisage taustpilt - taustpilt:

Selle stiil näeb välja selline:

Laps (
laius: 100%;
kõrgus: 100%;
tausta-positsioon: keskel;
tausta suurus: kaas;
-veebikomplekti üleminek: kõik .5s;
-moz-üleminek: kõik .5s;
-o-üleminek: kõik .5s;
üleminek: kõik .5s;
}

Erinevate brauserite üleminekuatribuuti kasutatakse tagamaks, et hõljumisel taustapildi suurendamise efekt ilmneks sujuvalt 50 millisekundi jooksul. Seadke laius ja kõrgus 100%. Samuti määrame keskele tausta asukoha (background-position) ja skaleerime pildi (tausta suurus) vastavalt ploki laiusele ja kõrgusele.

Vozm:hover.child,
.vozm:focus .child (
-ms-teisendus: skaala(1.2);
-moz-teisendus: skaala(1.2);
-o-teisendus: skaala(1,2);
teisendus: skaala(1,2);
}

Selleks kasutage väärtusskaalaga atribuuti teisendus. Kasv on tehtud 20% esialgsest.

Noh, laadime tausta ise:

Bg-1 (taustapilt: url("/userf_fs/stati/fon_sh.jpg"); ülemine veeris: -59 pikslit;)

Kuna taustapildiga plokielement asub meie teksti all, tuleb seda tõsta. Selleks kasutage margin-top atribuudi negatiivset väärtust.

Seega näeb html-kood välja selline:

Tekst 1

Ja css on järgmine:

Vozm (
laius: 340 pikslit;
kõrgus: 230 pikslit;
ujuk:vasak;
ülevool: peidetud;
}
.child(
laius: 100%;
kõrgus: 100%;
tausta-positsioon: keskel;
tausta suurus: kaas;
-veebikomplekti üleminek: kõik .5s;
-moz-üleminek: kõik .5s;
-o-üleminek: kõik .5s;
üleminek: kõik .5s;
}
.vozm:hover .child,
.vozm:focus .child (
-ms-teisendus: skaala(1.2);
-moz-teisendus: skaala(1.2);
-veebikomplekti teisendus: skaala (1.2);
-o-teisendus: skaala(1,2);
teisendus: skaala(1,2);
}
.vozm p (
värv:#da291c;
font-weight:bold;
fondi suurus: 16 pikslit;
rea kõrgus: 21 pikslit;
}
.vozm .red_bl (
laius: 30 pikslit;
kõrgus: 6px;
background-color:#da291c;
}
..jpg");margin-top: -59px;)
.vposf (
asend:suhteline;
z-indeks: 9999;
vasak:45px;
ülemine: 40px;
}

Kui asetada mitu plokielementi üksteise suhtes, saame järgmise pildi.

Seega oleme saavutanud soovitud tulemuse.

Kaasaegsetel veebisaitidel on üsna levinud praktika ploki sujuv suurendamine pildiga. Kuidas saate seda CSS-i abil teha?

Sujuv pildisuum hõljutaval CSS-il

Jagame ülesande lahendamise kaheks etapiks: html märgistus ja css stiilid. Kõigepealt märgime plokid, mille sees on kujutised:

Kõigile plokkidele määrati kastiklass. Üks selle olulisi omadusi on ülevool: peidetud, st peita kõik, mis plokist kaugemale läheb. Kas suurendame pilti? Jah. Kuid nähtav on ainult plokiga piiratud osa.
Panime selle asja korda. Liigume edasi stiilide kirjelduse juurde.

Kast (
ületäitumine:varjatud;
laius: 250 pikslit;
kõrgus: 250 pikslit;
}
Kõik on nii nagu öeldud - ruudukujulised klotsid, suuruselt sarnased standardsele, mitte suurendatud pilt, siis ka 250 x 250.
Ületäitumine:peidetud atribuut, nagu varem mainitud, ei lase sellel sisse suumimisel ploki piire ületada.
Piltidega seotud omadused:

Box img (
-moz-üleminek: kõik 1-d kergendavad;
-o-üleminek: kõik 1-d kergendavad;
-veebikomplekti üleminek: kõik 1-d on hõlpsasti eemaldatavad;
üleminek: kõik 1s leevendus;
}

Box img:hover(
-veebikomplekti teisendus: skaala (1.2);
-moz-teisendus: skaala(1.2);
-o-teisendus: skaala(1,2);
teisendus: skaala(1,2);
}
Ilma CSS3ta ei saa seda kuidagi teha. Kõik kaasaegsed brauserid kuvavad animatsiooni. Teil on vaja ülemineku ja teisendusparameetreid. Animatsiooni ajaks määrasime 1 sekundi (1 s). Kasv on 1,2 korda. Saate seda oma maitse järgi muuta.
Nüüd näiteks töö!

Muidugi on piltide suurendamiseks palju võimalusi. Ja peamiselt kasutatakse skriptide ja pluginate kasutamist. Minu arvates on sellised meetodid õigustatud ressursside puhul, millel on tohutult palju fotosid või pilte. Minu blogi pole selline. Ja nagu tavaliselt, järgin oma saidil kõige vähem aega, teadmisi ja ressursse kulutavat teed.

Pakun teile võimalust veebisaidil olevate piltide suurendamiseks ilma skripte kasutamata, vaid ainult html-i kasutades.

See veebisaidil oleva pildi suurendamise meetod võimaldab lugejal pilti kiiresti näha, kuna teie veebisait ei pea täiendavalt skripte laadima.

Pildi suurendamine veebisaidil

1. meetod – kursori hõljutamisel suurendage saidil olevat pilti

Väga lihtne, noh, kõige lihtsam viis, ausalt. Peate pildi atribuutidele lisama järgmise koodi:

Onmouseover="this.style.width="Suur pildi laius px"" onmouseout="this.style.width="Väike pildi laius px""

Kui hõljutate hiirekursorit, suureneb pilt.
Loodan, et saate aru, et seda kõike tehakse tekstiredaktoris.

2. meetod – suurendage saidil olevat pilti hiireklõpsuga

Meetod on sarnane, peate lihtsalt onmouseover asendama onclickiga. Pildi atribuutidele lisatakse järgmine kood:

Style="width: "väikese pildi laiuse väärtus px; border:2px solid black;" onclick="this.style.width=suur pildi laius px"" onmouseout="this.style.width="väike pildi laius px""

See näeb täielikult välja selline

Siin on kiisupildi tulemus ja kood.
Kui klõpsate hiirega, suurendatakse pilti algse pildi suuruse või teie määratud suuruseni. Pildi suuruse vähendamiseks, st pildi algsuuruse taastamiseks klõpsake lihtsalt suvalises kohas lehel.

Loodan, et teil ei olnud raske kasutada selliseid meetodeid - kasutades HTML-i - saidil olevate piltide suurendamiseks.

Üldiselt usun, et paljud veebihaldurid ei piirdu lihtsalt ühegi mootori kasutamisega ja kasutavad oma saitidel html-koode.

Loe ka:

2015-10-27T16:07:59+00:00 Lootus Skriptid ja koodid saidil oleva pildi suurendamine, saidil oleva pildi suurendamine

Loomulikult on piltide suurendamiseks palju võimalusi. Ja peamiselt kasutatakse skriptide ja pluginate kasutamist. Minu arvates on sellised meetodid õigustatud ressursside puhul, millel on tohutult palju fotosid või pilte. Minu blogi pole selline. Ja nagu tavaliselt, järgin oma saidil kõige vähem aega, teadmisi ja ressursse kulutavat teed. Pakun teile võimalust suurendada...

Nadežda Trofimova [e-postiga kaitstud] Administraatori ajaveebi sait