ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Эффекты анимации CSS полей ввода Input

Эффекты анимации CSS полей ввода Input

В статье представлены оригинальные и красивые эффекты для полей ввода при помощи CSS, где в основе своей они реализованы с помощью transitions. Ведь не секрет, что при появлении CSS3, веб-разработчик может реализовать неординарные по своей анимации эффекты для элементов интерфейса. А если точнее, это самостоятельно создавать различные типы фокуса ввода, где производится эффекты заполнение полей, что подойдут на светлый и темный формат.

Все это делается по клику, где нам нужно прописать логин и пароль, то мы делаем клик, и видим, что появились поля. Но это все по стандарту, а нам нужно, чтоб появление полей были по своему оригинальны, в плане анимационного появление. Где задаем свой CSS-фокус ввода с уникальным заполнением пользовательской анимации. Существует большой подбор видов анимации для границ, фона с дальнейшим заполнителем, которые появится при фокусировке ввода.

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

Как пример их набора:

Анимационные эффекты для полей ввода на CSS

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

Подключаем библиотеку, если у кого не установлена на сайте.

Код

HTML

Код

<div class="row">
  <div class="container">
  <h2>Пограничные эффекты</h2>
  <div class="col-3">
  <input class="animativadas-1" type="text" placeholder="Заполнить текстом">
  <span class="focus-border"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-2" type="text" placeholder="Заполнить текстом">
  <span class="focus-border"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-3" type="text" placeholder="Заполнить текстом">
  <span class="focus-border"></span>
  </div>

  <div class="col-3">
  <input class="animativadas-4" type="text" placeholder="Заполнить текстом">
  <span class="focus-border"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-5" type="text" placeholder="Заполнить текстом">
  <span class="focus-border"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-6" type="text" placeholder="Заполнить текстом">
  <span class="focus-border"></span>
  </div>

  <div class="col-3">
  <input class="animativadas-7" type="text" placeholder="Заполнить текстом">
  <span class="focus-border">
  <i></i>
  </span>
  </div>
  <div class="col-3">
  <input class="animativadas-8" type="text" placeholder="Заполнить текстом">
  <span class="focus-border">
  <i></i>
  </span>
  </div>
  <div class="col-3">
  <input class="animativadas-9" type="text" placeholder="Заполнить текстом">
  <span class="focus-border">
  <i></i>
  </span>
  </div>

  <h2>Фоновые эффекты</h2>
  <div class="col-3">
  <input class="animativadas-10" type="text" placeholder="Заполнить текстом">
  <span class="focus-bg"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-11" type="text" placeholder="Заполнить текстом">
  <span class="focus-bg"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-12" type="text" placeholder="Заполнить текстом">
  <span class="focus-bg"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-13" type="text" placeholder="Заполнить текстом">
  <span class="focus-bg"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-14" type="text" placeholder="Заполнить текстом">
  <span class="focus-bg"></span>
  </div>
  <div class="col-3">
  <input class="animativadas-15" type="text" placeholder="Заполнить текстом">
  <span class="focus-bg"></span>
  </div>

  <h2>Ввод с эффектами меток</h2>
  <div class="col-3 input-effect">
  <input class="animativadas-16" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-border"></span>
  </div>
  <div class="col-3 input-effect">
  <input class="animativadas-17" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-border"></span>
  </div>
  <div class="col-3 input-effect">
  <input class="animativadas-18" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-border"></span>
  </div>

  <div class="col-3 input-effect">
  <input class="animativadas-19" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-border">
  <i></i>
  </span>
  </div>
  <div class="col-3 input-effect">
  <input class="animativadas-20" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-border">
  <i></i>
  </span>
  </div>
  <div class="col-3 input-effect">
  <input class="animativadas-21" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-border">
  <i></i>
  </span>
  </div>

  <div class="col-3 input-effect">
  <input class="animativadas-22" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-bg"></span>
  </div>
  <div class="col-3 input-effect">
  <input class="animativadas-23" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-bg"></span>
  </div>
  <div class="col-3 input-effect">
  <input class="animativadas-24" type="text" placeholder="">
  <label>Название</label>
  <span class="focus-bg"></span>
  </div>
  </div>
</div>

CSS

Код

