Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ
  • në shtëpi
  • Siguria
  • Efektet hover css3. Nëntë shembuj të thjeshtë të animacionit CSS3

Efektet hover css3. Nëntë shembuj të thjeshtë të animacionit CSS3

Fillimisht, për ata që nuk janë plotësisht në temë ose nuk janë fare në këtë temë, unë do të shpjegoj shkurtimisht se çfarë është. Këto janë lloje të ndryshme efektesh (shfaqje kërcyese, këshilla veglash, tranzicion të qetë, transformim, rrotullim, zmadhimi, zhvendosje, etj.) të aplikuara në elementët e faqes së internetit me kursorin e miut mbi to. Këto mund të zbatohen si me ndihmën e shtojcave të ndryshme jQuery, ashtu edhe në një të pastër.
Sot kam përgatitur një koleksion të madh të efekteve origjinale hover për imazhet e krijuara duke përdorur CSS3, pa lidhur bibliotekat javascript. Unë nuk do të flas për avantazhet dhe disavantazhet e zbatimit të efekteve hover në CSS3 të pastër, kjo është një temë tjetër, thjesht shikoni shembujt dhe, nëse është e nevojshme, përdorni atë që ju pëlqen në faqen tuaj. Të gjitha efektet e paraqitura në rishikim janë të pajisura me një shembull demo dhe dokumentacion të detajuar me burime. Manualet janë kryesisht në gjuhën borgjeze, por gjithçka është pak a shumë intuitive.

Thjesht dua të tërheq vëmendjen tuaj për faktin se të gjithë këta shembuj do të funksionojnë si duhet vetëm në shfletuesit modernë që mbështesin vetitë CSS3.

Për të mos prishur pamjen e përgjithshme, ai nuk i shtrembëroi emrat e efekteve me përkthim makinerik (me përjashtim të disave), ai la origjinalet e titujve siç i quajti zhvilluesi.

Një efekt shumë interesant hover për imazhet e vogla, duke përdorur vija të holla në dizajn dhe tipografi. Disa lloje të ndryshme efektesh për shfaqjen e titrave për fotografi, transformime të buta dhe jo ndërhyrëse 3D dhe tranzicion të qetë të pseudo-elementeve. Punon vetëm në shfletuesit modernë.

iHover është një koleksion mbresëlënës i efekteve të pastra CSS3 hover, me mbështetje Bootstrap 3. Ndërtuar me Scss CSS (skedar), lehtësisht i modifikueshëm me variabla. Kodi është modular, nuk ka nevojë të përfshijë të gjithë skedarin. Mbi 30 efekte të ndryshme në një paketë. Gjithçka është mjaft mirë e dokumentuar dhe efektet janë shumë të lehta për t'u përdorur. E tëra çfarë ju duhet të bëni është të rreshtoni saktë shënimin HTML dhe të vendosni skedarin CSS në punë.

Krijon disa efekte të thjeshta, por me stil qëndrimi për titrat e imazheve. Ideja është që titulli, emri i autorit dhe butoni i lidhjes të shfaqen në mënyrë dramatike kur rri pezull mbi miniaturat. Për disa efekte, përdoren transformime vizuale 3D.

Një efekt tranzicioni shumë i thjeshtë, pa asnjë zile dhe bilbil të veçantë, një imazh tërësisht i rrumbullakët në një kornizë, transformohet duke ndryshuar fokusin në hover dhe kaq.

Lëshoni efektet për miniaturat e CSS3

Zhvilluesi e pozicionon punën e tij si një shembull të një galerie imazhesh me efekte tranzicioni kur shfaqen shënime (titrat) për miniaturë. Është deklaruar mbështetje e fortë për shfletuesit modernë, përfshirë IE 9+. Sigurisht, është e vështirë ta quash një galeri të plotë, por efekti i shfaqjes së nënshkrimeve është mjaft interesant.

Një grup tjetër rregullash CSS për krijimin e efekteve mbresëlënëse të transformimit kur rri pezull mbi miniaturë absolutisht rrethore. Paketa përmban 7 lloje të tranzicioneve CSS3, dokumentacion shumë të detajuar për konfigurimin dhe përdorimin. Efektet mbështeten nga të gjithë shfletuesit modernë.

Miniaturat rrotulluese kur rri pezull

Efekti i thjeshtë i rrotullimit të miniaturave të rrumbullakëta kur rri pezull mbi to me kursorin e miut është pothuajse i njëjtë që mund ta shihni në blogun tim, në njoftimet e postimeve në faqen kryesore. Ai zbatohet në disa rreshta të kodit css.

Nëse përkthehet fjalë për fjalë: "Efekt seksual kur rri pezull". Sigurisht, vështirë se do të vini re diçka kaq seksi në këtë efekt, përveç nëse keni një imagjinatë të dhunshme, por efekti është interesant në mënyrën e vet dhe ia vlen t'i kushtoni vëmendje.

Pesë efekte të ndryshme fluturimi për imazhe. Titrat pop-up në tre variacione, perde në formën e ndryshimit të shkallës së transparencës dhe rrotullimit me lëvizje horizontale.

4 Llojet e efekteve të animacionit për titrat e imazheve, të zbatuara ekskluzivisht duke përdorur CSS3. Pozicione të ndryshme fade dhe efekte tranzicioni, performancë mjaft standarde. Për të kuptuar se si funksionon animacioni, hidhini një sy kodit burimor të faqes demo, nuk gjeta ndonjë dokumentacion të veçantë.

Miniaturat e rreshtuara në galeri me paraqitje të ndryshme të titrave, rrotullime, zbehje, pop dhe më shumë. Dokumentacioni për përdorimin dhe konfigurimin është mjaft i pakët, por nëse vërtet dëshironi, mund ta kuptoni.

Ky efekt nuk përfaqëson asgjë të veçantë, një ndryshim banal në ndriçimin e imazheve në lëvizje, përveçse shtohen elementë të animacionit. Ju do të duhet të kuptoni vetë detajet e zbatimit duke zgjeruar kodin burimor të demonstrimit.

Një grup tjetër prej 10 efektesh pezullimi për imazhe, modifikime të ndryshme të miniaturave në lëvizje, zmadhimi, rrotullim, rrotullim, zbehje, etj.

