Selles juhendis õpime, kuidas näidata ja peita div koos ' üleminek ” CSS-i vara.
Kuidas kuvada ja peita CSS-is üleminekuga Divi?
CSS' üleminek ” vara abil on lihtne muuta kinnisvara väärtust konkreetse perioodi alusel. See võib olenevalt olekust olla ujuv või aktiivne element. Lisaks kasutatakse CSS-i ülemineku omadust div kuvamiseks ja peitmiseks HTML-is.
Liigume nüüd edasi üleminekuomaduse süntaksi juurde.
Süntaks
Üleminekuefekti loomisel peate määrama kaks asja.
Põhimõtteliselt ' üleminek ” on stenogramm, mis koosneb neljast muust atribuudist, mis on toodud allpool:
üleminek : üleminek-omadus üleminek-kestvusüleminekuaeg-funktsioon üleminekuviivitus
Siin on nimetatud omaduste kirjeldus:
- üleminekuomadus: Seda kasutatakse mis tahes CSS-i atribuudile ülemineku määramiseks. Nagu laius, kõrgus, läbipaistmatus ja palju muud.
- ülemineku kestus: Seda kasutatakse ülemineku kestuse määramiseks.
- ülemineku-ajastamise funktsioon: Seda kasutatakse ülemineku kiiruse määramiseks.
- ülemineku viivitus: See määrab aja, millal üleminek algab või viivitub.
Võtame näite, milles näitame ja peidame div koos ' üleminek ” CSS-i vara. Selleks loome kõigepealt div ' ja sisendi tüüp ' märkeruut ”.
1. toiming: jaotise loomine ja stiil
Märgendis
HTML
>
Edaspidi kujundame div stiili atribuudi taustavärv abil ja määrame tausta värviks ' rgb(238, 190, 118) ”. Määrame lahtri kõrguseks ' 150 pikslit ja kohandage selle ümber olevat äärist kui ' 10 pikslit ”, „ hari ”, ja „ rgb(6, 56, 2) ”. Lõpuks määrame fondi suuruse kui ' 50 pikslit ”.
CSS
div {taustavärv : rgb ( 238 , 190 , 118 ) ;
kõrgus : 150 pikslit ;
piir : 10 pikslit hari rgb ( 6 , 56 , kaks ) ;
fondi suurus : 50 pikslit ;
}
Ülalkirjeldatud koodi väljund on toodud allpool. Siin näete, et div ja märkeruut on edukalt loodud:
Nüüd liikuge järgmise sammu juurde, kus me peidame ja näitame div, kasutades üleminekuomadust.
2. samm: kuvage ja peidake üleminekuga Div
Selleks määrame üleminekuefekti, määrates ' läbipaistmatus ', selle kestus on ' 2s ' ja läbipaistmatuse väärtus kui ' 0 ” CSS-is loodud div klassis:
üleminek : läbipaistmatus 2s ;läbipaistmatus : 0 ;
Märge: Rakendame üleminekut ' läbipaistmatus ” atribuut elemendi läbipaistvuse määramiseks. Siin täpsustame selle väärtuse kui ' 0 ”, mis tähendab, et kui üleminek algab, peidetakse div kaheks sekundiks.
Pärast üleminekuväärtuste määramist kasutame ' sisend ', et pääseda juurde HTML-failis loodud sisestustüübile ja määrata sisendelemendi pseudoklassiks ' :kontrollitud ”. Seejärel pääseme juurde loodud div-le ja „ + ” operaatorit kasutatakse märkeruudu seostamiseks lahtriga div. Seega, kui märkeruuduga tehakse toiming, mõjutab selle kasutamine div. Järgmisena määrame läbipaistmatuse väärtuseks ' 1 ”:
sisend : kontrollitud + div {läbipaistmatus : 1
}
Märge: Me määrame läbipaistmatuse väärtuse kui ' 1 ”, mis tähendab, et kui märkeruut on märgitud, kuvatakse loodud div. Lisaks tühjendage selle märgistus, et varjata div
Nagu näete, näidatakse ja peidetakse div, kasutades ' üleminek ' vara ja ' :kontrollitud ” pseudoklassi element:
Oleme selgitanud üleminekuatribuudiga div peitmise ja kuvamise meetodit CSS-is.
Järeldus
Divi kuvamiseks ja peitmiseks üleminek ' vara ja ' :kontrollitud ” pseudoklassi elementi kasutatakse nii, et div läbipaistmatuse väärtuseks määratakse “ 0 ”, ja :checked pseudoklassi elemendis määrake läbipaistmatus väärtuseks ' 1 ”. Kui kasutaja klõpsab märkeruudul, kuvatakse div ja kui see on märkimata, siis div peidetakse. Selles juhendis oleme kirjeldanud meetodit div peitmiseks ja kuvamiseks ülemineku atribuudi abil.