ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированная форма авторизации в CSS

Анимированная форма авторизации в CSS

В статье представлен материал, как создать пример анимированной формы входа и регистраций на сайт в HTML и CSS, что выглядит просто великолепно. Вероятно вы видели такой стиль формы входа в систему во многих тематических сайтах, но здесь все создано на CSS. Некоторые очень простые и многие другие являются анимированными формами, что идет с простым исходным кодом. По сути в этом фоне форм входа в систему помещено две фигуры, которые проворачиваются на 360 градусов до бесконечности.

По сути сделать анимированную форму входа на CSS не так сложно, как изначально может показаться. Это легко создать, где вам просто нужно хорошее знание HTML и CSS. Сначала создайте форму с двумя входами, где можете поместить несколько входов, как вам будет удобнее на сайте.

Тем не менее здесь присутствует два входа, первый для имени пользователя и второй для пароля. После создания полей, нам нужно создать кнопку отправки для входа в систему. Существует два способа создания кнопки отправки: сначала это тег button, а второй input type ="submit". Как можно заметить, то в этой кнопке отправки заполнителя поставить логин или войти.

Такой стиль дизайна и функций идет по умолчанию:

Где можно заметить, но лучше это сделать на demo странице, что по правую сторону сразу будкт замечена анимация, которая происходит виде волн.

Вот два файла: первый файл login.html, который является HTML-файлом, второй файл style.css, что является файлом CSS. Сначала создайте имя файла login.html или что угодно, и вставьте эти коды, которые приведенные ниже.

Установочный процесс:

HTML

Код

<form class="registratsiya">
  <input type="text" placeholder="Имя пользователя">
  <input type="password" placeholder="Пароль">
  <button>Войти</button>
</form>

CSS

Код

.registratsiya {
  overflow: hidden;
  background-color: #19b9b9;
  padding: 38px 28px 28px 28px;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 415px;
  transform: translate(-50%, -50%);
  transition: transform 300ms, box-shadow 300ms;
  box-shadow: 1px 7px 5px rgba(15, 83, 101, 0.57);
}

.registratsiya > input {
  display: block;
  border-radius: 7px;
  font-size: 15px;
  background: #f9f3f3;
  width: 100%;
  border: 0;
  padding: 11px 11px;
  margin: 12px -12px;
  border: 2px solid #e0d6d6;
}
.registratsiya > button {
  cursor: pointer;
  color: #fff1f1;
  font-size: 14px;
  text-transform: uppercase;
  width: 95px;
  border: 0;
  padding: 10px 0;
  margin-top: 10px;
  margin-left: -5px;
  border-radius: 5px;
  background-color: #9c1b1d;
  transition: background-color 300ms;
  box-shadow: 0px 2px 3px rgba(109, 104, 104, 0.71), 0px 10px 30px -15px rgba(23, 22, 22, 0.54);
}
.registratsiya > button:hover {
  background-color: #de1e21;
}
.registratsiya::before, .registratsiya::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-top-left-radius: 40%;
  border-top-right-radius: 45%;
  border-bottom-left-radius: 35%;
  border-bottom-right-radius: 40%;
  z-index: -1;
}
.registratsiya::before {
  left: 40%;
  bottom: -130%;
  background-color: rgba(69, 105, 144, 0.15);
  animation: wawes 6s infinite linear;
}
.registratsiya::after {
  left: 35%;
  bottom: -125%;
  background-color: rgba(2, 128, 144, 0.2);
  animation: wawes 7s infinite;
}
@keyframes wawes {
  from {
  transform: rotate(0);
  }
  to {
  transform: rotate(360deg);
  }
}

После чего остается прописать стилистику CSS, где также идет несколько вариантов, это поставить в CSS или все выставить через файл. Кому как удобнее, так как некоторые ставят через файл, тем сохраняя место в CSS.

И как понимаете, что здесь все можно самостоятельно редактировать под тот дизайн, где будет выставлен этот материал, виде формы входа на сайт. Так что можно поэкспериментировать с этими кодами, чтобы сделать его лучше.

Демонстрация

27 Июля 2019 Загрузок: 2 Просмотров: 1337 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0