Создание анимации рамки вокруг input

398

31 июля 2017, 11:27

Привет всем, примерно месяц назад я задался вопросом: Как сделать анимацию рамки элемента в которого установлен border-radius.

Answer 1

Возможно мое решение не совсем правильно, но хочется поделится им с вами и услышать критику/советы по реализации даного функционала.

Для реализации данной фичи я решил использовать 2 блока одинаковых по размеру и 1 инпут который размещается над 2 блоками и немного меньше их (чтобы показать рамку).

.outblock { 
  position: relative; 
} 
 
.defaultBorder { 
  width: 150px; 
  height: 150px; 
  background-color: black; 
  position: absolute; 
  border-radius: 15px; 
} 
 
.focusBorder { 
  width: 1px; 
  height: 150px; 
  background-color: red; 
  position: absolute; 
  z-index: 1; 
  left: 75px; 
  border-radius: 15px; 
} 
  
.inputBlock { 
  position: absolute; 
  top:2px; 
  left:2px; 
  width: 146px; 
  height: 146px; 
  outline: none; 
  box-sizing: border-box; 
  border: 0px solid transparent; 
  z-index: 2; 
  border-radius: 13px; 
} 
 
.inputBlock:focus ~ #outblock2 { 
  width: 150px; 
  left: 0px; 
  transition: all 0.7s ease-in-out; 
}

<div class='outblock'> 
  <input type="text" class="inputBlock" placeholder="hello world"> 
  <div class="defaultBorder" id="outblock1"></div> 
  <div class="focusBorder" id="outblock2"></div> 
</div>