Šiame vadove sužinosime, kaip rodyti ir paslėpti div su ' perėjimas “ CSS nuosavybė.
Kaip parodyti ir paslėpti dalinį su perėjimu CSS?
CSS“ perėjimas “ nuosavybė leidžia lengvai pakeisti turto vertę pagal konkretų laikotarpį. Tai gali būti plūduriuojantis arba aktyvus elementas, priklausomai nuo jo būsenos. Be to, CSS perėjimo savybė naudojama norint parodyti ir paslėpti div HTML.
Dabar pereikime prie perėjimo savybės sintaksės.
Sintaksė
Kurdami perėjimo efektą turite nurodyti du dalykus:
Iš esmės, ' perėjimas “ yra sutrumpinta savybė, susidedanti iš keturių kitų savybių, kurios pateiktos toliau:
perėjimas : pereinamoji savybė pereinamoji trukmėpereinamumas-laikas-funkcija pereinamasis delsimas
Štai minėtų savybių aprašymas:
- pereinamoji savybė: Jis naudojamas norint nustatyti perėjimą prie bet kurios CSS nuosavybės. Tokie kaip plotis, aukštis, neskaidrumas ir daugelis kitų.
- Perėjimo trukmė: Jis naudojamas norint nurodyti perėjimo trukmę.
- perėjimo laiko funkcija: Jis naudojamas norint nustatyti perėjimo greitį.
- perėjimo delsa: Jis nurodo laiką, kada perėjimas prasideda arba vėluoja.
Paimkime pavyzdį, kuriame rodysime ir paslėpsime div su ' perėjimas “ CSS nuosavybė. Šiuo tikslu pirmiausia sukuriame „ div “ ir įvesties tipas „ žymimasis langelis “.
1 veiksmas: sukurkite ir stilizuokite skyrių
Prie
HTML
>
Toliau mes sukursime div stilių naudodami fono spalvos ypatybę ir nustatysime fono spalvą kaip „ rgb(238, 190, 118) “. „Div“ aukštį nustatysime kaip „ 150 piks “ ir pakoreguokite kraštinę aplink jį kaip „ 10 piks “, „ ketera “ ir „ rgb(6, 56, 2) “. Pabaigoje nurodysime šrifto dydį kaip ' 50 piks “.
CSS
div {fono spalva : rgb ( 238 , 190 , 118 ) ;
aukščio : 150 piks ;
siena : 10 piks ketera rgb ( 6 , 56 , du ) ;
šrifto dydis : 50 piks ;
}
Aukščiau aprašyto kodo išvestis pateikta žemiau. Čia galite pamatyti, kad div ir žymimasis laukelis sėkmingai sukurti:
Dabar pereikite prie kito veiksmo, kuriame paslepiame ir parodome div naudodami perėjimo ypatybę.
2 veiksmas: rodykite ir paslėpkite skyrelį su perėjimu
Norėdami tai padaryti, nustatysime perėjimo efektą nustatydami „ neskaidrumas “, jo trukmė kaip „ 2s “, o neskaidrumo vertė kaip „ 0 “ Div klasėje, kurią sukūrėme CSS:
perėjimas : neskaidrumas 2s ;neskaidrumas : 0 ;
Pastaba: Taikysime perėjimą „ neskaidrumas “ ypatybę elemento skaidrumui nustatyti. Čia nurodysime jo reikšmę kaip „ 0 “, o tai reiškia, kad prasidėjus perėjimui div bus paslėptas dvi sekundes.
Nustatę perėjimo reikšmes, naudosime „ įvestis “ norėdami pasiekti HTML faile sukurtą įvesties tipą ir nustatyti įvesties elemento pseudoklasę kaip „ : patikrinta “. Tada pasieksime sukurtą div ir „ + “ operatorius bus naudojamas žymimajam laukeliui susieti su div. Taigi, kai atliekama operacija su žymimuoju laukeliu, jos naudojimas turės įtakos div. Tada mes nustatysime neskaidrumo reikšmę kaip ' 1 “:
įvestis : patikrinta + div {neskaidrumas : 1
}
Pastaba: Nepermatomumo reikšmę nurodysime kaip „ 1 “, o tai reiškia, kad pažymėjus žymimąjį laukelį, bus rodomas sukurtas div. Be to, panaikinkite žymėjimą, kad paslėptumėte div
Kaip matote, div rodomas ir paslėptas naudojant ' perėjimas “ nuosavybė ir “ : patikrinta “ pseudoklasės elementas:
Mes paaiškinome, kaip paslėpti ir rodyti div su pereinamąja savybe CSS.
Išvada
Norėdami parodyti ir paslėpti div, „ perėjimas “ nuosavybė ir “ : patikrinta ' pseudo klasės elementas naudojamas taip, kad div neskaidrumo reikšmė būtų nustatyta kaip ' 0 “, o elemente „:checked pseudo-class“ nustatykite neskaidrumą kaip „ 1 “. Kai vartotojas spusteli žymimąjį laukelį, bus rodomas div, o kai jis bus nepažymėtas, div pasislėps. Šiame vadove aprašėme metodą, kaip paslėpti ir rodyti div naudojant perėjimo ypatybę.