Horizontali juosta su užvedimo efektu html5, css3 ir įkrovos juostoje

Ko mums reikia?

Vietinis serveris (jau sakiau, kad naudoju „Xampp“)
·
A kodo redaktorius (naudokite didingą 3 tekstą)

1 žingsnis

Pradėsiu eidamas į savo vietinio serverio katalogą ir sukūręs naują aplanką šiam projektui išsaugoti, pavadinsiu jį „menu_hover“ ir pridėsiu kitą, kad būtų css failai.

DIDELIS

DIDELIS

2 žingsnis

Dabar savo kodų redaktoriuje pradėsime pridėdami naują html5 struktūrą, prie kurios pridėsiu įkrovos stilių atitinkančius stiliaus lapus iš jų CDN adresų, kad neužimčiau vietos mūsų serveryje, taip pat pridėsiu stiliaus lapą, vadinamą „style“ .css ", kuris bus saugomas anksčiau sukurtame aplanke„ css "…
Vėliau šį failą išsaugosime kaip „menu.html“ aplanke „menu_hover“, sukurtame atlikus 1 veiksmą.

DIDELIS

3 žingsnis

Dabar mes pridėsime etiketę prie „menu.html“ ir nustatysime, kaip ji bus rodoma ekrane, nustatydami jo ypatybes faile style.css …

DIDELIS

DIDELIS

Kaip matysite css, aš pridėjau „fono spalvą: žalią“, tai tik orientacinis, kad pamatytumėte antraštės dydį ir padėtį ekrane, galite žaisti su dydžiais, šriftu ir kitais pagal savo nuostatos … taip, dabar matome tai savo naršyklėje, turėtume kažką panašaus …

DIDELIS

4 žingsnis

Noriu, kad mano meniu sudarytų 4 nuorodos, kad tai pasiekčiau etiketėje, pridėsiu 4Naudodamas klasę „box_menu“, norėdamas juos identifikuoti, prie kiekvieno pridėsiu didėjantį ID nuo „vieno“ iki „keturių“.

DIDELIS

5 žingsnis

Savo faile style.css pridėsime „box_menu“ klasės ir „vieno, dviejų, trijų ir keturių“ sluoksnių ypatybes.

6 žingsnis

Mes pradėsime apibrėžti „box_menu“ klasės elgesį nustatydami santykinę padėtį, atminkite, kad šiuo atveju turėsime 4 nuorodas ir kad sluoksnis, kuriame yra jos, tai yra, užima 80% ekrano, todėl mes reikia, kad jie būtų 4 elementai, turintys „box_menu“ klasę, užimantys 100% joje esančios vietos, tam mes paimsime 100% ir padalinsime iš norimų įdėti nuorodų ar elementų skaičiaus, nes šiuo atveju yra 4 tai būtų 100/4 = 25, nes mūsų klasės „box_menu“ plotis turėtų būti 25%. Mes taip pat 100% sustosime ir liepsime plaukti į kairę, kad elementai būtų matomi vienas šalia kito.

DIDELIS

7 žingsnis

Vėliau mes apibrėšime fono spalvą, su kuria rodysime kiekvieną iš elementų, 4 veiksme pridėsime ID nuo vieno iki keturių, dabar mūsų css nustatysime, kaip atrodys kiekvienas iš šių sluoksnių. tam mes darysime taip …

DIDELIS

Tai suteiks mums tokį rezultatą:

DIDELIS

Kaip matote, mes jau atribojome kiekvieno elemento tarpus ir jo fono spalvą, galite naudoti spalvų kodus pagal savo skonį, šiuo atveju tai nėra svetainė su konkrečia tema, o bandymas, kurį naudojau kaip demonstracija …

8 žingsnis

Grįžkime prie dokumento „menu.html“, kurį palikome atlikdami 4 veiksmą, dabar pridėsime piktogramas ir tekstą, kurį turės mūsų meniu. Tam mes nenaudosime vaizdų, bet ketiname šiek tiek padėti sau paleisti įkrovos sistemą ir naudosime piktogramas iš „Font Awesome“ paketo, todėl einame į naršyklę ir pasiekiame žiniatinklį https: // fortawesome… .o / Font-Awesome / spustelėkite „Pradėti “Meniu ir eikite į„ Lengviausias: „MaxCDN“ skiltis „BootstrapCDN“.

DIDELIS

Nukopijuosiu CDN nuorodą į „Font Awesome“ stiliaus lapą ir įklijuosiu į dokumento „menu.html“ antraštę

DIDELIS

Dabar mes galime naudoti „Font Awesome“ piktogramas savo dizainui, tačiau dabar turime pasirinkti, kurias piktogramas ketiname talpinti, todėl grįžtame į jų svetainę ir randame meniu „Piktogramos“.

DIDELIS

Išsamiame sąraše ieškome mus dominančios piktogramos ir ją spustelime.

DIDELIS

Kai spustelėsime, būsime nukreipti į kitą langą, kuriame matysime kodą, kaip įterpti šią piktogramą į mūsų dizainą.

DIDELIS

Mes tiesiog nukopijuojame jį ir einame į „menu.html“ ir įklijuojame įtaip …

DIDELIS

DIDELIS

Po juo taip pat pridėsime pavadinimą, kuris yra centre …

DIDELIS

Patikrinkime, kaip tai atrodo mūsų naršyklėje …

DIDELIS

Matome, kad jau pridėjome piktogramą ir centre esantį tekstą, todėl kartojame šį veiksmą likusiems 3 elementams.

DIDELIS

9 veiksmas

Piktogramos yra gana mažos, padidinsiu jų dydį 3 kartus, tam pridėsiu klasę „fa-3x“.

DIDELIS

DIDELIS

10 žingsnis

Dabar šiek tiek pakeisiu css failą, kad užbaigčiau efektą, pradėsiu modifikuodamas klasę „box_menu“, suderindamas tekstą su centru ir suteikdamas jam ekraną = „block“;

DIDELIS

11 žingsnis

Vėliau parašysiu klasę, skirtą kontroliuoti piktogramų išvaizdą, kurioje apibrėžsiu, kad jos rodomos baltos spalvos, aplink jas yra suapvalintas kraštas ir kad yra pereinamoji animacija …

DIDELIS

12 žingsnis

Kalbant apie tekstus etiketėje

Aš įdėsiu juos į baltą spalvą ir šiek tiek sumažinsiu neskaidrumą, pridėdamas šiek tiek žemesnio animacijos efekto.

DIDELIS

13 žingsnis

Dabar aš apibrėžsiu, kaip elgsis mūsų elementai, kai užvesime pelės žymeklį ant jo, ir pridėsiu šiek tiek animacijos, kad sušvelnintų efektą.

DIDELIS

Kai tai bus padaryta, galime pasakyti, kad baigėme kurti efektą, o dabar tiesiog reikia pridėti nuorodas taip, kaip norite, komentuoju, kad šis efektas taip pat gali būti naudojamas po vaizdais, kuriuose yra aprašomasis tekstas, pvz. Pavyzdžiui, profesionalus portfelis, galerija ar produktų katalogas - viskas paliekama jūsų vaizduotei …
Pabaigoje Paliksiu jums .zip su šaltinio koduJei jums patiko ši pamoka, palikite savo komentarą, jei kažkas buvo neaišku, paklauskite manęs, jei norėtumėte pamokos konkrečia tema, praneškite man …
Tikiuosi, kad tai jums bus naudinga, linkėdami…

Failas su šaltinio kodu … Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką