В этом руководстве мы изучим процедуру отображения и скрытия div с помощью « переход ” свойство CSS.
Как показать и скрыть Div с переходом в CSS?
CSS « переход ” упрощает изменение значения свойства в зависимости от определенного периода. Это может быть плавающий или активный элемент, в зависимости от его состояния. Кроме того, свойство перехода CSS используется для отображения и скрытия div в HTML.
Теперь давайте перейдем к синтаксису свойства перехода.
Синтаксис
При создании эффекта перехода необходимо указать две вещи:
В принципе, ' переход ” — это сокращенное свойство, состоящее из четырех других свойств, которые приведены ниже:
переход : свойство перехода длительность переходапереход-время-функция переход-задержка
Вот описание упомянутых свойств:
- свойство перехода: Он используется для установки перехода к любому свойству CSS. Такие как ширина, высота, непрозрачность и многое другое.
- Продолжительность перехода: Он используется для указания продолжительности перехода.
- функция времени перехода: Используется для установки скорости перехода.
- задержка перехода: Он определяет время, когда переход начинается или задерживается.
Давайте возьмем пример, в котором мы покажем и скроем div с помощью « переход ” свойство CSS. Для этого сначала создадим « див ' и тип ввода ' флажок ».
Шаг 1: Создайте и стилизуйте Div
Внутри тега
HTML
<центр ><метка > Показать метку Div > <тип ввода знак равно 'флажок' >
<дел > Скрытый раздел >
>
В дальнейшем мы будем стилизовать div, используя свойство background-color, и установим цвет фона как « RGB(238, 190, 118) ». Мы установим высоту div как « 150 пикселей » и отрегулируйте границу вокруг него как « 10 пикселей », « хребет ', а также ' RGB(6, 56, 2) ». В конце мы укажем размер шрифта как « 50 пикселей ».
CSS
див {фоновый цвет : RGB ( 238 , 190 , 118 ) ;
высота : 150 пикселей ;
граница : 10 пикселей хребет RGB ( 6 , 56 , два ) ;
размер шрифта : 50 пикселей ;
}
Вывод вышеописанного кода приведен ниже. Здесь вы можете видеть, что div и флажок успешно созданы:
Теперь перейдите к следующему шагу, в котором мы скроем и покажем div, используя свойство перехода.
Шаг 2: Показать и скрыть Div с переходом
Для этого мы установим эффект перехода, установив « непрозрачность », его продолжительность как « 2 с ', а значение непрозрачности как ' 0 ” в классе div, который мы создали в CSS:
переход : непрозрачность 2 с ;непрозрачность : 0 ;
Примечание: Применим переход на « непрозрачность », чтобы установить прозрачность элемента. Здесь мы укажем его значение как « 0 ”, что означает, что при запуске перехода div будет скрыт на две секунды.
После установки значений перехода мы будем использовать « вход », чтобы получить доступ к типу ввода, созданному в файле HTML, и установить псевдокласс элемента ввода как « : проверено ». Затем мы получим доступ к созданному div и « + ” будет использоваться для связывания флажка с div. Таким образом, когда операция выполняется над флажком, ее использование повлияет на div. Далее мы установим значение непрозрачности как « 1 ”:
вход : проверил + див {непрозрачность : 1
}
Примечание: Мы укажем значение непрозрачности как « 1 ”, что означает, что при установленном флажке будет показан созданный div. Кроме того, снимите отметку, чтобы скрыть div
Как видите, div отображается и скрывается с помощью « переход «имущество и» : проверено ” элемент псевдокласса:
Мы объяснили способ скрытия и отображения элемента div со свойством перехода в CSS.
Вывод
Чтобы показать и скрыть div, нажмите « переход «имущество и» : проверено » элемент псевдокласса используется таким образом, что значение непрозрачности div устанавливается как « 0 », а в элементе псевдокласса :checked установите непрозрачность как « 1 ». Когда пользователь нажимает на флажок, div будет отображаться, а когда он снимается, div скрывается. В этом руководстве мы описали способ скрытия и отображения div с помощью свойства перехода.