В това ръководство ще научим процедурата за показване и скриване на div с „ преход ” собственост на CSS.
Как да покажа и скрия Div с преход в CSS?
CSS “ преход ” улеснява промяната на стойността на имота въз основа на определен период. Може да бъде плаващ или активен елемент, в зависимост от състоянието му. Освен това свойството за преход на CSS се използва за показване и скриване на div в HTML.
Сега нека да преминем към синтаксиса на свойството за преход.
Синтаксис
Има две неща, които трябва да посочите, когато създавате ефект на преход:
По принцип „ преход ” е съкратено свойство, състоящо се от четири други свойства, които са дадени по-долу:
преход : преход-имот преход-продължителностпреход-тайминг-функция преход-закъснение
Ето описанието на споменатите имоти:
- преходно свойство: Използва се за задаване на преход към всяко CSS свойство. Като ширина, височина, непрозрачност и много други.
- продължителност на прехода: Използва се за определяне на продължителността на прехода.
- функция за преходно време: Използва се за задаване на скоростта на прехода.
- забавяне на прехода: Той определя времето, когато преходът започва или се забавя.
Нека вземем пример, в който ще покажем и скрием div с „ преход ” собственост на CSS. За тази цел първо създаваме „ див ' и тип на въвеждане ' отметка ”.
Стъпка 1: Създайте и стилизирайте Div
В рамките на тага
HTML
<център ><етикет > Покажете етикета Div > <тип на въвеждане = 'кутия за отметка' >
>
След това ще стилизираме div, като използваме свойството background-color и ще зададем цвета на фона като „ rgb(238, 190, 118) ”. Ще зададем височината на div като „ 150 пиксела “ и коригирайте границата около него като „ 10px ”, “ хребет ', и ' rgb(6, 56, 2) ”. В крайна сметка ще посочим размера на шрифта като „ 50px ”.
CSS
див {Цвят на фона : rgb ( 238 , 190 , 118 ) ;
височина : 150 пиксела ;
граница : 10px хребет rgb ( 6 , 56 , две ) ;
размер на шрифта : 50px ;
}
Резултатът от гореописания код е даден по-долу. Тук можете да видите, че div и квадратчето за отметка са създадени успешно:
Сега преминете към следващата стъпка, в която скриваме и показваме div, използвайки свойството за преход.
Стъпка 2: Показване и скриване на Div с преход
За да направим това, ще зададем ефекта на прехода, като зададем „ непрозрачност “, неговата продължителност като „ 2s “, а стойността на непрозрачността като „ 0 ” в класа div, който създадохме в CSS:
преход : непрозрачност 2s ;непрозрачност : 0 ;
Забележка: Ще приложим прехода на „ непрозрачност ”, за да зададете прозрачността на елемента. Тук ще посочим неговата стойност като „ 0 ”, което означава, че когато преходът започне, div ще бъде скрит за две секунди.
След като зададем стойностите на прехода, ще използваме „ вход ”, за да получите достъп до въведения тип, създаден в HTML файла, и да зададете псевдокласа на входния елемент като „ :проверено ”. След това ще получим достъп до създадения div и „ + ” операторът ще се използва за свързване на квадратчето за отметка с div. По този начин, когато се извърши операция върху квадратчето за отметка, използването му ще засегне div. След това ще зададем стойността на непрозрачност като „ 1 ”:
вход : проверено + див {непрозрачност : 1
}
Забележка: Ще посочим стойността на непрозрачността като „ 1 ”, което означава, че когато квадратчето е маркирано, ще се покаже създаденият div. Освен това премахнете отметката, за да скриете div
Както можете да видите, div се показва и скрива с помощта на „ преход „имот и“ :проверено ” псевдокласов елемент:
Обяснихме метода за скриване и показване на div със свойството за преход в CSS.
Заключение
За да покажете и скриете div, „ преход „имот и“ :проверено ” елемент на псевдоклас се използва по такъв начин, че стойността на непрозрачността на div е зададена като „ 0 “, а в :checked псевдокласов елемент задайте непрозрачност като „ 1 ”. Когато потребителят щракне върху квадратчето за отметка, div ще се покаже, а когато стане без отметка, div ще се скрие. В това ръководство сме описали метода за скриване и показване на div с помощта на свойството за преход.