Efekte të ndryshme për animimin e kornizës rreth imazheve, duket mjaft tërheqëse, ka një udhëzues të detajuar se si të vendosni dhe përdorni.

Efektet origjinale të pezullimit CSS3 të aplikuara për të shfaqur në mënyrë efektive titrat e miniaturave në lëvizje. Seti i rregullave CSS përfshin 10 efekte të ndryshme që mund t'i përdorni veçmas për imazhe të ndryshme. Efektet janë vërtet mbresëlënëse, veçanërisht kur kupton se gjithçka është bërë me CSS3. Një udhëzues i detajuar do t'ju ndihmojë të kuptoni se çfarë është.

Ideja është të krijohet një SVG që është një formë sfondi për një lloj shkronjash dhe kthehet në një formë tjetër në lëvizjen e mausit. Kështu, ju mund të bëni shumë opsione të ndryshme, në shembull, tregohen tre lloje të efekteve të tranzicionit. Gjëja e bukur për përdorimin e SVG është se ne mund të ndryshojmë madhësinë e formularit për t'iu përshtatur kontejnerit prind.

Imazhe rrëshqitëse

Thelbi i këtij efekti është që imazhi të zhvendoset lart e poshtë për shfaqjen e nënshkrimit. Nëse punoni me parametrat e stilit, mendoj se mund të arrini efekte mjaft të këndshme, por si parazgjedhje, gjithçka duket shumë e thjeshtë.

Me këtë efekt, gjithçka është e thjeshtë, titrat për fotografitë rrëshqasin lart djathtas ose majtas poshtë, në formën e një fjongo me një sfond të errët të tejdukshëm, gjithçka është shumë e thjeshtë për t'u riformuar duke përdorur vetitë css.

Një zgjidhje interesante, miniaturat paraqiten në një formë të errët, kur kaloni pezull mbi to, shfaqen imazhet dhe nënshkrimi shfaqet në një sfond të lehtë.

Një titull imazhi del nga këndi dhe zgjerohet diagonalisht në të gjithë zonën e imazhit.

Disa zgjidhje më interesante për zbatimin e titrave pop-up për miniaturat e imazheve. Në redaktorin në internet, mund të eksperimentoni me parametrat dhe të arrini rezultate më mbresëlënëse.

Një grup efektesh të bukura kur rri pezull mbi miniaturat, lloje të ndryshme të pamjes dhe dizajnit të titrave për fotografitë. Vijat e holla në kontrast me një sfond pak të errësuar krijojnë blloqe informacioni të lexueshëm.

Forma të çuditshme dhe efekt zmadhimi të kombinuara me efektin e animacionit të titrave për fotografimin e imazheve.

Efektet e mrekullueshme të mbivendosjes së ikonave në miniaturat e imazheve në variacione të ndryshme të pamjes. Shembulli përdor simbolin (+) të përshkruar në një rreth duke përdorur rreze-kufitare: në CSS, mund të përdorni gjithashtu ikonat e shkronjave për ta bërë panelin pop-up më informativ.

Një shembull i krijimit të një efekti vizual rrëshqitës për nxjerrjen e titrave vëllimore në imazhe duke përdorur vetëm CSS3 dhe HTML5.

6 Titrat e imazheve

6 Opsione për shfaqjen e titrave pop-up për imazhet në lëvizje duke përdorur CSS3. Mësimi i detajuar mbi zbatimin dhe konfigurimin, burimet e disponueshme për shkarkim.

Dhe së fundi, në fund, si të thuash, nuk mund të mos përmend mënyrën më të thjeshtë për të krijuar një titull pop-up për një miniaturë duke përdorur CSS3.

Unë fola për këtë metodë në një nga mësimet e mia të mëparshme:.

Me gjithë respekt, Andrew

Sot do të përpiqeni të dekoroni faqen ose blogun tuaj efekte të bukura për imazhet duke përdorur CSS dhe kod të rregullt HTML. Po, vetëm CSS dhe kodi i rregullt HTML, pa përdorur gjuhën e programimit PHP, JavaScript, jQueri dhe të tjera.
Cilat mund të jenë efektet e sugjeruara nga unë në faqen e blogut:

  1. zmadhoni dhe zvogëloni pa probleme imazhet;
  2. zhvendosja e imazheve vertikalisht dhe horizontalisht;
  3. anoni ose rrotulloni imazhin;
  4. rrumbullakos imazhet;

Dhe gjithashtu efekte të tilla:

  1. turbullim, ndriçim, kontrast, sepia;
  2. kalim i qetë nga ngjyra në të zezë dhe të bardhë;
  3. përmbysja e ngjyrës.

Për të përdorur kodin, thjesht duhet të kopjoni së pari kodin kryesor, dhe më pas kodin e efektit dhe të ngjisni, natyrisht, në blogun ose faqen tuaj të internetit.

Kodi kryesor

Ky kod vlen për të gjitha efektet që do të sugjerohen për ju më poshtë:

* (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; size-box: border-box;) body (sfondi: # 333 ;) .pic (kufiri: 10 px solid #fff; float: majtas; lartësia: 300 px; gjerësia: 300 px; diferenca: 20 px; tejmbushja: e fshehur; -webkit-box-shadow: 5px 5px 5px 5px # 111; box-hije: 5px 5px 5px # 111;)

Të gjitha stilet në klasën ".pic" do të jenë të përbashkëta për të gjitha imazhet. Të gjitha imazhet kanë një kufi të bardhë 10 px (rreshti # 13). Përmasat e njëjta të imazhit tregohen për lartësinë dhe gjerësinë prej 300 px (linjat # 15, # 16). Dhënia nga blloqet është 20 px (rreshti numër 17). Në mënyrë që fotografia të mos shkojë përtej rreshtave të specifikuara, ne përshkruajmë "mbushje: e fshehur; ". Nëse nuk i kuptoni të gjitha këto, ju rekomandoj ta lexoni.

Le të fillojmë me efektet.

1. Efekti "Zmadhimi".

këtu është ky kod:

Rreshti numër 2, specifikoni rrugën drejt imazhit, madhësia e së cilës është 400 x 400 px.

Në CSS tuaj, ngjitni këtë kod:

/ * zmadhoni imazhin * / .grow img (lartësia: 300px; gjerësia: 300px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition : të gjitha 1s lehtësi; tranzicioni: të gjitha 1s lehtësi;) .grow img: rri pezull (gjerësia: 400 px; lartësia: 400 px;)

Imazhi është në thelb 400 x 400 px, por ne do ta zvogëlojmë atë për të përshtatur kutinë tonë 300 x 300 px (Rreshtat # 3 dhe # 4).
Imazhi ndryshon pa probleme në imazhin origjinal 400 x 400 px (Rreshtat # 14 dhe # 15). Vetia e tranzicionit është përgjegjëse për ndryshimin e madhësisë së qetë, ku specifikohet 1 sekondë. (Rreshti # 6 - # 10).

2. Efekti "Redukto"

Në fakt, ky është i njëjti kod, vetëm ju duhet të ndryshoni madhësinë dhe imazhin pa probleme nga madhësitë e mëdha 400 x 400 px deri në 300 x 300 px.

Në skedarin HTML midis etiketave ngjisni këtë kod:

Në CSS tuaj, ngjitni këtë kod:

/ * zvogëloni imazhin * / .shrink img (lartësia: 400px; gjerësia: 400px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition : të gjitha 1s lehtësi; tranzicioni: të gjitha 1s lehtësi;) .shrink img: rri pezull (gjerësia: 300 px; lartësia: 300 px;)

3. Efekti "Zhvendosje horizontale".

Ky efekt ndryshon pozicionin e bllokut. Kjo do të thotë, nëse lëvizni kursorin mbi një foto, imazhi do të zhvendoset anash.

Në skedarin HTML, futni midis etiketave këtu është ky kod:

Në rreshtin # 2, specifikoni shtegun për në imazh, madhësia e së cilës është 600 x 300 px.

Në CSS tuaj, ngjitni këtë kod:

/ * imazhi i zhvendosjes horizontale * / .img anësor (margin-majtas: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; tranzicioni: diferencë 1s lehtësi;) .img anash: rri pezull (diferencë-majtas: -200px;)

Për të lëvizur figurën në të majtë, specifikoni vlerën "-200" në vetinë "margin-left". Nëse specifikoni "200", zhvendosja do të jetë në të djathtë.

4. Efekti "Zhvendosje vertikale"

Në fakt, ky është i njëjti kod, por në vend të veçorisë "margin-left", ju duhet të shkruani "margin-top" dhe imazhi do të lëvizë pa probleme duke lëvizur.

Në skedarin HTML, futni midis etiketave këtu është ky kod:

Në CSS tuaj, ngjitni këtë kod:

/ * Kompensimi vertikal i imazhit * / .vertpan img (margin-lart: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; tranzicioni: diferencë 1s ease;) .vertpan img: hover (margin-lart: -200px;)

Nëse specifikoni vlerën "200" në vetitë "margin-top", imazhi do të zhvendoset poshtë.

5. Efekti "Tilt"

Ky efekt do t'ju lejojë të bëni një rrotullim të lehtë të imazhit kur rri pezull mbi të me miun.

Në skedarin HTML, futni midis etiketave këtu është ky kod:

Në CSS tuaj, ngjitni këtë kod:

/ * anim imazhin * / .tilt (-webkit-transition: të gjitha 0,5s lehtësi; -moz-tranzicioni: të gjitha 0,5s lehtësi; -o-tranzicioni: të gjitha 0,5s lehtësi; -ms-transition: të gjitha 0,5s lehtësi; tranzicioni : të gjitha 0,5 s lehtësi;) .anim: rri pezull (-webkit-transformim: rrotullo (-10 gradë); -moz-transformo: rrotullo (-10 gradë); -o-transformo: rrotullo (-10 gradë); -ms-transformo : rrotullo (-10 gradë); transformim: rrotullo (-10 gradë);)

Kur rri pezull kursorin, fotografia do të kthehet 10 0 në të majtë (Rreshti # 11-# 15). Mund ta rrisni vetë shkallën e rrotullimit.

6. Efekti "Rrotullimi i imazhit me riformësim"

Ky është efekti im i preferuar. Kur vendosni kursorin e miut mbi imazh, ai bën një rreth rrotullimi, ndërsa forma katrore ndryshon në një rreth.

Në skedarin HTML, futni midis etiketave këtu është ky kod:

Në CSS tuaj, ngjitni këtë kod:

/ * rrotullimi i imazhit me ndryshimin e formës * / .morph (-webkit-transition: të gjitha 0,5s lehtësi; -moz-transition: të gjitha 0,5s lehtësi; -o-tranzicioni: të gjitha 0,5s lehtësi; -ms-transition: të gjitha 0,5s lehtësi; tranzicion: të gjitha 0,5s lehtësi;) .morph: rri pezull (rreze kufitare: 50%; -webkit-transform: rrotullo (360 gradë); -moz-transformim: rrotullo (360 gradë); -o-transformo: rrotullo (360 gradë ); -ms-transformim: rrotullo (360 gradë); transformim: rrotullo (360 gradë);)

"Rrezja kufitare" me vlerë "50%" është përgjegjëse për rrumbullakimin e këndeve.
Vetia e transformimit është përgjegjëse për rrotullimin e imazhit me 360 ​​0.

7. Efekti i Fokusit të Imazhit

Ky efekt nuk është i pazakontë, ai thjesht rrumbullakos imazhin dhe rrit trashësinë e kornizës.

Në skedarin HTML, futni midis etiketave këtu është ky kod:

Në CSS tuaj, ngjitni këtë kod:

/ ;) .fokus: rri pezull (kufiri: 70 px solid # 000; kufiri-rreze: 50%;)

Këtu, mendoj se ju kuptoni gjithçka: kufiri është përgjegjës për trashësinë e kufirit dhe rreze-kufi për rrezen e rrumbullakosjes.

8. Efekti i turbullimit

Kur vendosni kursorin e miut mbi një imazh të qartë, ai do të bëhet i paqartë.

Në skedarin HTML, futni midis etiketave këtu është ky kod:

Në CSS tuaj, ngjitni këtë kod:

/ * blur imazhin * / .blur img (-webkit-tranzicion: të gjitha 1s lehtësi; -moz-tranzicion: të gjitha 1s lehtësi; -o-tranzicion: të gjitha 1s lehtësi; -ms-transition: të gjitha 1s lehtësi; tranzicioni: të gjitha 1s lehtësi ease;) .turbullim img: hover (-webkit-filter: blur (5px);)

Vetia "webkit-filter: blur" me parametra 5 px është përgjegjëse për turbullimin.

9. Efekti "Imazhi bardh e zi"

Kur rri pezull kursorin e miut mbi një imazh me ngjyra, ai menjëherë bëhet bardh e zi.

Në skedarin HTML, futni midis etiketave këtu është ky kod:

Në CSS tuaj, ngjitni këtë kod:

/ * imazh bardh e zi * / .bw (-webkit-tranzicion: të gjitha 1s lehtësi; -moz-tranzicion: të gjitha 1s lehtësi; -o-tranzicion: të gjitha 1s lehtësi; -ms-transition: të gjitha 1s lehtësi; tranzicion: të gjitha 1s lehtësi;) .bw: rri pezull (-webkit-filter: shkallë gri (100%);)

Filtri "webkit-filter: grayscale" me vlerën "100%" përgjigjet se sa duhet bërë imazhi bardh e zi. Ju mund të specifikoni vlerën tuaj nga 1% -100%.

10. Efekti "Ndriçim"

Një imazh i errësuar bëhet më i ndritshëm kur lëvizni kursorin e miut mbi të.

Në skedarin HTML, futni midis etiketave këtu është ky kod:

Në CSS tuaj, ngjitni këtë kod:

/ -tranzicioni: të gjitha 1s lehtësi; tranzicioni: të gjitha 1s lehtësi;). ndriçim img: rri pezull (-webkit-filter: shkëlqim (100%);)

Fillimisht errësohet imazhi me "10%" (rreshti # 3)

Kur rri pezull kursorin e miut, ai ndriçon imazhin me "100%" (rreshti # 12)

11. Efekti "Sepia"

Gjithashtu një efekt mjaft i mirë, me të cilin imazhi do të kthehet në ton sepia.
këtu është ky kod:

Në CSS tuaj, ngjitni këtë kod:

/ * Sepia * / .sepia img (-webkit-transition: të gjitha 1s lehtësi; -moz-tranzicion: të gjitha 1s lehtësi; -o-tranzicion: të gjitha 1s lehtësi; -ms-transition: të gjitha 1s lehtësi; tranzicioni: të gjitha 1s lehtësi ;) .sepia img: hover (-webkit-filter: sepia (100%);)

12. Efekti "Kontrasti"

Unë mendoj se vetë emri tashmë sugjeron që kur kaloni kursorin mbi imazhin, fotografia do të bëhet më e pasur dhe më e kundërta.
Në skedarin HTML, futni midis etiketave këtu është ky kod:

Në CSS tuaj, ngjitni këtë kod:

/ * Kontrasti i imazhit * / .contrast img (-webkit-transition: të gjitha 1s lehtësi; -moz-tranzicion: të gjitha 1s lehtësi; -o-tranzicion: të gjitha 1s lehtësi; -ms-transition: të gjitha 1s lehtësi; tranzicioni: të gjitha 1s lehtësi lehtësi;) .kontrast img: hover (-webkit-filter: kontrast (185%);)

Kushtojini vëmendje rreshtit # 11. Nëse specifikoni një vlerë prej "100%", nuk do të bëhen ndryshime. Nëse e bëni përqindjen më shumë se "100%", për shembull, "185%,", imazhi do të bëhet më kontrast. Nëse e bëni përqindjen më pak se "100%", për shembull, "60%", imazhi do të zbehet.

13. Efekti "Inversion"
Ky është gjithashtu një nga efektet e mia të preferuara. Duket disi "metalike".

Në skedarin HTML, futni midis etiketave këtu është ky kod:

Në CSS tuaj, ngjitni këtë kod:

/ * Përmbys imazhin * / .invert img (-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; tranzicioni: të gjitha 1s ease;) .invert img: hover (-webkit-filter: invert (100%);)

Vlera e përmbysjes është vendosur nga 0% në 100% (rreshti # 11).

Kjo eshte e gjitha! Shpresoj se ju ka pëlqyer artikulli! Nëse ju pëlqen, klikoni pëlqimin në rrjetet sociale.

Ky postim përmban një përzgjedhje të efekteve dhe animacioneve të ndryshme CSS që mund të jenë të dobishme në punën tuaj, si dhe të eliminojnë nevojën për të përdorur vazhdimisht JavaScript. Ndoshta shembujt nuk janë më të rinjtë dhe më të pazakontët, por për mendimin tim, të dobishëm.

1. Ora CSS3 me jQuery

Kjo orë u krijua duke përdorur një nga mjetet kryesore të CSS3 - rrotullo dhe me bibliotekën jQuery të përfshirë.

2. Ora analoge CSS

Një orë analoge më klasike. Ato janë krijuar me tranzicionin e uebkit dhe pronën transform CSS. Por në mënyrë që koha të korrespondojë me atë aktuale, ju duhet JavaScript.

3. Kub rrotullues 3D

Rrotullimi dhe lëvizja përgjatë anëve të kubit do të kryhet duke përdorur tastet standarde "lart", "poshtë", "majtas" dhe "djathtas". Vetë forma 3D është ndërtuar duke përdorur webkit-perspective, -webkit-transform dhe -webkit-transition.

4. Kube të shumta 3D të anulueshme

Ka tashmë disa kube 3D të paraqitur këtu, duke përdorur CSS3 dhe drejtpërdrejt vetitë e transformimit dhe tranzicionit. Rri pezull mbi një kub bën që ai të rrëshqasë anash, duke zbuluar tekstin që është në anën tjetër të formës.

5. Menuja e fizarmonikës

Efekti "menuja e fizarmonikës" në CSS të pastër, ku klikimi në secilën prej rreshtave hap një dritare shtesë në trupin e vetë listës. Animacioni origjinal në shfletuesit e bazuar në WebKit.

6. Lëvizja paralaks me CSS

Është një lëvizje automatike e animuar paralaksike duke përdorur tranzicione CSS të bazuara në WebKit. Kur rri pezull mbi kutinë e tekstit, yjet në sfond fillojnë të lëvizin pa probleme anash. Krijohet efekti i fluturimit.

7. Matricë

Filmi kult "Matrix" është një nga filmat më të mirë fantashkencë. Ky shembull tregon se si të rikrijoni rreth të njëjtin animacion të mrekullueshëm (ekran i zi me numra që funksionojnë) në CSS3.

8. Palarida dinamike

Ky shembull detajon se si të krijoni foto të animuara bazuar në komandat CSS3. Kur klikoni mbi një imazh, ai zmadhohet dhe zhvendoset në pjesën e përparme.

9. Shkallëzimi i imazhit

Në këtë shembull, imazhet thjesht zmadhohen kur rri pezull. Një efekt i pakomplikuar, por ndonjëherë shumë i dobishëm.

10. Efektet JavaScript në CSS3

Si një alternativë ndaj JavaScript, ky postim sugjeron shtatë efekte CSS3: blloqe të ndryshme që rrotullohen, zhduken, rrëshqasin jashtë, rriten, etj.

11. Regjistrime virtuale të DJ Hero

Postimi shpjegon se si të krijoni rekorde rrotulluese. Shpejtësia e rrotullimit mund të rregullohet drejtpërdrejt në ekran.

12. Vinil rrëshqitës

Efekti rrëshqitës i regjistrimeve vinyl krijohet duke përdorur tranzicionet CSS3 dhe HTML. Ky lloj animacioni i jep jetë faqes së internetit, i shton origjinalitet kopertinës standarde të albumit, e kështu me radhë.

13. Efektet kur rri pezull mbi një foto

Kur rri pezull mbi një imazh, ai mund të zhvendoset anash, të rrotullohet, të tkurret, të transformohet nga katrori në rrumbullak, të bëhet i paqartë... Me një fjalë, fotografitë do të ndryshojnë vetitë e tyre në çdo mënyrë të mundshme.

14. Trekëndësh rrotullues

Kur klikoni në trekëndësh, ai fillon të rrotullohet.

15. Hapësirë

Një hapësirë ​​e tërë e jashtme e paketuar në CSS. Vepron si një shembull i mbivendosjes së shtresave rrotulluese (më e dukshme kur zmadhohet në shfletues).

16. "Meninas" në 3D

Një efekt interesant CSS që e bën pikturën e famshme të Diego Velazquez "Menina" të duket tredimensionale.

17. CSS për Mac OS X

Në fund të ekranit është një grup ikonash bazë Mac OS X që zmadhohen kur rri pezull. Efekti i jep dinamikë faqes.

18. Modalet Drop-In

Efektet CSS3 dhe vetitë "Drop-In Modals" ju ndihmojnë të krijoni ndryshime modale të shpejta, të animuara dhe të lehta.

19. Animimi i objekteve

Transformimi ndryshon pamjen e elementit në shfletues. Tregohet duke përdorur shembullin e një rakete që "fluturon" nga një skaj i ekranit në tjetrin. Mund të përdoren vegla lëvizëse, vegla rrotullimi, etj.

20. Orë me ngjyra

Ora me ngjyra mundësohet nga jQuery dhe CSS3. Ky efekt do të jetë i dobishëm në kontekstin e pritjes për kohën e përfundimit të disa konkurrimeve, votimit dhe të ngjashme.

21. Galeria Lightbox me jQuery dhe CSS3

Kjo është një galeri e shkëlqyer që ju lejon të renditni dhe rregulloni imazhet në një rend selektiv. Për interaktivitet, galeria përdor jQuery, jQuery UI dhe shtojcën jQuery FancyBox. Lightbox ruan titullin dhe përshkrimin e fotografive, i grupon ato dhe i rregullon automatikisht rrëshqitjet në një rresht.

22. Parapamje "Elastike".

Zmadhoni pamjen paraprake të imazhit kur rri pezull. Kështu, kur klikoni, menyja rritet proporcionalisht.

23. Kartat dinamike

Ky shembull është një grup dinamik kartash që përdorin veçoritë HTML dhe CSS3.

24. Menyja rrëshqitëse e jQuery

Shembulli slideout është krijuar me një kombinim të CSS3 dhe jQuery. Kur rri pezull mbi një foto, shfaqet një dritare pop-up me tekst.

25. Skedat CSS

Në shembull, vendosja e kursorit të miut mbi titujt e skedave ndryshon listën e mëposhtme.

26. Menuja e syve të peshkut

Shembulli tregon se si të krijoni një menu Fisheye duke përdorur animacionin CSS dhe SVG. Si një bonus shtesë, përdoret një SVG demo në etiketën IMG.

27. Menyja rënëse

Ky lloj ofron navigim shumë të përshtatshëm përmes menysë kryesore, falë përdorimit të tranzicioneve CSS3.

28. Titrat nga Star Wars

Kreditë e famshme nga "Star Wars". HTML dhe CSS do të mjaftojnë për t'i ekzekutuar ato.

29. Më shumë Efekte CSS Fisheye

Përsëri, ikonat që rriten duke qëndruar pezull.

30. Animacion i tipit “frame by frame”.

Disa opsione demonstrimi janë të mundshme.
Në shembullin e parë, për të siguruar ndryshimin e kornizave, është e nevojshme të klikoni në imazh. Çdo klikim është një lëvizje. Kornizat përsëriten, krijohet një lak i caktuar.
Në shembullin e dytë, për të ndryshuar kornizat, mjafton të lëvizni kursorin mbi imazh. Prandaj, shpejtësia e animacionit do të varet nga shpejtësia e lëvizjes së miut.

31. Walker Imperial AT-AT

Star Wars përsëri - ky këmbësor lëvizës AT-AT është bërë me CSS3.

32. Një fizarmonikë tjetër CSS

Kur klikoni në një rresht, tabela zgjerohet.

33. Menu e thjeshtë me rrëshqitje

40. Menyja rënëse
Një tjetër opsion për një meny të thjeshtë dhe të lezetshme rënëse CSS.

Nëse ju pëlqen efekti, atëherë thjesht mund të kopjoni kodin e përfunduar dhe ta përdorni!

Jepni në jetë faqen tuaj të internetit!

Efekte të ndryshme hover mund të sjellin freski në faqet e faqes tuaj. Më parë, për çdo efekt, duhej të merreshe me javascript, por sot, pas ardhjes së teknologjisë CSS3, gjithçka mund të bëhet duke anashkaluar përdorimin e javascript.

Shembujt e sotëm janë të gjithë të implementuar dhe optimizuar për shfletues të rinj modernë dhe do të funksionojnë patjetër në to (për shembull, në shfletuesit Mozilla ose WebKit). Nuk mund t'ju sigurojmë për të punuar në IE, por në versionet më të fundit, efektet do të funksionojnë patjetër siç pritej. Por mos harroni se një opsion tërheqës rikthimi është përgatitur për çdo efekt në rast se shfletuesi ende nuk e mbështet efektin.

01. Rritja

Demo: Të shikosh

Ky efekt është shumë i lehtë për t'u zbatuar dhe mund të bëhet në disa mënyra. Ne përdorëm një metodë ku një parametër marzh i shtohet çdo imazhi, dhe më pas, kur rri pezull, ky parametër hiqet. Le të themi se konfigurimi i marzhit fillon me 15 piksel, dhe kur rri pezull bëhet 2 piksel, gjë që e bën imazhin të duket sikur kërcen. Ju gjithashtu mund ta përdorni këtë efekt vetëm me tekst, edhe nëse lidhjet janë vertikalisht në vend të horizontale.

Tranzicioni këtu mund të vendoset sipas gjykimit tuaj, dhe efekti do të jetë gjithashtu tërheqës pa asnjë tranzicion. Për shembull, ne e bëmë efektin paksa të qetë, gjë që menduam se do t'i jepte pak shije efektit.

Bump Up CSS

Ex1 img (
kufiri: 5px solid #ccc;
noton: majtas;
diferenca: 15 px;
-webkit-tranzicioni: diferencë 0,5s lehtësim;
-moz-tranzicioni: diferencë 0,5s lehtësim;
-o-tranzicioni: diferencë 0,5s lehtësim jashtë;
}

Shembull 1 imazh: rri pezull (
margin-top: 2px;
}
02. Stack & Grow


Demo: Të shikosh

Autori i këtij efekti me sa duket ka dashur të arrijë një lloj efekti të llambës së llavës, pasi kur kaloni miun mbi listën e lidhjeve, çdo imazh zgjerohet ngadalë dhe më pas kthehet në madhësinë e tij origjinale.

Për zbatimin këtu janë përdorur imazhe me përmasa 400x133 piksele. Më pas ato u ndryshuan në 300x100 pikselë duke përdorur CSS dhe u zgjeruan në lëvizje. Meqenëse e gjithë lista është e përqendruar në shembull, madhësia e re e imazheve refraktoi të gjithë shtrirjen. Ky problem mund të zgjidhet duke vendosur kufijtë negativë në gjysmën e gjerësisë së imazheve të zmadhuara.

Kodi CSS për Stack & Grow

/ * Shembulli 2 * /
#kontejner (
gjerësia: 300 px;
marzhi: 0 auto;
}

# ex2 img (
lartësia: 100 px;
gjerësia: 300 px;
diferenca: 15 px 0;
-webkit-tranzicioni: të gjitha lehtësitë e 1-ve;
-moz-tranzicioni: të gjitha 1s lehtësi;
-o-tranzicioni: të gjitha 1s lehtësi;
}

# ex2 img: rri pezull (
lartësia: 133 px;
gjerësia: 400 px;
margjina-majtas: -50px;
}
03. Fade Teksti në


Demo: Të shikosh

Këtu autori donte të krijonte diçka si një ngjarje e tipit javascript, kur kaloni kursorin mbi një artikull dhe efekti shfaqet në një tjetër. Këtu teksti dhe imazhi u morën dhe më pas u vendosën në një ndarje të veçantë, të rreshtuar majtas. Më pas, parametrat e ngjyrës: transparente dhe lartësisë së vijës: 0 px u shtuan në div. Kjo lejoi që teksti të pozicionohej në krye të ndarjes dhe ta fshihte atë krejtësisht.

Në mënyrë që teksti të shfaqet përsëri, ne thjesht ndryshojmë ngjyrën dhe lartësinë e rreshtit. Kur rri pezull mbi imazhin, teksti rishfaqet. Efekt shumë qesharak dhe i lehtë.

Zbeh tekstin në CSS

# ish 3 (
gjerësia: 730 px;
lartësia: 133 px;
lartësia e vijës: 0 px;
ngjyra: transparente;
madhësia e shkronjave: 50 px;
font-familja: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
pesha e shkronjave: 300;
tekst-transformim: shkronja të mëdha;

}

# ex3: rri pezull (
lartësia e vijës: 133 px;
ngjyra: # 575858;
}

# ex3 img (
noton: majtas;
diferenca: 0 15 px;
}
04. Foto e shtrembër


Demo: Të shikosh

Ky efekt është shumë i thjeshtë, por funksionon shkëlqyeshëm për një galeri fotografish. Së pari, duhet të krijoni një rrjet imazhesh dhe më pas t'i rrotulloni imazhet kur rri pezull mbi to, gjë që krijon një efekt tërheqës.

Ka shumë vlera të reja CSS për t'u përdorur këtu, kështu që opsioni i rikthimit për shfletuesit më të vjetër vlen gjithashtu të merret në konsideratë. Në galerinë tonë, tranzicionet, transformimet dhe hijet e bllokut do të përdoren, megjithatë, sipas dëshirës tuaj. Transformimi do të jetë përgjegjës për rrotullimin e imazhit, dhe tranzicionet do të jenë përgjegjëse për efektin e butë dhe të qetë.

Këtu mund të aplikoni pseudo-zgjedhës.

Foto e shtrembër CSS

# ish 4 (
gjerësia: 800 px;
marzhi: 0 auto;
}

# ex4 img (
diferenca: 20 px;
kufiri: 5px solid #eee;
-webkit-box-hije: 4px 4px 4px rgba (0,0,0,0.2);
-moz-box-hije: 4px 4px 4px rgba (0,0,0,0.2);
kuti-hije: 4px 4px 4px rgba (0,0,0,0.2);
-webkit-tranzicioni: të gjitha 0,5s lehtësim;
-moz-tranzicioni: të gjitha lehtësitë 0.5s;
-o-tranzicioni: të gjitha lehtësitë 0,5s;
}

# ex4 img: rri pezull (
-webkit-transform: rrotulloj (-7deg);
-moz-transform: rrotulloj (-7deg);
-o-transformoj: rrotulloj (-7deg);
}
05. Zbehet dhe Reflekto


Demo: Të shikosh

Ky efekt është pak më i komplikuar për t'u zbatuar, kështu që na u desh të ndërhynim pak me të për të marrë një efekt të mirë. Pozicioni standard i imazhit është paksa transparent. Më pas, kur rri pezull mbi imazhin, niveli i transparencës ulet dhe imazhi rikthehet në pamjen e tij origjinale, si dhe shfaqet një shkëlqim dhe reflektim i lehtë (vetëm për shfletuesit e familjes WebKit).

Fatkeqësisht, reflektimi nuk është në të vërtetë një tranzicion, kështu që shfaqet menjëherë, edhe pse pjesa tjetër e përmbajtjes shfaqet në lëvizje të ngadaltë.

