Sukurkite tik CSS vaizdą, atskleidžiantį efektą su skaidriomis sienomis
A Tik CSS vaizdas atskleidžia poveikį galima išspręsti įvairiais būdais. Tai tikrai gana paprasta koduoti dizainą, kuriame vaizdas išsiskiria (yra perpildytas) jos tvirtas fonas -tu tik įdėkite vaizdą virš mažesnio elemento, turinčio tvirtą foną.
Tą patį rezultatą galite gauti, jei naudojate skaidrias sienas, kur jūs laikote fono elemento dydis kaip ir naujų žinių, ir pridėti skaidrių sienų sukurti tuščią erdvę kad įgytos žinios perpildytų.
Yra kai kurie pastarojo metodo privalumai. Kadangi tai yra skaidrios sienos, kurios suteikia zonos, kur įgytos žinios gali perpildyti, įmanome kontroliuoti perpildymo kryptį tarp kairės, dešinės, viršutinės ir apatinės sienos. Be to, turint tokį patį dydį tiek priešakyje, tiek fone palengvina abiejų elementų judėjimą vienu metu per puslapį.
Trumpai tariant, mes pamatysime, kaip sukurti tik CSS vaizdą, atskleidžiantį efektą naudojant a mažesnis kietas fonas su vaizdą, turintį skaidrių sienų. Galite patikrinti galutinis demo žemiau.
1. Sukurkite pradinį kodą
HTML, tik vienas CSS naudojame du CSS kintamieji, Taip pat pridedame Mes pridėkite tuščią The Pridedame vaizdą prie The Ant žemiau esančiame paveikslėlyje galite pamatyti, ką mes iki šiol turime ( Jei norite pridėti mažesnis (išlenktas) fonas už vaizdo, mes naudosime kitą pseudo elementą, Kuriame kitą CSS kintamąjį, The plotis apskaičiuojamas kaip The aukštis apskaičiuojamas kaip Su CSS filtras Čia yra demo ekrano kopija iki šiol (su. \ t Mes pridėkite Kaip mes jau pridėjo Žemiau galite matyti galutinis demo. Jei rodote
--bgc ir --tamsus už fono spalva ir matmenys iš .foo konteinerį. Pavyzdyje naudoju ta pati vertė sukurti plotį ir aukštį, kad gautumėte kvadrato formos langelį atskiri kintamieji aukštį ir plotį, jei norite stačiakampio.pozicija: santykinis taisyklė .foo, kad jos pseudo elementai, kuriuos mes naudosime atskleisti vaizdą, gali būti visiškai išdėstyta (žr. toliau) ir taip sukrauti vienas ant kito. .foo --bgc: # FFCC03; - Dim: 300px; plotis: var (- dim); aukštis: var (- dim); fono spalva: var (- bgc); pozicija: santykinis;
turinys nuosavybė abiem pseudo elementams, .foo :: prieš ir .foo :: po, juos gauti tinkamai. .foo :: before, .foo :: po content: "; pozicija: absoliutus; kairėje: 0; top: 0;
.foo elementas, jo du pseudo elementai, .foo :: prieš, .foo :: po, ir jų : Pakimba pseudo klasės gauti perėjimas nuosavybė tai bus pridėkite lengvą perėjimą jiems 500 milisekundžių (pusę sekundės). .foo, .foo: hover, .foo :: prieš, .foo :: after, .foo: hover :: prieš, .foo: hover :: po perėjimas: transformuoti 500ms lengvumą;
2. Pridėti vaizdą
.foo :: prieš pseudo elementas kaip fono paveikslėlį, ir dydžio, kad apimtų visą pseudo elementą su plotis ir aukštis savybės. Mes sukrauti jį tiesiai po .foo elementas naudojant z-indeksas: -1 taisyklė. .foo :: prieš plotis: 100%; aukštis: 100%; fonas: url (camel.png) centras / viršelis; z-indeksas: -1;
centras raktinis žodis centruoja vaizdą, kol padengti raktinis žodis matuoja vaizdą padengti visą elementą išlaikant jo proporciją. z-indeksas pašalinamas iš .foo :: prieš taip, kad jis būtų matomas):
3. Pridėkite išskleidžiamąjį foną
.foo :: po.--b, už sienos plotis. Mes duodame trys skaidrios sienos į :: po pseudo elementas: viršuje, dešinėje ir apačioje. .foo :: po - b: 20px; plotis: calc (100% - var (- b)); aukštis: calc (100% - apskaičiuotas (var (- b) * 2)); siena: var (- b) kieta skaidri; sienos kairėje: nėra; dėžutės šešėlis: įterpimas 0 var (- dim) 0 var (- bgc); filtras: ryškumas (.8); z-indeksas: -2;
Calc (100% - var - b)) kad grįžta bendrasis plotis .foo atėmus bendrą jo horizontalių sienų plotį (tik dešinysis kraštas, nes nėra kairiojo krašto).Calc (100% - apskaičiuota (var (- b) * 2)) kad grįžta bendras aukštis .foo atėmus bendrą vertikalių sienų plotį (viršutinė ir apatinė sienos).langelis-šešėlis nuosavybė, mes taip pat pridėti horizontalų įdėklo šešėlį tokio pat dydžio kaip .foo (kuris yra var (- dim)).ryškumas (.8) tamsina fono spalvą šiek tiek ir galiausiai z-indeksas: -2 taisyklė vietos :: po pseudo elementas :: prieš kuriame yra vaizdas.z-indeksas iš abiejų pseudo elementų, kad jie būtų matomi):
4. Pridėti transformaciją
transformuoti nuosavybė prie dviejų pseudo elementų, taigi, kai vartotojas persijungia .foo, abu pseudo elementai yra horizontaliai.perėjimas nuosavybė visiems elementams 1 žingsnio pabaigoje yra vaizdo ir jo fono judėjimas tiek animuoti. .foo: hover :: prieš, .foo: hover :: po transform: translateX (100%);
Premija: neprivaloma marža
.foo šalia kitų elementų puslapyje ir norite, kad šie kiti elementai būtų pasitrauk tada, kai atvaizdas ir jo fonas išsiskleidžia pridėti teisingą paraštę, kurios plotis yra toks pat kaip ir .foo į .foo: pakimba elementas. .foo: hover margin-right: var (- dim);
