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