Izveidojiet tikai CSS attēlu, kas atklāj efektu ar caurspīdīgām robežām
A Tikai CSS attēlā redzams efekts var atrisināt dažādos veidos. Tas tiešām ir diezgan viegli kodēt dizainu, kurā attēls izceļas (ir pārpildīts) tā cietā fona -Jūs vienkārši ievietojiet attēlu pār mazāku elementu ar stabilu fonu.
Jūs varat iegūt tādu pašu rezultātu, ja lietojat pārredzamas robežas, kur jūs turat fona elementa lielums ir vienāds kā priekšplāna un pievieno pārredzamas robežas, lai izveidot tukšu vietu lai jaunās zināšanas pārplūst.
Tur ir dažas priekšrocības, izmantojot pēdējo metodi. Tā kā tas ir caurspīdīgās robežas, kas nodrošina zonu, kurā jaunās zināšanas pārplūst, mēs varam kontrolēt pārplūdes virzienu starp kreiso, labo, augšējo un apakšējo robežu. Arī tam ir tāds pats izmērs gan priekšplānā, gan fonā atvieglo abu elementu pārvietošanu vienlaicīgi visā lapā.
Īsumā, mēs redzēsim, kā radīt tikai CSS attēlu, kas atklāj efektu izmantojot a mazāks ciets fons ar priekšplāna attēlu, kam ir pārredzamas robežas. Jūs varat pārbaudīt galīgā demonstrācija zemāk.
1. Izveidojiet sākotnējo kodu
HTML, tikai viens CSS izmantojam divi CSS mainīgie, Mēs arī pievienojam Mēs pievienojiet tukšu The Mēs pievienojam attēlu The Uz zemāk esošais ekrānuzņēmums jūs varat redzēt, ko mēs esam līdz šim ( Lai pievienotu mazāks (izbīdāms) fons aiz attēla, mēs izmantosim citu pseidoelementu, Mēs izveidojam citu CSS mainīgo, The platums tiek aprēķināts kā The augstums tiek aprēķināts kā Ar CSS filtrs Šeit ir demo ekrānuzņēmums līdz šim sniegts Mēs pievienojiet Kā mēs jau ir pievienojis Zemāk jūs varat redzēt galīgā demonstrācija. Ja tiek parādīts
--bgc un --blāvi priekš fona krāsa un izmēriem no .foo konteiners. Piemērā es izmantoju tāda pati vērtība lai izveidotu kvadrātveida kastes platumu un augstumu, izveidojiet atsevišķi mainīgie augstumam un platumam, ja vēlaties taisnstūri.pozīcija: relatīvais noteikums .foo, tā, lai tās pseidoelementi, ko mēs izmantosim atklāt attēlu, var būt absolūti novietots (skatīt zemāk) un tādējādi sakrauj viens otru. .foo --bgc: # FFCC03; - dim: 300px; platums: var (- dim); augstums: var (- dim); fona krāsa: var (- bgc); pozīcija: relatīvais;
saturu īpašums abiem pseidoelementiem, .foo :: pirms un .foo :: pēc, lai tos pareizi padarītu. .foo :: pirms, .foo :: pēc content: "; pozīcija: absolūta; pa kreisi: 0; top: 0;
.foo elementu, tā divi pseidoelementi, .foo :: pirms, .foo :: pēc, un viņu : lidināties pseido klases dabūt pāreju īpašums tas būs pievienojiet vieglumu pārejai tiem 500 milisekundes (puse sekundes). .foo, .foo: hover, .foo :: pirms, .foo :: after, .foo: hover :: pirms, .foo: hover :: pēc pāreja: pārveidot 500ms vieglumu;
2. Pievienojiet attēlu
.foo :: pirms pseidoelements kā fona attēlu, un izmēru, lai aptvertu visu pseidoelementu Ar platums un augstums īpašības. Mēs kaudze to pa labi zem .foo elementu izmantojot z-indekss: -1 noteikums. .foo :: pirms platums: 100%; augstums: 100%; fons: url (camel.png) centrs / vāks; z-indekss: -1;
centrs atslēgvārdu centrē attēlu, kamēr piesegt atslēgvārds skala attēlu uz aptver visu elementu saglabājot tā proporciju. z-indekss tiek noņemts .foo :: pirms tā, lai to varētu redzēt):
3. Pievienojiet slīdošo fonu
.foo :: pēc.--b, priekš robežu platums. Mēs dodam trīs pārredzamas robežas uz :: pēc pseidoelements: augšā, pa labi un apakšā. .foo :: pēc - b: 20px; platums: calc (100% - var (- b)); augstums: calc (100% - aprēķināts (var (- b) * 2)); robeža: var (- b) cieta caurspīdīga; robežu pa kreisi: nav; box-shadow: ieliktnis 0 var (- dim) 0 var (- bgc); filtrs: spilgtums (.8); z-indekss: -2;
calc (100% - var - b)) kas atgriežas kopējais platums .foo mīnus tās horizontālo robežu kopējais platums (tikai labā robeža, jo nav kreisās malas).calc (100% - aprēķināts (var (- b) * 2)) kas atgriežas kopējais augstums .foo mīnus vertikālo robežu kopējais platums (augšējā un apakšējā robeža).kastes ēna īpašums, mēs arī pievienojiet horizontālu ieliktņa ēnu izmērs ir tāds pats kā .foo (kurš ir var (- dim)).spilgtums (.8) tumšāka fona krāsa mazliet, un visbeidzot, z-indekss: -2 noteikums novieto :: pēc zem pseidoelementa :: pirms kas satur attēlu.z-indekss no abiem pseidoelementiem, lai tos varētu redzēt):
4. Pievienojiet transformāciju
pārveidot īpašums abiem pseidoelementiem, tāpēc, kad lietotājs pārspēj .foo, abi pseidoelementi ir pārvietots horizontāli.pāreju visiem elementiem 1. posma beigās attēla un tā fona kustība abi ir animēti. .foo: hover :: pirms, .foo: hover :: pēc transform: translateX (100%);
Bonuss: pēc izvēles
.foo blakus citiem elementiem lapā un vēlas, lai šie citi elementi būtu pāriet prom tad, kad attēls un tā fons izplūst pievienojiet tādu pašu platumu kā. \ t .foo uz .foo: lidināties elementu. .foo: hover margin-right: var (- dim);
