Эта статья взята из «Блога Синь Тан».«Эффекты поля ввода анимационного дизайна», больше статей оGithub
Добро пожаловать в Exchange и Star
Список спецэффектов
Динамическая линия:
динамическая граница:
Динамическая линия
визуализация
Принцип и Кодекс
:beforeа также:afterПсевдоэлементы определяют содержимое до и после содержимого дерева документа элемента. из-заinputМетки не являются контейнерами для вставляемого содержимого. Таким образом, подчеркивание не может быть достигнуто с помощью псевдоэлемента. Требуется помощь других узлов dom.
<div>
<input type="text" />
<span></span>
</div>
обернутый родительский элементdivдолжен быть установлен наinline-block, иначе ширина заполнит экран.
div {
position: relative;
display: inline-block;
}
inputМетки должны отключить стили по умолчанию:
input {
outline: none;
border: none;
background: #fafafa;
}
spanЭтикетка реализует динамику «слева и справа», и ее необходимо изменить.transform-originнаправление. Чтобы избежать перерисовки перерисовки, передайтеscaleXДля достижения визуального эффекта изменения ширины.
input ~ span {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background-color: #262626;
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.3s ease-in-out;
}
input:focus ~ span {
transform: scaleX(1);
transform-origin: left center;
}
динамическая граница
визуализация
Принцип и Кодекс
Как показано на динамическом изображении, есть 4 границы. Итак, кромеinputКроме элемента нужно подготовить еще 4 домика. Чтобы упростить позиционирование, вложите родительский элемент.
<div>
<input type="text">
<span class="bottom"></span>
<span class="right"></span>
<span class="top"></span>
<span>
</div>
Подобно «динамике линий», стили ввода и div в основном одинаковы. Чтобы выглядеть хорошо, измените свойство padding.
div {
position: relative;
display: inline-block;
padding: 3px;
}
input {
outline: none;
border: none;
background: #fafafa;
padding: 3px;
}
Для остальных 4 элементов span их свойства позиции, свойства анимации и цвета одинаковы:
.bottom,
.top,
.left,
.right {
position: absolute;
background-color: #262626;
transition: transform 0.1s ease-in-out;
}
Для .bottom и .top направление изменения — горизонтальное, для .left и .right — вертикальное.
.bottom,
.top {
left: 0;
right: 0;
height: 1px;
transform: scaleX(0);
}
.left,
.right {
top: 0;
bottom: 0;
width: 1px;
transform: scaleY(0);
}
Ниже приводится эффект от работы с задержкой. На динамическом графике анимация меняется в порядке снизу, справа, сверху и слева. с помощьюtransition-delayсвойство для реализации задержки анимации.
.bottom {
bottom: 0;
transform-origin: right center;
}
input:focus ~ .bottom {
transform: scaleX(1);
transform-origin: left center;
}
.top {
top: 0;
transform-origin: left center;
transition-delay: 0.2s;
}
input:focus ~ .top {
transform: scaleX(1);
transform-origin: right center;
}
.right {
transform-origin: top center;
right: 0;
transition-delay: 0.1s;
}
input:focus ~ .right {
transform: scaleY(1);
transform-origin: bottom center;
}
.left {
left: 0;
transform-origin: bottom center;
transition-delay: 0.3s;
}
input:focus ~ .left {
transform: scaleY(1);
transform-origin: top center;
}