CSS-i hõljutusefektid – piltide, nuppude, linkide, plokkide jms kohal hõljutamisel. Üheksa lihtsat näidet CSS3 animatsiooni Css-efektidest ploki kohal hõljutamisel

Väga sageli võite veebisaitidel kohata kursorit hõljutades muudatusi või nuppe. Spetsiaalne pseudoklass:hover CSS-is võimaldab teil ülesande rakendada. Täna vaatleme mõningaid tehnikaid, mis võimaldavad meil seda trikki teha, ja allpool avaldame nimekirja neist kõige huvitavamatest (koos lühikeste kirjelduste/selgitustega). Jagame kõik valikud järgmisteks osadeks:

Need rühmad on väga meelevaldsed, sest paljud näited kattuvad ja on universaalsed, st neid võib leida erinevate objektide kujundamisel.

CSS-stiilide hõljutusefekt lisatakse elemendist paremale järgmiselt:

a: hõlju (värv: punane;)

a:hover ( värvus: punane; )

Kõige sagedamini kasutatakse mehhanismi spetsiaalselt linkide jaoks, et muuta nende värvi või lisada/eemaldada allajoonimist. Kuid seda saab määrata ka muude plokkide, nuppude, tekstide jaoks või kasutada loomisel.

nupp: hõljuta (taust: rgba (0, 0, 0, 0)

nupp:hover ( taust: rgba(0,0,0,0); värv: punane; ) .my-picture:hover ( läbipaistmatus: 0,5; filter: alfa(läbipaistmatus=50); )

Kaasaegsed brauserid tajuvad hõljumisel CSS-i hõljumise efekti võrdselt õigesti, kuigi IE 6 vanemates versioonides ja vanemates versioonides töötab see ainult linkide puhul. Lisaks väitsid mõned allikad, et see tuleb koodis täpsustada.

Muide, linkide stiilide määramisel saab lisaks kasutada ka selektoreid: link - veel külastamata lehtede jaoks, :visited - nende jaoks, kus olete juba käinud + :active määrab hetkel aktiivse aadressi. Oluline on paigutada hõljutusefekt CSS-is märkide :link ja :visited järele, kui need on olemas.

Liigume teoorialt praktikale. Allpool on nimekiri kasulikest materjalidest ja juppidest – allikate vaatamiseks järgige linke.

Kursorefektid nuppude ja linkide jaoks

Nagu me eespool ütlesime, on see kõige populaarsem objektide kategooria saidil, kus see tehnika on leitud. Siin on teema kohta mõned võimalused.

Nuppude lihtsad näited

Sullivani nupud

Nipp seisneb selles, et erinevate nuppude kohal hõljutades käivitatakse lisaks taustavärvi muutmisele ka väike animatsioon ikoonidega (igaühel oma).

CSS-i ikoonid hõljukil

Valik 5 lihtsat võimalust ülesande elluviimiseks. Kõikidel juhtudel kasutatakse täiendavaid ikoone, mis ilmuvad tekstist paremal/vasakul või asendavad selle.

Nupu hõljumise efektid

Võrreldes eelmise näitega näevad need 12 päästikufunktsiooni palju huvitavamad välja: nii visuaalselt kui ka koodi mõttes. Mitte ilma JS-ita.

Nav Hovers

Mitmed funktsioonid, mis võimaldavad teil teha midagi ebatavalisemat kui põhilise tekstidekoratsiooni omadusega. Nupu taust on lisaks täidetud erinevate visuaalsete efektidega.

Teave Hoveri kohta

Tööriistanäpunäidete funktsiooni toetavad praegu kõik brauserid, kuid saate seda oma vajadustele vastavaks kohandada. Praeguses näites käivitatakse pseudoklass märgendi dfn puhul, mis näeb stiilne välja. Kood on üsna kompaktne HTML + CSS.

Mana nupp

Üks originaalsemaid hõljukefekti variante plokkidena - hõljumisel on see justkui vedelikuga täitmine. Rakendus kasutab CSS-i, HTML-i ja SVG-d. Teatud veebisaiditeemade puhul on see jupp kindlasti jumala kingitus.

Kujutiste hõljutamise efektid

15 põhitehnikat

Vaatamata sellele, et artikkel ilmus üsna kaua aega tagasi, töötavad meetodid endiselt õigesti. Siia on ilmselt kogutud kõik võimalikud graafika standardteisendused: mitut tüüpi suum, pööramine, hägusus, mustvalge, läbipaistvus, filtrid, sära jne. Väga kasulik materjal.

Ilusad hõljukefektide pildid

Valik 30 meeldivat ja sujuvat tegevust pildi kohal hõljutades. Tänu lihtsatele visuaalsetele manipulatsioonidele suumimise ja joonte lisamise näol tekib hea kompleksne mulje. Kohati on pealkirja suurendatud ja lühikirjeldust pingutatud. Suurepärane võimalus portfelli jaoks.

Barberpole Hover animatsioon

Animatsioon pole esmapilgul keeruline, kuid lõppkokkuvõttes tundub see väga lahe ja ebatavaline.

CSS-i hõljumise efektid koos suunatuvastusega

Suurepärase valiku sellel teemal olevaid juppe ja koode leiate saidi css-tricks.com artiklist. Kõiki neid näiteid ühendab asjaolu, et töö käigus määratakse kursori liikumise asukoht ja suund. See omakorda võimaldab leheelementide kohal hõljutades tekitada üsna originaalseid reaktsioone:

Paljudes keerulistes lahendustes võivad hõljukefektide jaoks mõeldud Javascript ja jQuery tulemust oluliselt mitmekesistada ja parandada.

Suunateadlik hõljumine headus

Suunateadlikud plaadid, kasutades puhast CSS-i lõiketee

Ülejäänud nipid leiate algsest artiklist.

Animatsioon

See arendus sisaldab rohkem kui 100 lihtsat viisi hõljuvate piltide või objektide animeerimiseks. Nende funktsioonide abil saate rakendada erinevaid nuppude, pealkirjade, tekstide, sotsiaalsete ikoonide jms välimust. Piltide kuvamise ja poolläbipaistvate taustaülekatete muutmiseks on valikud.

Link sisaldab 7 CSS3 hõljuva päise efekti – pildi kohal hõljutades näeb kasutaja infoplokki koos pealkirja, lühikirjelduse ja lingiga navigeerimiseks. See ei tähenda, et näited oleksid väga originaalsed, kuid need aitavad staatilise sisuga projekti kindlasti mitmekesistada.

CSS-i hõljumise teegid

Hover.css

Projekt, mille nimi on lihtsalt Hover.css, sisaldab linkide, nuppude, plokkide jne CSS3 efektide kogumit. Saate kasutada valmis koodi ja/või lisada sellele oma muudatusi. Siin on palju huvitavat: 2D/3D teisendused, taustade ja raamidega töötamine, varjud, ikoonid. Lahendus on saadaval CSS, LESS ja Sass formaadis.

Imagehover.css

Veel üks teek, mis määrab piltidele hõljukefektid - tasuta versioonist leiate 44 teisendusvalikut (lisatasu komplekt sisaldab 5 korda rohkem). Siin on toetatud ka LESS ja SCSS, see fail kaalub vaid 19kb. Saidil on leht, mis näitab kõiki töönäiteid. Seal on palju unikaalseid funktsioone, mida pole eespool nähtud.

Projekt sisaldab enam kui 30 erinevat tehnikat ümmarguste ja kandiliste objektide jaoks. Kõik need on üsna originaalsed, lihtsaid "üheelemendilisi" toiminguid tavalise suumi/väljalendamise näol praktiliselt pole. Ülesande realiseerimiseks kasutati puhast CSS3 + HTML-i (lisaks Scss-failid). Suurepärane ühilduvus Bootstrap 3-ga, dokumentatsioon on saadaval.

Kokku. Loodame, et need css-i hõljumise efektid piltide, plokkide, linkide ja muude leheelementide kohal hõljutades aitasid teil seda teemat mõista. Teie arvates saate oma veebisaitidel rakendada kõige edukamaid lahendusi - olgu selleks siis täisväärtusliku raamatukogu ühendamine või lihtsalt koodi väikese versiooni integreerimine.

Kui teate muid huvitavaid funktsioone ja katkendeid, saatke nende URL-id kommentaarides. Ja me täiendame seda artiklit tulevikus.

Tõlge

CSS3 võimsus on tohutu ja selles õpetuses näete, kuidas seda loominguliselt kasutada. Loome mõned hiirekursori efektid, kasutades CSS3 üleminekuid. Hõljutades kursorit pisipildi kohal, kuvatakse pisipiltide kirjeldus, kasutades igas näites erinevaid stiile.

Pange tähele, et need näited töötavad õigesti ainult kaasaegsetes brauserites, mis toetavad CSS3 atribuute.

HTML märgistus

Märgistusstruktuur on väga lihtne ja intuitiivne. Looge konteiner, mis sisaldab pilti ja muud teavet, nagu pealkiri, kirjeldus jne.

Vaateklassiga ploki sisse sisestame maskiklassiga elemendi, mis vastutab meie CSS3 efektide eest, selle sisse asetame pealkirja, kirjelduse ja lingi täispildile. (Mõne näite puhul peame lisama maski eraldi elemendina ja mähkima kirjelduse sisuklassiga div-sse.)

Pealkiri

Loe rohkem

CSS

Pärast märgistuse loomist loome oma stiilid.

Seadke oma stiilidele üldised reeglid ja seejärel lisame soovitud efektidega eriklassid. Selles artiklis jätame erinevate brauserite jaoks välja CSS-i eesliited, kuid näete neid lähtekoodis.
.view ( laius: 300px; kõrgus: 200px; veeris: 10px; hõljumine: vasakul; ääris: 10px ühtlane #fff; ületäitmine: peidetud; asukoht: suhteline; teksti joondamine: keskel; kasti vari: 1px 1px 2px #e6e6e6; kursor: vaikimisi; taust: #fff url(../images/bgimg.jpg) kordumatu keskosa ; üleval: 0; vasakul: 0 ) .view img (kuva: plokk; asukoht: suhteline ) .view h2 (teksti teisendus: suurtähed; värv: #fff; teksti joondus: keskel; asend: suhteline; fondi suurus: 17 pikslit; polsterdus: 10 pikslit; taust: rgba(0, 0, 0, 0,8); veeris: 20 pikslit 0 0 0 ) .view p ( fondiperekond: Georgia, serif; fondi stiil: kaldkiri; fondi suurus: 12 pikslit; asend: suhteline; värv: #fff; polsterdus: 10 pikslit 20 pikslit 20 pikslit; teksti joondus: keskel ) .vaade a.info (kuva: tekstisisene plokk; teksti kaunistamine: puudub; polsterdus: 7px 14px; taust: #000; värv : #fff; teksti teisendus: suurtähed; kasti vari: 0 0 1px #000 ) .view a.info:hover ( kasti vari: 0 0 5px #000 )
Nüüd vaatame kümmet efekti.

Näide 1

Lisame selle efekti vaateklassiga elemendile spetsiaalne vaade-esimene klass. Lisame iga vaateelemendi eksemplari jaoks eriklassi (vaade-esimene, vaade-teine, vaade-kolmas jne).

Esimeses näites kasutame kena hõljumise efekti loomiseks mõnda põhilist üleminekut:
.view-first img (üleminek: kõik 0,2 s lineaarne; ) .view-first .mask ( läbipaistmatus: 0; taustavärv: rgba(219,127,8, 0,7); üleminek: kõik 0,4 s lihtne sisse-välja; ) .view-first h2 ( teisendus: translateY(-100px); läbipaistmatus: 0; üleminek: kõik 0,2 s lihtne sisse-välja; ) .view-first p ( teisendus: translateY(100px); läbipaistmatus: 0; üleminek: kõik 0,2 s lineaarne; ) .view-first a.info( läbipaistmatus: 0; üleminek: kõik 0,2 s lihtne sisse-välja; )
Ja nüüd meie efekti kõige huvitavam osa. Kui liigutame kursori pildi kohal, saame kasutada atribuuti delay, et simuleerida lihtsat animatsiooni. Üleminekuviivitust, mida kasutame hõljutamisel, saab muuta tavapärasest klassist erinevaks. Selles näites ei ole me tavaklassis kasutanud viivitust, kuid oleme lisanud hõljumisele viivituse, mis üleminekuefekti veidi edasi lükkab.
.view-first:hover img ( teisendus: skaala(1.1); ) .view-first:hover .mask ( läbipaistmatus: 1; ) .view-first:hover h2, .view-first:hover p, .view-first :hover a.info ( läbipaistmatus: 1; teisendus: translateY(0px); ) .view-first:hover p ( ülemineku viivitus: 0,1 s; ) .view-first:hover a.info ( ülemineku viivitus: 0,2 s ;)

Näide 2

Teises näites lisame erivaate-teise klassi, kuid jätame maskiklassiga elemendi tühjaks ja mähime kirjelduse sisuklassiga div-sse.

Hõljuti stiil nr 2

Mingi kirjeldus

Loe rohkem

Siin on maskiklassil erinevad atribuudid, eriti rakendame teisendusomadust (tõlgi ja pööra). Kirjelduselemendid teisaldatakse, et saaksime need kursorit hõljutades kokku teisaldada:
.view-second img ( üleminek: kõik 0,2s easy-in; ) .view-second .mask ( taustavärv: rgba(115,146,184, 0,7); laius: 300px; polsterdus: 60px; kõrgus: 300px; läbipaistmatus: 0; teisendus: translate(265px, 145px) rotate(45°); üleminek: kõik 0,2s lihtne sisse-välja; ) .view-sekund h2 (ääris-alumine: 1px solid rgba(0, 0, 0, 0,3); taust: läbipaistev; veeris: 20px 40px 0px 40px; teisendus: translate(200px, -200px); üleminek: kõik 0,2s lihtne sisse-välja; ) .view-second p ( teisendus: translate (-200px, 200px); üleminek: kõik 0,2 s lihtne sisse-välja; ) .view-sekund a.info ( teisendus: translate(0px, 100px); üleminek: kõik 0,2s 0,1s lihtne sisse-välja; )
Hõljutusefekti jaoks kasutame elementide paika viimiseks tõlketeisendust. mask hakkab samuti pöörlema. Kirjelduselemendid liiguvad väikese viivitusega:
.view-second:hover .mask ( läbipaistmatus:1; teisendus: translate(-80px, -125px) rotate(45°); ) .view-second:hover h2 ( transform: translate(0px,0px); ülemineku viivitus: 0,3 s; ) .view-second:hover p ( teisendus: translate(0px,0px); ülemineku viivitus: 0,4 s; ) .view-second:hover a.info ( transform: translate(0px,0px); transfer- viivitus: 0,5 s;)

Näide 3

Kolmandas näites kasutame translatsiooni ja pööramise teisendust:
.view-third img ( üleminek: kõik 0,2 s lihtne sisse lülitada; ) .view-third .mask ( taustavärv: rgba(0,0,0,0,6); läbipaistmatus: 0; teisendus: translate(460px, -100px ) pööra (180 kraadi); üleminek: kõik 0,2 s 0,4 s kergendus sisse-välja; ) .view-third h2( teisendus: translateY (-100px); üleminek: kõik 0,2 s kergendus sisse-välja; ) .view-third p ( teisendus: translateX(300px) rotate(90°); üleminek: kõik 0,2 s kergendus sisse-välja; ) .view-third a.info ( teisendus: translateY(-200px); üleminek: kõik 0,2 s kergendus-sisse- välja ;)
Need on lihtsad juhised, mida rakendatakse hõljumisel. Nüüd pöörame elemendi kirjeldust ümber, määrates vastavalt üleminekuviivituse:
.view-third:hover .mask ( läbipaistmatus:1; ülemineku viivitus: 0s; teisendus: translate(0px, 0px); ) .view-third:hover h2 ( teisendus: translateY(0px); ülemineku viivitus: 0,5 s ; ) .view-third:hover p ( teisendus: translateX(0px) rotate(0deg); ülemineku viivitus: 0,4 s; ) .view-third:hover a.info ( teisendus: translateY(0px); ülemineku viivitus: 0,3 s;)

Näide 4

Neljandas näites teostame lihtsa pildi vähendamise ja sisu pööramise, seda kõike tänu skaala teisendamisele. Määrame pildistiilide ülemineku viivituseks 0,2, kuid hõljutades muudame selle 0-ks. See käivitab animatsiooni kohe, kui hiirt liigutatakse, kuid viivitab, kui kursor eemaldub.
.view-fourth img ( üleminek: kõik 0,4s ease-in-out 0.2s; läbipaistmatus: 1; ) .view-fourth .mask ( taustavärv: rgba(0,0,0,0.8); läbipaistmatus: 0; teisendus: skaala (0) pööra (-180 kraadi); üleminek: kõik 0,4 s kergendus; äärise raadius: 0 pikslit; ) .view-fourth h2 (läbipaistmatus: 0; ääris-alumine: 1px solid rgba(0, 0, 0, 0,3); taust: läbipaistev; veeris: 20 pikslit 40 pikslit 0 pikslit 40 pikslit; üleminek: kõik 0,5 s kergatiivne sisse-välja; ) .vaade-neljas p ( läbipaistmatus: 0; üleminek: kõik 0,5 s kerg-sisse-välja; ) .view-fourth a.info ( läbipaistmatus: 0; üleminek: kõik 0,5 s lihtne sisse-välja; )
Need on juhised selle efekti saamiseks - CSS3-ga saate teha kõike :).
.view-fourth:hover .mask ( läbipaistmatus: 1; teisendus: skaala (1) pööra (0°); ülemineku viivitus: 0,2 s; ) .view-fourth:hover img ( teisendus: skaala (0); läbipaistmatus: 0 ; ülemineku viivitus: 0 s; ) .view-fourth:hover h2, .view-fourth:hover p, .view-fourth:hover a.info( läbipaistmatus: 1; ülemineku viivitus: 0,5 s; )

Näide 5

Selles viiendas näites kasutame sisu vasakule teisaldamiseks atribuuti translate koos funktsiooniga ülemineku-ajastamise-lihtsustus sisse-välja.
.view-fifth img ( üleminek: kõik 0,3 sekundit lihtne sisse-välja; ) .view-fifth .mask ( taustavärv: rgba(146,96,91,0,3); teisendus: translateX(-300px); läbipaistmatus: 1; üleminek: kõik 0,4 s lihtne sisse-välja , 140, 0,5); ) .view-fifth p( läbipaistmatus: 0; värvus: #333; üleminek: kõik 0,2s lineaarne; )
Hõljutusefekt nihutab pilti paremale ja kirjeldus ilmub vasakule poole, nagu oleks see pilti nihutanud:
.view-fifth:hover .mask ( teisendus: translateX(0px); ) .view-fifth:hover img ( teisendus: translateX(300px); ülemineku viivitus: 0,1 s; ) .view-fifth:hover p( läbipaistmatus: 1; ülemineku viivitus: 0,4 s; )

Näide 6

Selles näites kuvame kirjelduse ette ja vähendame pildi algsuurusele (skaalal 10 kuni 1). Allosas ilmub nupp "loe edasi" (tõlgi).
.view-sixth img ( üleminek: kõik 0,4 s kergendus sisse-välja 0,5 s; ) .view-sixth .mask( background-color: rgba(146,96,91,0.5); läbipaistmatus:0; üleminek: kõik 0,3 s lihtsustus 0,4 s; ) .view-sixth h2(läbipaistmatus:0; ääris-alumine: 1px solid rgba(0, 0,0,0,3); taust: läbipaistev; veeris: 20px 40px 0px 40px; teisendus: skaala( 10); üleminek: kõik 0,3 s kergendus sisse-välja 0,1 s; ) .view-sixth p ( läbipaistmatus: 0; teisendus: skaala(10); üleminek: kõik 0,3 s kergendus sisse-välja 0,2 s; ) .view -sixth a.info ( läbipaistmatus: 0; teisendus: translateY(100px); üleminek: kõik 0,3 s lihtsus sisse-välja 0,1 s; )
Tagasiminek lükkub edasi, nii et see näib sujuv:
.view-sixth:hover .mask ( läbipaistmatus:1; ülemineku viivitus: 0s; ) .view-sixth:hover img (ülemineku viivitus: 0s; ) .view-sixth:hover h2 ( läbipaistmatus: 1; teisendus: skaala (1); ülemineku viivitus: 0,1 s; ) .view-sixth:hover p ( läbipaistmatus: 1; teisendus: skaala (1); ülemineku viivitus: 0,2 s; ) .view-sixth:hover a.info ( läbipaistmatus :1; teisendus: translateY(0px); ülemineku viivitus: 0,3 s; )

Näide 7

Seitsmendas näites on idee pöörata pilti keskel ja viia see kaugusesse. Seejärel ilmub kirjeldus, mis peidab pöörleva pildi selle taha.
.view-seventh img(üleminek: kõik 0,5s kergendus; läbipaistmatus: 1; ) .view-seventh .mask ( taustavärv: rgba(77,44,35,0.5); teisendus: rotate(0deg) scale( 1); läbipaistmatus: 0; üleminek: kõik 0,3 s kergendus sisse-välja; ) .view-seventh p ( teisendus: translateY(-200px); üleminek: kõik 0,2 s lihtne-in-out; ) .view-seventh a.info ( teisendus: translateY(-200px); üleminek: kõik 0,2 s lihtsus sisse-välja;)
Hõljutades lisame kirjelduselementidele viivituse. See võimaldab meil näha pöörlevat pilti enne, kui kirjeldus pildi peidab. Vastupidisel üleminekul kaob kõik kohe ja näeme pilti pöörlemas vastupidises suunas:
.view-seventh:hover img( teisendus: pööra (720 kraadi) skaala(0); läbipaistmatus: 0; ) .view-seventh:hover .mask ( läbipaistmatus: 1; teisendus: translateY(0px) rotate(0deg); üleminek- viivitus: 0,4 s; ) .view-seventh:hover h2 ( teisendus: translateY(0px); ülemineku viivitus: 0,7 s; ) .view-seventh:hover p ( teisendus: translateY(0px); ülemineku viivitus: 0,6 s ; ) .view-seventh:hover a.info ( teisendus: translateY(0px); ülemineku viivitus: 0,5 s; )

Näide 8

Kaheksandas näites kasutame animatsiooni ja loome uuesti põrkeefekti. Kirjeldus laskub alt ja põrkab tagasi alumisest servast.
.view-kaheksas .mask ( taustavärv: rgba(255, 255, 255, 0,7); ülaosa: -200 pikslit; läbipaistmatus: 0; üleminek: kõik 0,3 s kergendus 0,5 s; ) .view-kaheksas h2( teisendus : translateY(-200px); üleminek: kõik 0,2 s lihtsus sisse-välja 0,1 s; . vaade-kaheksas p ( värv: #333; teisendus: translateY(-200px); üleminek: kõik 0,2 s kergendus sisse-välja 0,2 s; ) .view-kaheksas a.info ( teisendus: translateY(-200px); üleminek: kõik 0,2 s lihtsus sisse-välja 0,3 s; )
Lisame maski elemendile animatsiooni ja määrame kirjelduselementide jaoks mõned viivitusseaded:
.view-eightth:hover .mask ( läbipaistmatus: 1; ülemine: 0px; ülemineku viivitus: 0s; animatsioon: bounceY 0,9s lineaarne; ) .view-eightth:hover h2 ( teisendus: translateY(0px); ülemineku viivitus: 0,4 s; ) .view-eightth:hover p ( teisendus: translateY(0px); ülemineku viivitus: 0,2 s; ) .view-eightth:hover a.info ( teisendus: translateY(0px); ülemineku viivitus: 0s; )
Tegeliku põrkeefekti taasloomiseks kasutame translateY-d, kuna näete, et selle efekti loob mitu kaadrit:
@keyframes bounceY ( 0% ( teisendus: translateY(-205px);) 40% ( teisendus: translateY(-100px);) 65% ( teisendus: translateY(-52px);) 82% ( teisendus: translateY(-25px)) ;) 92% ( teisenda: translateY(-12px);) 55%, 75%, 87%, 97%, 100% ( teisenda: translateY(0px);) )

Näide 9

Selles näites kasutame kahte maski elementi nende liigutamiseks paremast alumisest ja vasakust ülanurgast:

Hõljuti stiil nr 9

Loe rohkem

Maski elementidel on erinevad tõlke- ja lähteväärtused. Samuti näitame, et üks on joondatud ülemise äärisega ja teine alumise äärisega:
.view-ninth .mask-1,.view-ninth .mask-2( taustavärv: rgba(0,0,0,0,5); kõrgus: 361px; laius: 361px; taust: rgba(119,0,36 ,0,5); läbipaistmatus: 1; üleminek: kõik 0,3 s kergendus sisse-välja 0,6 s; ) .view-ninth .mask-1 ( vasak: automaatne; parem: 0px; teisendus: pööra (56,5 kraadi) translateX (-180px) ); teisendus-päritolu: 100% 0%; ) .view-9th .mask-2 (ülemine: automaatne; alumine: 0px; teisendus: pööramine (56,5 kraadi) translateX (180px); teisendus lähtekoht: 0% 100%; ) .view-ninth .content( taust: rgba(0,0,0,0,9); kõrgus: 0px; läbipaistmatus: 0,5; laius: 361px; ülevool: peidetud; teisendus: pööra (-33,5 kraadi) translate(-112px, 166 pikslit); teisendus-lähtekoht: 0% 100%; üleminek: kõik 0,4 s kergendus sisse-välja 0,3 s; ) .view-ninth h2( taust: läbipaistev; veeris ülemine: 5px; ääris-alumine: 1px solid rgba( 255,255,255,0,2); .view-ninth a.info (kuva: puudub; )
Hõljumisel paneme sisu paistma justkui kahe keskme poole liikuva maskielemendi alt:
Kuva kuva -2 (teisendus: pööra (56,5 kraadi) translateX(-1px); )
Oleme konfigureerinud maskielementide üleminekuviivituse nii, et kui hõljutame kursorit, toimub üleminek kohe, kuid kui hiir eemaldub, on viivitus pikem.

Näide 10

Viimases näites suurendame pilti ja seejärel peidame selle, tuues kirjelduse ette. Seda saame teha skaala teisenduse ja läbipaistvuse taseme reguleerimise abil:
.view-tenth img ( teisendus: scaleY(1); üleminek: kõik 0,7 sekundit kergendust sisse-välja; ) .view-tenth .mask ( taustavärv: rgba(255, 231, 179, 0,3); üleminek: kõik 0,5 s lineaarne; läbipaistmatus: 0; ) .view-10. h2(ääris-alumine: 1px solid rgba(0, 0, 0, 0.3); taust: läbipaistev; veeris: 20px 40px 0px 40px; teisendus: skaala(0); värv: #333; üleminek: kõik 0,5 s lineaarne; läbipaistmatus: 0; ) .vaade-kümnes p ( värvus: #333; läbipaistmatus: 0; teisendus: skaala(0); üleminek: kõik 0,5 s lineaarne; ) .view- kümnes a.info ( läbipaistmatus: 0; teisendus: skaala (0); üleminek: kõik 0,5 s lineaarne; )
Hõljumisel me lihtsalt skaleerime pilti, kuid miks seda peita, vähendades selle läbipaistvust 0-ni:
.view-tenth:hover img ( teisendus: skaala(10); läbipaistmatus: 0; ) .view-tenth:hover .mask ( läbipaistmatus: 1; ) .view-tenth:hover h2, .view-tenth:hover p, .view-tenth:hover a.info( teisendus: skaala(1); läbipaistmatus: 1; )

Järeldus

CSS3-l on tõesti suur potentsiaal ilusate efektide loomiseks. Loodetavasti suudame varsti vältida JavaScripti kasutamist lihtsate efektide loomiseks ja tugineda 100% CSS-ile kõigis brauserites.

Loodan, et teile meeldisid need katsed, kuid ennekõike loodan, et need inspireerivad teid oma efekte looma.

P.S. See artikkel on loogiline jätk Mary Lou artiklile

Sildid: lisa sildid

Kõigepealt selgitan lühidalt neile, kes pole veel täielikult ainega sees või pole üldse aines sees, mis on hover-. Need on erinevat tüüpi efektid (hüpikpealkirjad, tööriistaspikrid, sujuvad üleminekud, teisendused, pööramine, suurendamine, nihutamine jne jne), mida rakendatakse hiirekursori abil veebisaidi elementidele. Neid saab rakendada kas erinevate jQuery pistikprogrammide abil või puhtana.
Tänaseks olen koostanud suure valiku originaalseid hõljutusefekte piltidele, mis on loodud CSS3 abil, ilma javascripti teeke ühendamata. Ma ei räägi hõljukefektide rakendamise eelistest ja puudustest puhtas CSS3-s, see on teine teema, vaadake lihtsalt näiteid ja vajadusel kasutage oma veebisaidil seda, mis teile meeldib. Kõik ülevaates esitatud efektid on varustatud demonäite ja lähtekoodidega üksikasjaliku dokumentatsiooniga. Käsiraamatud on valdavalt kodanlikus keeles, kuid kõik on enam-vähem intuitiivne.

Tahaksin kohe juhtida teie tähelepanu asjaolule, et kõik need näited töötavad õigesti ainult kaasaegsetes brauserites, mis toetavad CSS3 atribuute.

Et üldpilti mitte rikkuda, ei moonutanud ma efektide nimetusi masintõlkega (kui mõni välja arvata), jätsin originaalpealkirjad nii, nagu arendaja neid nimetas.

Väga huvitav efekt pisipiltide kohal hõljutamisel, kasutades disainis ja tüpograafias peeneid jooni. Mitu erinevat tüüpi efekte pildiallkirjade, pehmete ja mittepealetükkivate 3D-teisenduste ning pseudoelementide sujuvate üleminekute jaoks. Töötab ainult kaasaegsetes brauserites.

iHover on muljetavaldav puhaste CSS3 hõljumise efektide kogumik Bootstrap 3 toega. See on üles ehitatud Scss CSS-ile (failile), mida saab muutujatega hõlpsasti muuta. Kood on modulaarne, kogu faili pole vaja lisada. 30+ erinevat efekti ühes pakendis. Kõik on päris hästi dokumenteeritud ja efekte on väga lihtne kasutada. Kõik, mida pead tegema, on koostada HTML-märgistus õigesti ja lisada oma töösse CSS-fail.

Loob pilditiitrite jaoks lihtsad, kuid stiilsed hõljumise efektid. Idee on hõljutada kursorit pisipiltide kohal, et kuvada pealkiri, autori nimi ja kontakti nupud. Mõne efekti puhul kasutatakse 3D-visuaalseid teisendusi.

Väga lihtne üleminekuefekt, ilma eriliste kellade ja viledeta, täiesti ümmargune pilt kaadris, muundub hõljumisel fookust muutes ja kõik.

CSS3 pisipiltide jaoks

Arendaja positsioneerib oma töö näitena pildigaleriist, millel on üleminekuefektid, kui pisipiltidele ilmuvad märkused (pealkirjad). Kaasaegsete brauserite, sealhulgas IE 9+, kindel tugi on välja kuulutatud. Muidugi on seda raske täieõiguslikuks galeriiks nimetada, kuid allkirjade ilmumise mõju on üsna huvitav.

Veel üks CSS-reeglite komplekt, mis loob muljetavaldavaid teisendusefekte, kui hõljute kursorit täiuslikult ümarate pisipiltide kohal. Pakett sisaldab 7 tüüpi CSS3 üleminekuid, väga üksikasjalikku dokumentatsiooni seadistamise ja kasutamise kohta. Efekte toetavad kõik kaasaegsed brauserid.

Pöörake pisipilte kursoriga

Ümmarguste pisipiltide pööramise lihtne efekt, kui hõljutate hiirekursorit nende kohal, umbes sama näete minu ajaveebis, avalehe postituste teadaannetes. Realiseeritud paari rea css-koodiga.

Sõna-sõnalt tõlgitud: "Seksuaalne mõju kursorit üle hõljutades". Muidugi ei märka te selles efektis tõenäoliselt midagi nii seksikat, kui teil pole metsikut kujutlusvõimet, kuid efekt on omamoodi huvitav ja väärib tähelepanu.

Viis erinevat efekti piltidele, kui hõljutate kursorit nende kohal. Hüpikallkirjad kolmes variandis, kardinad läbipaistvusastme muutmise ja horisontaalse liikumisega pööramise kujul.

4 Pilditiitrite animatsiooniefektide tüübid, mis on rakendatud ainult CSS3 abil. Erinevad positsioonid ilmumisel ja üleminekuefektid, üsna standardne disain. Animatsiooni toimimise mõistmiseks vaadake demolehe lähtekoodi; ma ei leidnud eraldi dokumentatsiooni.

Miniatuursed galeriid, mis on paigutatud ruudustikusse erinevate efektidega allkirjade ilmumiseks, pööramiseks, arendamiseks, hüpikakendeks jne. Kasutamise ja konfiguratsiooni dokumentatsioon on üsna napp, kuid kui sa tõesti tahad, saate selle välja mõelda.

See efekt pole midagi erilist, piltide heleduse banaalne muutus hõljumisel, välja arvatud see, et lisatud on animatsioonielemente. Peate ise juurutamise üksikasjad välja mõtlema, pannes välja demo lähtekoodi.

Veel 10 hõljutusefekti piltide jaoks, pisipiltide erinevad modifikatsioonid hõljumisel, suurendamine, pööramine, pööramine, tumendamine jne.

Erinevad piltide ümber olevad kaadrianimatsiooniefektid näevad üsna atraktiivsed välja, selle seadistamiseks ja kasutamiseks on olemas üksikasjalik juhend.

Algsed CSS3 hõljutusefektid, mida kasutatakse pisipiltide pealkirjade tõhusaks kuvamiseks, kui kursorit hõljutatakse. CSS-i reeglistik sisaldab 10 erinevat efekti, mida saate erinevate piltide jaoks eraldi kasutada. Efektid on tõeliselt muljetavaldavad, eriti kui arvestada, et see kõik tehti CSS3 abil. Üksikasjalik juhend aitab teil aru saada, mis on mis.

Idee on luua SVG, mis on mõne teksti taustakuju ja muutub kursorit liigutades teiseks kujundiks. Sel viisil saate teha palju erinevaid valikuid, näites on näidatud kolme tüüpi üleminekuefekte. SVG kasutamise eeliseks on see, et saame vormi suurust muuta, et see sobiks emakonteineri suurusega.

Libistavad pildid

Selle efekti põhiolemus seisneb selles, et pilt liigub üles ja alla, et pealkiri ilmuks. Kui töötate stiiliparameetritega, siis arvan, et saate päris kena efekti saavutada, kuid vaikimisi näeb kõik välja väga lihtne.

Selle efektiga on kõik lihtne, piltide pealdised libisevad üleval paremal või all vasakul pool läbipaistva tumeda taustaga lindi kujul, kõik vormindatakse css-i atribuutide abil väga lihtsalt ümber.

Huvitav lahendus: pisipildid esitatakse tumedal kujul, nende kohal hõljutades ilmuvad pildid ja allkiri hüppab heledale taustale.

Pildi pealkiri ilmub nurgast ja laieneb diagonaalselt üle kogu pildi ala.

Veel mõned huvitavad lahendused piltide pisipiltide hüpikpealkirjade rakendamiseks. Veebiredaktoris saate parameetritega katsetada ja saavutada muljetavaldavamaid tulemusi.

Kaunite efektide komplekt pisipiltide kohal hõljutamisel, piltide erinevat tüüpi välimus ja tiitrite kujundus. Peenikesed jooned kontrastselt veidi tumedamaks muutunud taustaga loovad kergesti loetavaid teabeplokke.

Kummalised kujundid ja suurendusefekt koos piltide pisipiltide pealkirjade animeeritud efektiga.

Näide visuaalse slaidiefekti loomisest piltide 3D-tiitrite kuvamiseks, kasutades ainult CSS3 ja HTML5.

6 Piltide pealdised

6 Suvandid hüpikakende piltide pealkirjade kuvamiseks hõljutamisel, kasutades CSS3. Üksikasjalik õppetund rakendamise ja konfigureerimise kohta, allikad on allalaadimiseks saadaval.

Ja lõpuks, lõpuks, ma ei saa mainimata jätta lihtsaimat viisi pisipildi hüpikpealkirja loomiseks CSS3 abil.

Rääkisin sellest meetodist ühes oma eelmises õppetükis:.

Kas soovite alustada veebisaidi loomisega nii kiiresti kui võimalik? Nüüd on see täiesti võimalik! Sel lihtsal põhjusel, et TemplateMonsteri turule on ilmunud uus jaotis koos . Kollektsioon täieneb, kuid juba praegu saate oma veebiprojekti jaoks sobivat otsida. Teil pole vaja teha muud, kui valida oma ideaalne valmislahendus ja töötada vajaliku teabe esitamisega. Ja ärge unustage, et malli tekst on kirjutatud käsitsi.

Kogu lugupidamisega, Andrew

SendPulse teenus on turundustööriist tellimusbaasi loomiseks ja teie veebisaidi juhuslike külastajate muutmiseks tavalisteks külastajateks. SendPulse ühendab ühele platvormile kõige olulisemad funktsioonid klientide meelitamiseks ja hoidmiseks:
● e-posti uudiskirjad,
● veebitõuge,
● SMS-i kirjad,
● SMTP,
● uudiskirjad Viberis,
● sõnumite saatmine Facebook Messengeri.

E-posti teel saadetud uudiskirjad

E-kirjade saatmiseks saate kasutada erinevaid tariife, sealhulgas tasuta. Tasuta paketil on piirangud: liitumisbaas ei ületa 2500.
Esimene asi, millest peate e-posti uudiskirja teenusega töötades alustama, on luua oma aadressiraamat. Määrake pealkiri ja laadige üles e-posti aadresside loend.

Seda on mugav luua SendPulse'is liitumisvormid hüpikakna kujul, sisseehitatud vormid, ujuvad ja fikseeritud ekraani teatud osas. Tellimisvormide abil kogute nullist abonentide baasi või lisate oma baasi uusi aadresse.
Vormikujundajas saate koostada täpselt teie vajadustele kõige paremini vastava tellimisvormi ning teenindusnõuanded aitavad teil selle ülesandega toime tulla. Samuti on võimalik kasutada üht olemasolevatest valmisvormidest.

Tellimisvormide loomisel kasutage kindlasti ettevõtte domeeniga meili. Lugege, kuidas.
Sõnumimallid aitab teil tellijatele saadetud kirjad kaunilt kujundada. Saate luua oma kirjamalli spetsiaalses disaineris.

Automaatsed postitused. Sisuhaldurid kasutavad aktiivselt automaatpostitust. See aitab automatiseerida klientidega töötamise protsessi. Automaili uudiskirja saate luua mitmel viisil.
● Järjestikused tähed. See on lihtsaim variant, kui olenemata tingimustest kirjutatakse mitu kirja, mis saadetakse adressaatidele kindlas järjekorras. Siin võib olla valikuid - sõnumite seeria(lihtne sõnumiahel), eriline kuupäev(kirjad on ajastatud kindlatele kuupäevadele), päästikutäht– kiri saadetakse olenevalt tellija tegevusest (sõnumi avamine jne).
● Automatiseerimine360– teatud filtrite ja tingimustega postitamine, samuti konversioonide arvestamine.
● Valmis ketid malli järgi. Saate luua teatud malli abil tähtede seeria või muuta malli ja kohandada seda vastavalt oma vajadustele.
A/B testimine aitab katsetada erinevaid kirjaseeria saatmise võimalusi ja määrata avamiste või klikkide põhjal parima valiku.

Push-teadete saatmine

Push-postitused on tellimus brauseriaknas, see on omamoodi RSS-i tellimuste asendus. Veebitõuketehnoloogiad on meie ellu kiiresti sisenenud ja juba praegu on raske leida veebisaiti, mis ei kasutaks klientide meelitamiseks ja hoidmiseks push-postitusi. Skripti taotlemine, saate kirju saata käsitsi või luua automaatseid meilisõnumeid, luues kirjade seeria või kogudes andmeid RSS-ist. Teine võimalus tähendab, et pärast uue artikli ilmumist teie veebisaidile saadetakse teie tellijatele automaatselt sellekohane teatis koos lühikese teadaandega.

Uus saidilt SaadaPulss– nüüd saate oma saiti raha teenida, kasutades Push-teatisi, manustades neile reklaame. 10 dollarini jõudmisel tehakse makseid igal esmaspäeval ühte maksesüsteemist – Visa/mastercard, PayPal või Webmoney.
Tõuketeated teenuses on täiesti tasuta. Makse võetakse ainult White Label - meilide eest ilma SendPulse'i teenust mainimata, kuid kui teenuse logo teid ei häiri, saate push-teateid piiranguteta kasutada tasuta.

SMTP

SMTP-funktsioon kaitseb teie e-kirju musta nimekirja kandmise eest, kasutades valgesse nimekirja kantud IP-aadresse. SendPulse'i kirjades kasutatavad krüptoallkirjatehnoloogiad DKIM ja SPF suurendavad usaldust saadetud kirjade vastu, muutes teie kirjade rämpsposti või musta nimekirja sattumise vähem tõenäoliseks.

Facebooki Messengeri robotid

Facebooki vestlusbot on beetatestimisel. Saate selle oma lehega ühendada ja tellijatele sõnumeid saata.

SMS-i saatmine

Teenuse SendPulse kaudu on lihtne saata kirju kasutades telefoninumbrite andmebaasi. Esiteks peate looma aadressiraamatu telefoninumbrite loendiga. Selleks valige jaotis "Aadressiraamat", looge uus aadressiraamat ja laadige üles telefoninumbrid. Nüüd saate selle andmebaasi abil luua SMS-uudiskirja. SMS-sõnumite saatmise hind varieerub sõltuvalt adressaadi sideoperaatoritest ja on keskmiselt 1,26 rubla kuni 2,55 rubla 1 saadetud SMS-i kohta.

sidusprogramm

SendPulse rakendab sidusprogrammi, mille raames teie linki kasutav registreeritud kasutaja, kes on tariifi eest tasunud, toob teile 4000 rubla. Kutsutud kasutaja saab teenuse kasutamise esimese 5 kuu eest allahindlust 4000 rubla.

Postitus sisaldab valikut erinevaid CSS-i efekte ja animatsioone, mis võivad olla teie töös kasulikud ning välistavad ka vajaduse pidevalt JavaScripti kasutada. Näited ei pruugi olla kõige uuemad või ebatavalisemad, kuid minu arvates on need kasulikud.

1. CSS3 kell jQueryga

See kell luuakse ühe peamise CSS3 tööriista abil - JQuery teegi pööramine ja ühendamine.

2. CSS-i analoogkell

Klassikalisemad analoogkellad. Need luuakse veebikomplekti ülemineku ja atribuudi transform CSS abil. Kuid selleks, et aeg vastaks praegusele, on vaja JavaScripti.

3. Pöörlev 3D-kuubik

Pööramine ja liikumine kuubi külgedel toimub tavaliste klahvidega “üles”, “alla”, “vasakule” ja “paremale”. 3D-kujund ise on koostatud kasutades webkit-perspective, -webkit-transform ja -webkit-transition.

4. Mitu sissetõmmatavat 3D-kuubikut

Siin on juba mitu 3D-kuubikut, mis kasutavad CSS3 ja teisendus- ja üleminekuomadusi ise. Kursori hõljutamine kuubi kohal liigub selle küljele, paljastades kujundi teisel poolel oleva teksti.

5. Akordioni menüü

Akordionimenüü efekt põhineb puhtal CSS-il, kus igal real klõpsates avaneb loendi enda kehas täiendav aken. Kohandatud animatsioon WebKiti-põhistes brauserites.

6. Parallaksi kerimine CSS-iga

See on animeeritud parallaksikerimise animatsioon, mis kasutab WebKitil põhinevaid CSS-i üleminekuid. Kui hõljutate kursorit tekstiakna kohal, hakkavad taustal olevad tähed sujuvalt küljele liikuma. Tekib lennuefekt.

7. Maatriks

Kultusfilm “Matrix” on üks parimaid ulmefilme. Näide näitab, kuidas CSS3-s uuesti luua umbes sama hämmastav animatsioon (must ekraan jooksvate numbritega).

8. Dünaamilised palaroidid

See näide annab üksikasjaliku kirjelduse animeeritud fotode loomise kohta CSS3 käskude põhjal. Kui klõpsate pildil, siis see suureneb ja liigub esiplaanile.

9. Pildi skaleerimine

Selles näites suurendatakse pilte lihtsalt hõljutades. Lihtne, kuid mõnikord väga kasulik efekt.

10. JavaScripti mõjud CSS3-le

Alternatiivina JavaScriptile pakub postitus välja seitse CSS3 efekti: erinevad plokid, mis pöörlevad, kaovad, liiguvad välja, kasvavad jne.

11. DJ Hero virtuaalplaadid

See postitus selgitab, kuidas luua pöörlevaid rekordeid. Pöörlemiskiirust saab reguleerida otse ekraanil.

12. Libisev vinüül

Vinüülplaadi libisemise efekt luuakse kasutades CSS3 ja HTML üleminekuid. Selline animatsioon äratab veebilehe ellu, lisab tavalisele albumikaanele originaalsust jne.

13. Efektid pildi kohal hõljutamisel

Kui hoiate kursorit pildi kohal, võib see liikuda küljele, keerleda, kahaneda, teiseneda ruudust ümmarguseks, muutuda uduseks... Ühesõnaga, pildid muudavad oma omadusi igal võimalikul viisil.

14. Pöörlev kolmnurk

Kui klõpsate kolmnurgal, hakkab see pöörlema.

15. Ruum

Terve kosmiline ruum, pakitud CSS-i. See on näide pöörlevatest kihtidest (see on märgatavam, kui brauseris välja suumite).

16. “Las Meninas” 3D-s

Huvitav CSS-efekt, mis muudab Diego Velazquezi kuulsa maali “Las Meninas” kolmemõõtmeliseks.

17. CSS Mac OS X jaoks

Ekraani allservas on peamiste Mac OS X ikoonide komplekt, mis kursorit üle hõljutades suurenevad. Efekt lisab saidile dünaamikat.

18. Drop-In modaalid

CSS3 efektid ja Drop-In Modals omadused aitavad teil luua kiireid, animeeritud ja lihtsaid modaalmuudatusi.

19. Objektide animeerimine

Teisendus muudab elemendi välimust brauseris. Näidatakse raketi näitel, mis "lendab" ekraani ühest otsast teise. Kasutada saab teisaldamise, pööramise jms tööriistu.

20. Värviline kell

Värvikell põhineb jQueryl ja CSS3-l. Sarnane efekt tuleb kasuks mõne konkursi lõppemise, hääletamise jms kontekstis.

21. Valguskasti galerii koos jQuery ja CSS3-ga

See on suurepärane galerii, mis võimaldab teil pilte sorteerida ja järjestada juhuslikus järjekorras. Interaktiivsuseks kasutab galerii JQueryt, JQuery kasutajaliidest ja JQuery FancyBoxi pistikprogrammi. Lightbox toetab piltide pealkirja ja kirjeldust, rühmitab need ja järjestab slaidid automaatselt ritta.

22. “Elastsed” eelvaated

Suurendage kursorit hõljutades piltide eelvaateid. Seega, kui klõpsate, suureneb menüü proportsionaalselt.

23. Dünaamilised kaardid

See näide on dünaamiline kaartide komplekt, mis kasutab HTML-i ja CSS3 funktsioone.

24. JQuery liugmenüü

Näidismenüü luuakse CSS3 ja JQuery kombinatsiooni abil. Kui hõljutate kursorit pildi kohal, kuvatakse tekstiga hüpikaken.

25. CSS-i vahekaardid

Näites muudab hiirekursorit vahekaardi päiste kohal alloleva loendi muutumise.

26. Kalasilma menüü

Näide näitab, kuidas luua kalasilma menüüd, kasutades CSS-i ja SVG-animatsiooni. Lisaboonusena kasutatakse IMG-sildis demo-SVG-d.

27. Rippmenüü

See tüüp pakub tänu CSS3 üleminekutele väga mugavat navigeerimist peamenüüs.

28. Star Warsi tiitrid

Kuulsad tiitrid Tähesõdadest. Nende käitamiseks piisab HTML-ist ja CSS-ist.

29. Rohkem kalasilmaefekte CSS-is

Jällegi ikoonid, mis suurenevad, kui kursorit üle liigutada.

30. Animatsioon kaadri kaupa

Võimalikud on mitmed demonstratsioonivõimalused.
Esimeses näites tuleb kaadrivahetuse tagamiseks klõpsata pildil. Iga klõps on üks liigutus. Kaadreid korratakse, luues teatud silmuse.
Teises näites raamide muutmiseks liigutage kursor lihtsalt pildi kohale. Sellest lähtuvalt sõltub animatsiooni kiirus hiire liikumise kiirusest.