Nëse jeni të hutuar në lidhje me CSS për reflektime, mund të lexoni më shumë rreth tij në (David Walsh).

Zbehet dhe Reflekto Efekti CSS

# ish 5 (
gjerësia: 700 px;
marzhi: 0 auto;
Min-lartësia: 300px;
}

# ex5 img (
diferenca: 25 px;
opaciteti: 0.8;
kufiri: 10px solid #eee;

/ * Tranzicioni * /
-webkit-tranzicioni: të gjitha lehtësitë 0.5s;
-moz-tranzicioni: të gjitha lehtësitë 0.5s;
-o-tranzicioni: të gjitha lehtësitë 0,5s;

/ * Reflektimi * /
-webkit-box-reflect: nën 0px -webkit-gradient (lineare, majtas sipër, majtas poshtë, nga (transparente), ndalesa me ngjyra (.7, transparente), në (rgba (0,0,0,0.1)) );
}

# ex5 img: rri pezull (
errësirë: 1;

/ * Reflektimi * /
-webkit-box-reflect: nën 0px -webkit-gradient (lineare, majtas sipër, majtas poshtë, nga (transparente), ndalesa me ngjyra (.7, transparente), në (rgba (0,0,0,0.4)) );

/ * Shkëlqim * /
-webkit-box-hije: 0px 0px 20px rgba (255,255,255,0.8);
-moz-box-hije: 0px 0px 20px rgba (255,255,255,0.8);
kuti-hije: 0px 0px 20px rgba (255,255,255,0.8);
}
konkluzioni

