Како приказати и сакрити Див са прелазом у ЦСС-у

У овом приручнику ћемо научити процедуру да прикажемо и сакријемо див са „ прелаз ” својство ЦСС-а.

Како приказати и сакрити Див са прелазом у ЦСС-у?

ЦСС “ прелаз ” својство олакшава промену вредности имовине на основу одређеног периода. Може бити плутајући или активни елемент, у зависности од његовог стања. Штавише, својство транзиције ЦСС-а се користи за приказивање и сакривање дива у ХТМЛ-у.

Сада, пређимо на синтаксу својства транзиције.

Синтакса

Постоје две ствари које морате да наведете када креирате ефекат транзиције:

• Додајте ефекат ЦСС својству.
• Подесите трајање ефекта.

У основи, ' прелаз ” је скраћено својство које се састоји од четири друга својства, која су дата у наставку:

Ево описа наведених некретнина:

• транзицијско својство: Користи се за подешавање преласка на било које ЦСС својство. Као што су ширина, висина, непрозирност и још много тога.
• транзиционо трајање: Користи се за одређивање трајања транзиције.
• прелазна-времена-функција: Користи се за подешавање брзине транзиције.
• кашњење транзиције: Одређује време када прелаз почиње или одлаже.

Узмимо пример у којем ћемо приказати и сакрити див са „ прелаз ” својство ЦСС-а. У ту сврху, прво, креирамо „ див ” и тип уноса “ поље за потврду ”.

Корак 1: Креирајте и стилизујте Див

У оквиру ознаке <центер>, додаћемо ознаку помоћу ознаке <лабел> и додати тип уноса као „ поље за потврду ”. Након тога, направите див и затворите ознаку .

ХТМЛ

У наставку ћемо стилизовати див користећи својство бацкгроунд-цолор и поставити боју позадине као „ ргб(238, 190, 118) ”. Висину дива поставићемо као „ 150пк ” и подесите ивицу око њега као „ 10пк ”, “ гребен ', и ' ргб(6, 56, 2) ”. На крају ћемо одредити величину фонта као „ 50пк ”.

ЦСС

Излаз горе описаног кода је дат у наставку. Овде можете видети да су див и поље за потврду успешно креирани:

Сада пређите на следећи корак у коме ћемо сакрити и приказати див користећи својство транзиције.

Корак 2: Прикажите и сакријте Див са прелазом

Да бисмо то урадили, поставићемо ефекат транзиције подешавањем „ непрозирност “, његово трајање као „ 2с “, а вредност непрозирности као „ 0 ” у див класи коју смо креирали у ЦСС-у:

Белешка: Применићемо прелаз на „ непрозирност ” својство за подешавање транспарентности елемента. Овде ћемо навести његову вредност као „ 0 “, што значи да када транзиција почне, див ће бити сакривен две секунде.

Након подешавања прелазних вредности, користићемо „ улазни ” да бисте приступили типу уноса креираном у ХТМЛ датотеци и поставили псеудо-класу елемента уноса као „ :цхецкед ”. Затим ћемо приступити креираном див и „ + ” оператор ће се користити за повезивање поља за потврду са див. Дакле, када се операција изврши на пољу за потврду, њена употреба ће утицати на див. Затим ћемо поставити вредност непрозирности као „ 1 ”:

Белешка: Вредност непрозирности ћемо навести као „ 1 “, што значи да када је поље за потврду означено, креирани див ће бити приказан. Штавише, уклоните ознаку да бисте сакрили див

Као што видите, див је приказан и сакривен помоћу „ прелаз “ имовина и “ :цхецкед ” елемент псеудо-класе:

Објаснили смо метод за сакривање и приказивање дива са својством прелаза у ЦСС-у.

Закључак

Да бисте приказали и сакрили див, „ прелаз “ имовина и “ :цхецкед ” Елемент псеудо-класе се користи на начин да је вредност див непрозирности постављена као „ 0 “, и у елементу :цхецкед псеудо-класе, подесите непрозирност као „ 1 ”. Када корисник кликне на поље за потврду, див ће бити приказан, а када се поништи, див ће се сакрити. У овом приручнику смо описали метод за сакривање и приказивање див помоћу својства прелаза.