.container {
  margin: 0 auto;
  max-width: 1200px;
}
.row {
  float: left;
  width: 100%;
  padding: 20px 0 50px;
}
h2 {
  text-align: center;
  color: #45af45;
  font-size: 28px;
  float: left;
  width: 100%;
  margin: 30px 0;
  position: relative;
  line-height: 58px;
  font-weight: 400;
}
h2:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100px;
  height: 2px;
  background-color: #45af45;
  margin-left: -50px;
}
:focus {
  outline: none;
}
.col-3 {
  float: left;
  width: 27.33%;
  margin: 40px 3%;
  position: relative;
}
input[type="text"] {
  font: 15px/24px "Lato", Arial, sans-serif;
  color: #2f2d2d;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 1px;
}
.animativadas-1,
.animativadas-2,
.animativadas-3 {
  border: 0;
  padding: 7px 0;
  border-bottom: 1px solid #ccc;
}
.animativadas-1~.focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-1:focus~.focus-border {
  width: 100%;
  transition: 0.4s;
}
.animativadas-2~.focus-border {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-2:focus~.focus-border {
  width: 100%;
  transition: 0.4s;
  left: 0;
}
.animativadas-3~.focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 99;
}
.animativadas-3~.focus-border:before,
.animativadas-3~.focus-border:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-3~.focus-border:after {
  left: auto;
  right: 0;
}
.animativadas-3:focus~.focus-border:before,
.animativadas-3:focus~.focus-border:after {
  width: 50%;
  transition: 0.4s;
}
.animativadas-4,
.animativadas-5,
.animativadas-6 {
  border: 0;
  padding: 5px 0 7px;
  border: 1px solid transparent;
  border-bottom-color: #ccc;
  transition: 0.4s;
}
.animativadas-4:focus,
.animativadas-5:focus,
.animativadas-6:focus {
  padding: 5px 14px 7px;
  transition: 0.4s;
}
.animativadas-4~.focus-border {
  position: absolute;
  height: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: 0.4s;
  z-index: -1;
}
.animativadas-4:focus~.focus-border {
  transition: 0.4s;
  height: 36px;
  border: 2px solid #03e64c;
  z-index: 1;
}
.animativadas-5~.focus-border {
  position: absolute;
  height: 36px;
  bottom: 0;
  left: 0;
  width: 0;
  transition: 0.4s;
}
.animativadas-5:focus~.focus-border {
  width: 100%;
  transition: 0.4s;
  border: 2px solid #03e64c;
}
.animativadas-6~.focus-border {
  position: absolute;
  height: 36px;
  bottom: 0;
  right: 0;
  width: 0;
  transition: 0.4s;
}
.animativadas-6:focus~.focus-border {
  width: 100%;
  transition: 0.4s;
  border: 2px solid #03e64c;
}
.animativadas-7,
.animativadas-8,
.animativadas-9 {
  border: 1px solid #ccc;
  padding: 7px 14px 9px;
  transition: 0.4s;
}
.animativadas-7~.focus-border:before,
.animativadas-7~.focus-border:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-7~.focus-border:after {
  top: auto;
  bottom: 0;
}
.animativadas-7~.focus-border i:before,
.animativadas-7~.focus-border i:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 0;
  background-color: #03e64c;
  transition: 0.6s;
}
.animativadas-7~.focus-border i:after {
  left: auto;
  right: 0;
}
.animativadas-7:focus~.focus-border:before,
.animativadas-7:focus~.focus-border:after {
  left: 0;
  width: 100%;
  transition: 0.4s;
}
.animativadas-7:focus~.focus-border i:before,
.animativadas-7:focus~.focus-border i:after {
  top: 0;
  height: 100%;
  transition: 0.6s;
}
.animativadas-8~.focus-border:before,
.animativadas-8~.focus-border:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.3s;
}
.animativadas-8~.focus-border:after {
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
}
.animativadas-8~.focus-border i:before,
.animativadas-8~.focus-border i:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-8~.focus-border i:after {
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
}
.animativadas-8:focus~.focus-border:before,
.animativadas-8:focus~.focus-border:after {
  width: 100%;
  transition: 0.3s;
}
.animativadas-8:focus~.focus-border i:before,
.animativadas-8:focus~.focus-border i:after {
  height: 100%;
  transition: 0.4s;
}
.animativadas-9~.focus-border:before,
.animativadas-9~.focus-border:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.2s;
  transition-delay: 0.2s;
}
.animativadas-9~.focus-border:after {
  top: auto;
  bottom: 0;
  right: auto;
  left: 0;
  transition-delay: 0.6s;
}
.animativadas-9~.focus-border i:before,
.animativadas-9~.focus-border i:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0;
  background-color: #03e64c;
  transition: 0.2s;
}
.animativadas-9~.focus-border i:after {
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
  transition-delay: 0.4s;
}
.animativadas-9:focus~.focus-border:before,
.animativadas-9:focus~.focus-border:after {
  width: 100%;
  transition: 0.2s;
  transition-delay: 0.6s;
}
.animativadas-9:focus~.focus-border:after {
  transition-delay: 0.2s;
}
.animativadas-9:focus~.focus-border i:before,
.animativadas-9:focus~.focus-border i:after {
  height: 100%;
  transition: 0.2s;
}
.animativadas-9:focus~.focus-border i:after {
  transition-delay: 0.4s;
}
.animativadas-10,
.animativadas-11,
.animativadas-12,
.animativadas-13,
.animativadas-14,
.animativadas-15 {
  border: 0;
  padding: 7px 15px;
  border: 1px solid #ccc;
  position: relative;
  background: transparent;
}
.animativadas-10~.focus-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ededed;
  opacity: 0;
  transition: 0.5s;
  z-index: -1;
}
.animativadas-10:focus~.focus-bg {
  transition: 0.5s;
  opacity: 1;
}
.animativadas-11~.focus-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #ededed;
  transition: 0.3s;
  z-index: -1;
}
.animativadas-11:focus~.focus-bg {
  transition: 0.3s;
  width: 100%;
}
.animativadas-12~.focus-bg {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #ededed;
  transition: 0.3s;
  z-index: -1;
}
.animativadas-12:focus~.focus-bg {
  transition: 0.3s;
  width: 100%;
  left: 0;
}
.animativadas-13~.focus-bg:before,
.animativadas-13~.focus-bg:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #ededed;
  transition: 0.3s;
  z-index: -1;
}
.animativadas-13:focus~.focus-bg:before {
  transition: 0.3s;
  width: 50%;
}
.animativadas-13~.focus-bg:after {
  left: auto;
  right: 0;
}
.animativadas-13:focus~.focus-bg:after {
  transition: 0.3s;
  width: 50%;
}
.animativadas-14~.focus-bg:before,
.animativadas-14~.focus-bg:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background-color: #ededed;
  transition: 0.3s;
  z-index: -1;
}
.animativadas-14:focus~.focus-bg:before {
  transition: 0.3s;
  width: 50%;
  height: 100%;
}
.animativadas-14~.focus-bg:after {
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
}
.animativadas-14:focus~.focus-bg:after {
  transition: 0.3s;
  width: 50%;
  height: 100%;
}
.animativadas-15~.focus-bg:before,
.animativadas-15~.focus-bg:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  background-color: #ededed;
  transition: 0.3s;
  z-index: -1;
}
.animativadas-15:focus~.focus-bg:before {
  transition: 0.3s;
  width: 50%;
  left: 0;
  top: 0;
  height: 100%;
}
.animativadas-15~.focus-bg:after {
  left: auto;
  right: 50%;
  top: auto;
  bottom: 50%;
}
.animativadas-15:focus~.focus-bg:after {
  transition: 0.3s;
  width: 50%;
  height: 100%;
  bottom: 0;
  right: 0;
}
.animativadas-16,
.animativadas-17,
.animativadas-18 {
  border: 0;
  padding: 4px 0;
  border-bottom: 1px solid #ccc;
  background-color: transparent;
}
.animativadas-16~.focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-16:focus~.focus-border,
.has-content.animativadas-16~.focus-border {
  width: 100%;
  transition: 0.4s;
}
.animativadas-16~label {
  position: absolute;
  left: 0;
  width: 100%;
  top: 9px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-16:focus~label,
.has-content.animativadas-16~label {
  top: -16px;
  font-size: 12px;
  color: #03e64c;
  transition: 0.3s;
}
.animativadas-17~.focus-border {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-17:focus~.focus-border,
.has-content.animativadas-17~.focus-border {
  width: 100%;
  transition: 0.4s;
  left: 0;
}
.animativadas-17~label {
  position: absolute;
  left: 0;
  width: 100%;
  top: 9px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-17:focus~label,
.has-content.animativadas-17~label {
  top: -16px;
  font-size: 12px;
  color: #03e64c;
  transition: 0.3s;
}
.animativadas-18~.focus-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 99;
}
.animativadas-18~.focus-border:before,
.animativadas-18~.focus-border:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-18~.focus-border:after {
  left: auto;
  right: 0;
}
.animativadas-18:focus~.focus-border:before,
.animativadas-18:focus~.focus-border:after,
.has-content.animativadas-18~.focus-border:before,
.has-content.animativadas-18~.focus-border:after {
  width: 50%;
  transition: 0.4s;
}
.animativadas-18~label {
  position: absolute;
  left: 0;
  width: 100%;
  top: 9px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-18:focus~label,
.has-content.animativadas-18~label {
  top: -16px;
  font-size: 12px;
  color: #03e64c;
  transition: 0.3s;
}
.animativadas-19,
.animativadas-20,
.animativadas-21 {
  border: 1px solid #ccc;
  padding: 7px 14px;
  transition: 0.4s;
  background: transparent;
}
.animativadas-19~.focus-border:before,
.animativadas-19~.focus-border:after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-19~.focus-border:after {
  top: auto;
  bottom: 0;
}
.animativadas-19~.focus-border i:before,
.animativadas-19~.focus-border i:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 0;
  background-color: #03e64c;
  transition: 0.6s;
}
.animativadas-19~.focus-border i:after {
  left: auto;
  right: 0;
}
.animativadas-19:focus~.focus-border:before,
.animativadas-19:focus~.focus-border:after,
.has-content.animativadas-19~.focus-border:before,
.has-content.animativadas-19~.focus-border:after {
  left: 0;
  width: 100%;
  transition: 0.4s;
}
.animativadas-19:focus~.focus-border i:before,
.animativadas-19:focus~.focus-border i:after,
.has-content.animativadas-19~.focus-border i:before,
.has-content.animativadas-19~.focus-border i:after {
  top: -1px;
  height: 100%;
  transition: 0.6s;
}
.animativadas-19~label {
  position: absolute;
  left: 14px;
  width: 100%;
  top: 10px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-19:focus~label,
.has-content.animativadas-19~label {
  top: -18px;
  left: 0;
  font-size: 12px;
  color: #03e64c;
  transition: 0.3s;
}
.animativadas-20~.focus-border:before,
.animativadas-20~.focus-border:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.3s;
}
.animativadas-20~.focus-border:after {
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
}
.animativadas-20~.focus-border i:before,
.animativadas-20~.focus-border i:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0;
  background-color: #03e64c;
  transition: 0.4s;
}
.animativadas-20~.focus-border i:after {
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
}
.animativadas-20:focus~.focus-border:before,
.animativadas-20:focus~.focus-border:after,
.has-content.animativadas-20~.focus-border:before,
.has-content.animativadas-20~.focus-border:after {
  width: 100%;
  transition: 0.3s;
}
.animativadas-20:focus~.focus-border i:before,
.animativadas-20:focus~.focus-border i:after,
.has-content.animativadas-20~.focus-border i:before,
.has-content.animativadas-20~.focus-border i:after {
  height: 100%;
  transition: 0.4s;
}
.animativadas-20~label {
  position: absolute;
  left: 14px;
  width: 100%;
  top: 10px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-20:focus~label,
.has-content.animativadas-20~label {
  top: -18px;
  left: 0;
  font-size: 12px;
  color: #03e64c;
  transition: 0.3s;
}
.animativadas-21~.focus-border:before,
.animativadas-21~.focus-border:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: #03e64c;
  transition: 0.2s;
  transition-delay: 0.2s;
}
.animativadas-21~.focus-border:after {
  top: auto;
  bottom: 0;
  right: auto;
  left: 0;
  transition-delay: 0.6s;
}
.animativadas-21~.focus-border i:before,
.animativadas-21~.focus-border i:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0;
  background-color: #03e64c;
  transition: 0.2s;
}
.animativadas-21~.focus-border i:after {
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
  transition-delay: 0.4s;
}
.animativadas-21:focus~.focus-border:before,
.animativadas-21:focus~.focus-border:after,
.has-content.animativadas-21~.focus-border:before,
.has-content.animativadas-21~.focus-border:after {
  width: 100%;
  transition: 0.2s;
  transition-delay: 0.6s;
}
.animativadas-21:focus~.focus-border:after,
.has-content.animativadas-21~.focus-border:after {
  transition-delay: 0.2s;
}
.animativadas-21:focus~.focus-border i:before,
.animativadas-21:focus~.focus-border i:after,
.has-content.animativadas-21~.focus-border i:before,
.has-content.animativadas-21~.focus-border i:after {
  height: 100%;
  transition: 0.2s;
}
.animativadas-21:focus~.focus-border i:after,
.has-conten.animativadas-21~.focus-border i:after {
  transition-delay: 0.4s;
}
.animativadas-21~label {
  position: absolute;
  left: 14px;
  width: 100%;
  top: 10px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-21:focus~label,
.has-content.animativadas-21~label {
  top: -18px;
  left: 0;
  font-size: 12px;
  color: #03e64c;
  transition: 0.3s;
}
.animativadas-22,
.animativadas-23,
.animativadas-24 {
  border: 0;
  padding: 7px 15px;
  border: 1px solid #ccc;
  position: relative;
  background: transparent;
}
.animativadas-22~.focus-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: transparent;
  transition: 0.4s;
  z-index: -1;
}
.animativadas-22:focus~.focus-bg,
.has-content.animativadas-22~.focus-bg {
  transition: 0.4s;
  width: 100%;
  background-color: #ededed;
}
.animativadas-22~label {
  position: absolute;
  left: 14px;
  width: 100%;
  top: 10px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-22:focus~label,
.has-content.animativadas-22~label {
  top: -18px;
  left: 0;
  font-size: 12px;
  color: #2f2d2d;
  transition: 0.3s;
}
.animativadas-23~.focus-bg:before,
.animativadas-23~.focus-bg:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background-color: #ededed;
  transition: 0.3s;
  z-index: -1;
}
.animativadas-23:focus~.focus-bg:before,
.has-content.animativadas-23~.focus-bg:before {
  transition: 0.3s;
  width: 50%;
  height: 100%;
}
.animativadas-23~.focus-bg:after {
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
}
.animativadas-23:focus~.focus-bg:after,
.has-content.animativadas-23~.focus-bg:after {
  transition: 0.3s;
  width: 50%;
  height: 100%;
}
.animativadas-23~label {
  position: absolute;
  left: 14px;
  width: 100%;
  top: 10px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-23:focus~label,
.has-content.animativadas-23~label {
  top: -18px;
  left: 0;
  font-size: 12px;
  color: #2f2d2d;
  transition: 0.3s;
}
.animativadas-24~.focus-bg:before,
.animativadas-24~.focus-bg:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  background-color: #ededed;
  transition: 0.3s;
  z-index: -1;
}
.animativadas-24:focus~.focus-bg:before,
.has-content.animativadas-24~.focus-bg:before {
  transition: 0.3s;
  width: 50%;
  left: 0;
  top: 0;
  height: 100%;
}
.animativadas-24~.focus-bg:after {
  left: auto;
  right: 50%;
  top: auto;
  bottom: 50%;
}
.animativadas-24:focus~.focus-bg:after,
.has-content.animativadas-24~.focus-bg:after {
  transition: 0.3s;
  width: 50%;
  height: 100%;
  bottom: 0;
  right: 0;
}
.animativadas-24~label {
  position: absolute;
  left: 14px;
  width: 100%;
  top: 10px;
  color: #aaa;
  transition: 0.3s;
  z-index: -1;
  letter-spacing: 0.5px;
}
.animativadas-24:focus~label,
.has-content.animativadas-24~label {
  top: -18px;
  left: 0;
  font-size: 12px;
  color: #2f2d2d;
  transition: 0.3s;
}

Код

$(window).load(function(){
  $(".col-3 input").val("");

  $(".input-effect input").focusout(function(){
  if($(this).val() != ""){
  $(this).addClass("has-content");
  }else{
  $(this).removeClass("has-content");
  }
  })
  });

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

Ведь кардинального изменение понадобиться всего 3 файла, где первый идет для HTML, второй под стилистику в CSS и третий для JavaScript.

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

Видео обзор:

15 Октября 2019 Загрузок: 4 Просмотров: 3795 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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