Këta 5 shembuj duhet të jenë të mjaftueshëm për t'ju frymëzuar të krijoni diçka tuajën. Mos harroni se gjithmonë mund të eksperimentoni me shembuj të gatshëm dhe më pas të na tregoni për to.

Nëse keni hasur në efekte të tjera tërheqëse diku në rrjet, atëherë ju lutemi na tregoni ne dhe lexuesve të tjerë për këtë.

| 18.02.2016

CSS3 hap mundësi të pakufizuara për dizajnerët e UI, dhe avantazhi kryesor është se pothuajse çdo ide mund të zbatohet dhe zbatohet lehtësisht pa përdorur JavaScript.

Është e mahnitshme se sa gjëra të thjeshta mund të gjallërojnë një faqe interneti të rregullt, duke e bërë atë më të aksesueshme për përdoruesit. Po flasim për tranzicionet CSS3, me të cilat mund të lejoni që një element të transformojë dhe të ndryshojë stilin, për shembull, në hover. Nëntë shembujt e animacionit CSS3 më poshtë do të ndihmojnë në krijimin e një atmosfere të përgjegjshme në faqen tuaj, si dhe do të përmirësojnë pamjen e përgjithshme të faqes me tranzicion të bukur të qetë.

Për informacion më të detajuar, mund të shkarkoni arkivin me skedarët.

