Реализован эффект переключения для страницы входа и регистрации. Когда пользователь нажимает кнопку входа или регистрации, появляется наложение, содержащее форму. Пользователь может ввести имя пользователя и пароль в форму, а затем нажать кнопку «Отправить», чтобы войти. или зарегистрируйтесь. Когда пользователь нажимает кнопку «Назад», наложение скрывается, а в основной области отображается форма входа или регистрации. Этот эффект может улучшить взаимодействие с пользователем и упростить вход или регистрацию пользователей.
<div class="контейнер">
<!-- Зарегистрироваться -->
<div class="контейнер-форма-контейнер-подписка">
<form action="#" class="form" id="form1">
<h2 class="form-title">Зарегистрировать аккаунт</h2>
<input type="text" Placeholder="User" class="input" />
<input type="email" Placeholder="Email" class="input" />
<input type="password" Placeholder="Password" class="input" />
<button type="button" class="btn">Нажмите, чтобы зарегистрироваться</button>
</форма>
</div>
<!-- Войти -->
<div class="container-formContainer-Signin">
<form action="#" class="form" id="form2">
<h2 class="form-title">Добро пожаловать в систему</h2>
<input type="email" Placeholder="Email" class="input" />
<input type="password" Placeholder="Password" class="input" />
<a href="#" class="link">Забыли пароль?</a>
<button type="button" class="btn">Войти</button>
</форма>
</div>
<!--Наложение-->
<div class="container-overlay">
<div class="overlay">
<div class="overlay-panel overlay-left">
<button class="btn" id="signIn">
У вас уже есть учетная запись? Войти напрямую</button>
</div>
<div class="overlay-panel overlay-right">
<button class="btn" id="signUp">
Если у вас нет учетной записи, нажмите «Зарегистрироваться»</button>
</div>
</div>
</div>
</div> тело {
высота: 100вх;
фон: #e7e7e7 url("./img/background.jpg") исправлено центральное отсутствие повтора;
размер фона: обложка;
фоновый фильтр: размытие (5 пикселей);
дисплей: гибкий;
оправдание-содержание: центр;
выровнять-элементы: по центру;
}
/* Стиль div тела*/
.контейнер {
цвет фона: #e7e7e7;
радиус границы: 0,7рем;
box-shadow: 0 0,9rem 1,7rem rgba(0, 0, 0, 0,25),
0 0,7рем 0,7рем rgba(0, 0, 0, 0,22);
высота: 420 пикселей;
максимальная ширина: 750 пикселей;
переполнение: скрыто;
положение: относительное;
ширина: 100%;
}
/* Часть поля входа и регистрации*/
.container-form {
высота: 100%;
позиция: абсолютная;
верх: 0;
переход: все 0,6 с, плавность входа-выхода;
}
/* Поле входа — уровень по умолчанию высокий*/
.container-signin {
слева: 0;
ширина: 50%;
z-индекс: 2;
}
/* Поле регистрации – уровень по умолчанию низкий – прозрачность 0 */
.container-подписка {
слева: 0;
непрозрачность: 0;
ширина: 50%;
z-индекс: 1;
}
/* стиль формы*/
.форма {
цвет фона: #e7e7e7;
дисплей: гибкий;
выровнять-элементы: по центру;
оправдание-содержание: центр;
гибкое направление: столбец;
отступ: 0 3рем;
высота: 100%;
выравнивание текста: по центру;
}
.form-title {
вес шрифта: 300;
маржа: 0;
нижняя граница: 1,25 рем;
}
.связь {
цвет: #333;
размер шрифта: 0,9рем;
маржа: 1,5рем 0;
текстовое оформление: нет;
}
.вход {
ширина: 100%;
цвет фона: #fff;
заполнение: 0,9рем 0,9рем;
маржа: 0,5бэр 0;
граница: нет;
контур: нет;
}
.btn {
цвет фона: #f25d8e;
box-shadow: 0 4px 4px rgba(255, 112, 159, .3);
радиус границы: 5 пикселей;
цвет: #e7e7e7;
граница: нет;
курсор: указатель;
размер шрифта: 0,8рем;
начертание шрифта: жирный;
межбуквенный интервал: 0,1 рем;
заполнение: 0,9рем 4рем;
преобразование текста: верхний регистр;
переход: преобразование с легкостью 80 мс;
}
.form>.btn {
маржа-верх: 1,5рем;
}
.btn:активный {
преобразование: масштаб (0,95);
}
/* ---------- Стиль наложенной детали ------------- */
.container-overlay {
высота: 100%;
осталось: 50%;
переполнение: скрыто;
позиция: абсолютная;
верх: 0;
переход: преобразование 0,6 с, легкость входа и выхода;
ширина: 50%;
z-индекс: 100;
}
.оверлей {
ширина: 200%;
высота: 100%;
положение: относительное;
слева: -100%;
фон: исправлен центр без повторения url("./img/background.jpg");
размер фона: обложка;
переход: преобразование 0,6 с, легкость входа и выхода;
преобразование: TranslateX (0);
}
.overlay-панель {
высота: 100%;
ширина: 50%;
позиция: абсолютная;
верх: 0;
дисплей: гибкий;
оправдание-содержание: центр;
выровнять-элементы: по центру;
гибкое направление: столбец;
преобразование: TranslateX (0);
переход: преобразование 0,6 с, легкость входа и выхода;
}
.overlay-left {
преобразование: TranslateX (-20%);
}
.overlay-право {
правильно: 0;
преобразование: TranslateX (0);
}
/* Положение наложения при активации дизайна*/
.panel-active .overlay-left {
преобразование: TranslateX (0);
}
.panel-active .container-overlay {
трансформировать: TranslateX (-100%);
}
.panel-active .overlay {
преобразование: TranslateX (50%);
}
/*Устанавливаем расположение и прозрачность слоя регистрации входа при активации*/
.panel-active .container-signin {
преобразование: TranslateX (100%);
}
.panel-active .container-signup {
непрозрачность: 1;
z-индекс: 5;
преобразование: TranslateX (100%);
} тело {
height: 100vh; /* Определить высоту страницы как высоту области просмотра*/
фон: #e7e7e7 url("./img/background.jpg") исправлен центр без повтора /* Определите фон страницы как серый и добавьте фоновое изображение*/;
background-size: Cover /* Определить размер фонового изображения, покрывающего всю страницу*/
backdrop-filter: Blur(5px); /* Определить эффект размытия фона*/;
display: flex; /* Определить страницу как гибкий блок*/
justify-content: center; /* Определить выравнивание главной оси по центру */
align-items: center /* Определить выравнивание по оси как по центру */
} Этот код определяет общий стиль страницы, включая высоту, фон, границу, тень и т. д. Среди них height: 100vh; означает, что высота страницы равна высоте области просмотра, background: #e7e7e7 url("./img/background.jpg") center no-repeat fixed; добавлен, background-size: cover; указывает, что размер фонового изображения соответствует всей странице, backdrop-filter: blur(5px); указывает на эффект размытия фона.
.container-form {
height: 100%; /* Определить высоту контейнера 100% */
Position: Absolute; /* Определить контейнер, который будет позиционироваться абсолютно*/
top: 0 /* Определяем расстояние от верха контейнера до 0 */
переход: все 0,6 с плавность выхода /* определяют эффект перехода*/;
}
.container-signin {
left: 0 /* Определить поле входа как 0 слева */;
width: 50%; /* Определите ширину окна входа в 50% */
z-index: 2; /* Определить уровень входа в систему равным 2 */
}
.container-подписка {
left: 0; /* Определить расстояние поля регистрации слева как 0 */
opacity: 0; /* Определить прозрачность поля регистрации равным 0 */
width: 50%; /* Определить ширину поля регистрации как 50% */
z-index: 1; /* Определить уровень поля регистрации как 1 */
} Этот код определяет стиль полей входа и регистрации, включая положение, прозрачность, уровень и т. д. Среди них height: 100%; означает, что высота контейнера равна 100%, position: absolute; означает, что контейнер позиционирован абсолютно, top: 0; означает, что расстояние от верха контейнера равно 0, transition: all 0.6s ease-in-out; означают эффект перехода.
.форма {
background-color: #e7e7e7; Определить фон формы как серый*/;
display: flex; /* Определить форму как гибкий блок*/
align-items: center /* Определить выравнивание по оси как по центру */
justify-content: center; /* Определить выравнивание главной оси по центру */
flex-direction:column; /* Определить направление главной оси как вертикальное*/
padding: 0 3rem; /* Определить внутренние поля формы равными 3rem слева и справа */
height: 100%; /* Определить высоту формы 100% */
text-align: center /* Определить выравнивание текста формы по центру*/
}
.form-title {
font-weight: 300; /* Определить толщину шрифта заголовка 300 */
Margin: 0; /* Определите поле заголовка равным 0 */
Margin-bottom: 1.25rem; /* Определите нижнее поле заголовка равным 1,25rem */ }
.link { color: #333; /* Определить черный цвет ссылки/ font-size: 0.9rem; / Определить размер шрифта ссылки 0,9rem / Margin: 1,5rem 0; / Определить поля ссылки равным 1,5. rem для верха и низа, слева и справа. Каждый 0 / text-decoration: none / Определить ссылки для удаления подчеркиваний */ };
.input { width: 100%; /* Определить ширину поля ввода как 100% / background-color: #fff; / Определить фон поля ввода как белый / отступ: 0,9rem 0,9rem / Определить внутренние поля поля ввода как верхнее и нижнее 0,9 rem, 0,9 rem слева и справа / поле: 0,5 rem 0 / определите внешнее поле поля ввода как 0,5 rem сверху и снизу, 0 слева и справа / border: none; / Определить поле ввода без рамки / контур: none / Определить поле ввода без контура */ }
.btn { background-color: #f25d8e; /* Определите фон кнопки розовым/ box-shadow: 0 4px 4px rgba(255, 112, 159,.3); / Определите эффект тени кнопки/ border-radius: 5px; / Определите радиус угла кнопки равным 5 пикселей / color: #e7e7e7 / Определите цвет текста кнопки как белый / border: none /; Определите кнопку без рамки / курсор: указатель; / Определите кнопку как тип указателя / размер шрифта: 0,8 rem; / Определите размер шрифта кнопки как 0,8 rem / шрифт-вес: жирный шрифт; вес должен быть жирным / интервал между буквами: 0,1 rem / задайте интервал между буквами кнопки равным 0,1 rem / отступ: 0,9 rem 4 rem /; Определите внутреннее поле кнопки равным 0,9 rem для верхней и нижней части и 4 rem для левой и правой стороны / text-transform: верхний регистр; / определите текст кнопки как прописные буквы / переход: преобразование с легкостью в 80 мс / Определить; эффект перехода кнопки*/ }
.form>.btn {margin-top: 1.5rem; /* Определить верхнее поле кнопки равным 1,5rem */ }
.btn:active { Transform: Scale(0.95); /* Определяем эффект масштабирования при активации кнопки*/} Этот код определяет стиль форм входа и регистрации, включая фон, шрифты, поля ввода, кнопки и т. д. Среди них: background-color: #e7e7e7; означает, что фон формы серый, display: flex; означает, что форма представляет собой гибкий блок, align-items: center; что выравнивание по оси выравнивается по центру, justify-content: center; означает, что выравнивание по основной оси — по центру, flex-direction: column; означает, что направление основной оси вертикальное, padding: 0 3rem; означает, что внутреннее поле формы составляет 3rem слева и справа, height: 100%; означает, что высота формы равна 100%, text-align: center; означает выравнивание текста формы по центру.
.container-overlay {
высота: 100%;
/* Определить высоту контейнера как 100% / слева: 50% / Определить расстояние контейнера слева как 50% / переполнение: скрыто / Определить часть контейнера, которая является переполненной, / положение : Absolute; / Определить контейнер, который будет позиционироваться абсолютно / сверху: 0; / Определить расстояние контейнера от верха до 0 / переход: плавность перехода 0,6 с / Определить эффект перехода / ширину: 50%; ; / Определить ширину контейнера 50% /z-index: 100/; Определите уровень контейнера как 100 */
}
.оверлей {
ширина: 200%;
/* Определить ширину наложения как 200% / высоту: 100% / Определить высоту наложения как 100% / положение: относительное / Определить наложение как относительное позиционирование / слева: -100% / Определить расстояние наложения влево; as -100% / background: url("./img/background.jpg") исправлен центр без повтора / Определите фон наложения в качестве фонового изображения и выровняйте его по центру /background-size: Cover /; Определите размер фона наложения, чтобы покрыть всю страницу/переход: Transform 0,6s easy-in-out;/определите эффект перехода/transform:translateX(0);/определите начальное положение наложения как 0 */
}
.overlay-панель {
высота: 100%;
/* Определить высоту наложенной панели равной 100% / ширину: 50% / Определить ширину наложенной панели равной 50% / положение: абсолютное; / Определить абсолютное позиционирование наложенной панели / верх: 0; / Определить расстояние от верха панели наложения 0 / display: flex; / Определить панель наложения как гибкий блок / justify-content: center; / Определить выравнивание по основной оси как по центру / align-items: center /; Определите выравнивание поперечной оси как центрированное/ flex-direction:column;/Определить направление основной оси как вертикальное/transform:translateX(0);/Определить начальное положение панели наложения как 0/transition: Transform 0,6s easy-in-out; эффект перехода*/
}
.overlay-left {
преобразование: TranslateX (-20%);
/* Определим положение левой панели наложения для перемещения на 20% влево */
}
.overlay-право {
правильно: 0;
/* Определим расстояние правой панели наложения вправо как 0 / Transform: TranslateX(0) / Определим положение правой панели наложения как 0 */
}
/* Положение наложения при активации дизайна/ .panel-active.overlay-left { Transform: TranslateX(0); / Определить положение левой панели наложения как 0 */
}
.panel-active.container-overlay {
трансформировать: TranslateX (-100%);
/* Определим расстояние контейнера слева как -100% */
}
.panel-active.overlay {
преобразование: TranslateX (50%);
/* Определим позицию наложения для перемещения на 50% вправо */
}
/* Устанавливаем положение и прозрачность слоя регистрации входа при активации/ .panel-active.container-signin { Transform: TranslateX(100%) / Определяем положение слоя входа в систему для перемещения на 100% вправо */
}
.panel-active.container-signup {
непрозрачность: 1;
/* Определить прозрачность регистрационного слоя как 1 / z-index: 5; / Определить уровень регистрационного слоя как 5 / Transform: TranslateX(100%) / Определить положение регистрационного слоя как перемещение на 100% вправо */
}Этот код определяет стиль наложения для страниц входа и регистрации, включая положение, размер, прозрачность, иерархию и т. д. Среди них высота: 100%; означает, что высота контейнера равна 100%, слева: 50%; означает, что контейнер находится на 50% с левой стороны, переполнение: скрыто; означает, что часть контейнера, содержащая переполнение, скрыта, положение. : Absolute; означает, что контейнер позиционирован абсолютно, top: 0; означает, что контейнер равен 0 сверху, переход: преобразование 0,6 с, легкость выхода означает эффект перехода, ширина: 50% означает, что ширина контейнера равна 50; %, z-индекс: 100; Указывает, что уровень контейнера равен 100.
Выравнивание по центру, размер фона: крышка; означает, что размер фона наложения должен охватывать всю страницу, переход: преобразование 0,6 с, легкость выхода означает эффект перехода, преобразование: переводX (0); позиция наложения равна 0.
Стиль панели наложения включает в себя высоту, ширину, положение, режим отображения, выравнивание, направление главной оси, эффект перехода, начальное положение и т. д. панели наложения. Среди них высота: 100%; означает, что высота панели наложения равна 100%, ширина: 50% означает, что ширина панели наложения равна 50%, положение: абсолютное означает, что панель наложения расположена абсолютно; top: 0; означает, что панель наложения расположена абсолютно. Расстояние от верха равно 0, display: flex; означает, что панель наложения представляет собой гибкий блок, justify-content: center означает выравнивание по главной оси, выравнивание. предметы: центр; Указывает, что выравнивание по поперечной оси центрировано, flex-direction: columns указывает, что направление основной оси вертикальное, Transform: TranslateX(0) указывает, что начальное положение панели наложения равно 0, переход: преобразование 0,6 с легкостью; -in-out; указывает эффект перехода.
Левый и правый стили панели наложения определяются как overlay-left и overlay-right соответственно, которые представляют стили левой и правой панелей наложения соответственно. Среди них Transform: TranslateX(-20%); означает, что положение левой панели наложения перемещается на 20% влево, Right: 0 означает, что правая панель наложения находится на 0 справа, Transform: TranslateX(0); означает вправо. Положение боковой панели наложения равно 0.
При активации положение и прозрачность наложения изменятся, включая положение левой панели наложения, расстояние контейнера слева, положение наложения, прозрачность зарегистрированного слоя, положение зарегистрированного слоя и т. д. Среди них .panel-active.overlay-left означает, что при активации позиция левой панели наложения равна 0, .panel-active.container-overlay означает, что при активации расстояние контейнера слева составляет -100%, .panel -active .overlay означает, что при активации позиция наложения перемещается на 50 % вправо. .panel-active.container-signin означает, что при активации позиция слоя входа перемещается на 100 % вправо. регистрация контейнера Указывает, что при активации прозрачность регистрационного слоя равна 1, уровень регистрационного слоя — 5, а положение регистрационного слоя перемещается на 100 % вправо.
На этом завершается эта статья о том, как эффективно переключать вход в систему с помощью HTML+CSS. Дополнительную информацию о переключении входа в систему с помощью HTML и CSS можно найти в предыдущих статьях на сайте downcodes.com или продолжить просмотр соответствующих статей ниже. Надеюсь, вы поддержите меня в будущем. .com!