Të gjitha efektet funksionojnë duke përdorur veçorinë e tranzicionit. tranzicionit- "tranzicioni", "transformimi") dhe pseudo-klasa: hover, e cila përcakton stilin e elementit kur kaloni mbi të me kursorin e miut (në tutorialin tonë). Për shembujt tanë, ne përdorëm një div 500x309 pixel, ngjyra origjinale e sfondit ishte # 6d6d6d dhe koha e kalimit nga një gjendje në tjetrën ishte 0,3 sekonda.

Trupi> div (gjerësia: 500 px; lartësia: 309 px; sfondi: # 6d6d6d; -webkit-transition: all 0.3s ease ;; -moz-transition: all 0.3s ease ;; -o-transition: all 0.3s ease ;; tranzicioni: të gjitha 0.3s lehtësi;)

1. Ndrysho ngjyrën kur rri pezull

Njëherë e një kohë, zbatimi i një efekti të tillë ishte një punë mjaft e mundimshme, me llogaritjet matematikore të vlerave të caktuara RGB. Për momentin, mjafton të shkruani stilin CSS, në të cilin duhet të shtoni: hover pseudo-klasa në përzgjedhës dhe të vendosni ngjyrën e sfondit, e cila do të zëvendësojë pa probleme (në 0,3 sekonda) ngjyrën origjinale të sfondit kur kaloni pezull mbi bllok:

Ngjyra: rri pezull (sfondi: # 53ea93;)

2. Pamja e kornizës

Një transformim interesant dhe i gjallë - një kornizë e brendshme që shfaqet pa probleme në lëvizjen e miut. E mirë për të dekoruar butona të ndryshëm. Për të arritur këtë efekt, ne përdorim: hover pseudo-class dhe vetinë box-shadow me parametrin inset (vendos hijen brenda elementit). Përveç kësaj, do t'ju duhet të vendosni shtrirjen e hijes (në rastin tonë, është 23 px) dhe ngjyrën e saj:

Kufiri: rri pezull (kuti-hije: futur 0 0 0 23px # 53ea93;)

3. Lëkundje

Ky animacion CSS është një përjashtim pasi vetia e tranzicionit nuk përdoret këtu. Në vend të kësaj, ne përdorëm:

  • @keyframes është një direktivë bazë për krijimin e animacioneve CSS kornizë për kornizë që ju lejon të bëni të ashtuquajturat. përshkrimi dhe përshkruani animacionin si një listë pikash kryesore;
  • animacion dhe animacion-përsëritje-count - vetitë për vendosjen e parametrave të animacionit (kohëzgjatja dhe shpejtësia) dhe numri i cikleve (përsëritjet). Në rastin tonë, përsërisni 1.
@ -webkit-keyframes lëkundje (15% (-webkit-transform: translateX (9px); transformim: translateX (9px);) 30% (-webkit-transform: translateX (-9px); transform: translateX (-9px); ) 40% (-webkit-transform: translateX (6px); transformim: translateX (6px);) 50% (-webkit-transform: translateX (-6px); transform: translateX (-6px);) 65% (-webkit -transformoj: translateX (3px); transformim: translateX (3px);) 100% (-webkit-transform: translateX (0); transformim: translateX (0);)) @keyframes swing (15% (-webkit-transform: translateX (9px); transformim: translateX (9px);) 30% (-webkit-transform: translateX (-9px); transformim: translateX (-9px);) 40% (-webkit-transform: translateX (6px); transformoj : translateX (6px);) 50% (-webkit-transform: translateX (-6px); transform: translateX (-6px);) 65% (-webkit-transform: translateX (3px); transform: translateX (3px); ) 100% (-webkit-transform: translateX (0); transformim: translateX (0);)) .luhatje: rri pezull (-webkit-animation: s krahu 0.6s lehtësi; animacion: lëkundje 0.6s lehtësi; -webkit-animation-iteration-count: 1; animacion-përsëritje-numërim: 1; )

4. Zbutja

Një efekt fade është në thelb një ndryshim i thjeshtë në transparencën e një elementi. Animacioni krijohet në dy faza: së pari, ju duhet të vendosni gjendjen fillestare të transparencës në 1 - domethënë patejdukshmëri të plotë, dhe më pas të specifikoni vlerën e tij në maus mbi - 0.6:

Zbehet (errësirë: 1;) .zbehet: rri pezull (opaciteti: 0,6;)

Për rezultatin e kundërt, ndërroni vlerat:

5. Rritja

Për ta bërë bllokun të rritet në lëvizje, ne do të përdorim vetinë e transformimit dhe do ta vendosim në shkallë (1.2). Në këtë rast, blloku do të rritet me 20 përqind duke ruajtur përmasat e tij:

Rritje: rri pezull (-webkit-transform: shkalle (1.2); -ms-transform: shkalle (1.2); transformim: shkalle (1.2);)

6. Ulje

Tkurrja e një elementi është po aq e lehtë sa ta bësh atë më të madh. Nëse në paragrafin e pestë, për të rritur shkallën, na duhej të specifikonim një vlerë më të madhe se 1, atëherë për të zvogëluar bllokun, thjesht specifikojmë një vlerë që do të jetë më e vogël se një, për shembull, shkalla (0.7). Tani, me lëvizjen e miut, blloku do të tkurret proporcionalisht me 30 përqind të madhësisë së tij origjinale:

Tkurret: rri pezull (-webkit-transform: shkalle (0.7); -ms-transformim: shkalle (0.7); transformim: shkalle (0.7);)

7. Shndërrimi në një rreth

Një nga animacionet e përdorura zakonisht është një element drejtkëndor që shndërrohet në një rreth në lëvizje. Duke përdorur veçorinë e rrezes kufitare CSS të çiftuar me: hover dhe tranzicion, kjo mund të realizohet pa probleme:

Rrethi: rri pezull (rrezja e kufirit: 70%;)

8. Rrotullimi

Një opsion qesharak i animacionit është të rrotulloni një element në një numër të caktuar gradësh. Për ta bërë këtë, na duhet përsëri vetia e transformimit, por me një vlerë të ndryshme - rotateZ (20 gradë). Me këto parametra, blloku do të rrotullohet 20 gradë në drejtim të akrepave të orës rreth boshtit Z:

Rrotulloni: rri pezull (-webkit-transform: rrotullojZ (20 gradë); -ms-transformoj: rrotullojZ (20 gradë); transformim: rrotullojZ (20 gradë);)

Hije 9.3D

Dizajnerët nuk pajtohen nëse ky efekt është i përshtatshëm për dizajn të sheshtë. Megjithatë, ky animacion CSS3 është shumë origjinal dhe përdoret gjithashtu në faqet e internetit. Ne do të arrijmë një efekt tre-dimensional duke përdorur vetitë tashmë të njohura të hijes së kutisë (do të krijojmë një hije me shumë shtresa) dhe do të transformojmë me parametrin translateX (-7px) (do të sigurojë një zhvendosje horizontale të bllokut majtas me 7 pikselë ):

Treshe: rri pezull (kuti-hije: 1px 1px # 53ea93, 2px 2px # 53ea93, 3px 3px # 53ea93, 4px 4px # 53ea93, 5px 5px # 53px 5px # 53px 5px # 53px 3px93, 3px 3px, 3px, 3px, 3px, 3px, 3px, 3 px, -7px); transformimi: translateX (-7px);)

Mbështetja e shfletuesit

Vetia e tranzicionit aktualisht mbështetet nga shfletuesit e mëposhtëm:

Shfletuesit e desktopit
Internet Explorer Mbështetur nga IE 10 dhe më lart
krom Mbështetet nga versioni 26 (deri në versionin 25 funksionon me prefiksin -webkit-)
Firefox Mbështetet që nga versioni 16 (në versionet 4-15 funksionon me prefiksin -moz-)
Opera Mbështetet që nga versioni 12.1
Safari Mbështetet që nga versioni 6.1 (në versionet 3.1-6 funksionon me prefiksin -webkit-)

Pjesa tjetër e veçorive të përdorura në këta shembuj, si transformimi, kuti-hija, etj., mbështeten gjithashtu nga pothuajse të gjithë shfletuesit modernë. Megjithatë, nëse do t'i përdorni këto ide për projektet tuaja, ju rekomandojmë fuqimisht që të kontrolloni dy herë për pajtueshmërinë e ndërshfletuesve.

Shpresojmë që këta shembuj të animacionit CSS3 të jenë të dobishëm për ju. Ju urojmë suksese krijuese!

Artikujt kryesorë të lidhur