Как можно реализовать анимацию волны по нижней границы инпута?

Question

Как можно реализовать анимацию волны по нижней границы инпута? Мне нужно чтобы при клике на инпут ввода текста, по его нижней границе "прошла волна".

Вот как у на этом сайте: https://www.cloudmill.ru/contacts/

Меня интересует самый простой, лаконичный способ реализовать это.

Благодарю за внимание.

Answer 1

Вот максимально упрощенный способ сделать это так, как в вашем примере:

.form {
    position: relative;
    color: #fff;
    overflow: hidden;
}

.input-field {
    border: none;
    outline: none;
    display: block;
    padding: 20px 10px;
    font-size: 30px;
    background: transparent;
    color: #000;
}

.graphic {
    position: absolute;
    top: 0;
    left: 0;
    fill: none;
    stroke: #ff6f61;
    pointer-events: none;
    transition: transform 1s, stroke 1s;
    transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}

.input-field:focus ~ .graphic {
    stroke: #ff6f61;
    transform: translate3d(-66.6%, 0, 0);
}

<div class="form">
  <input class="input-field" id="name" type="text" autocomplete="off" value="">
  <svg class="graphic" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
    <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path>
  </svg>
</div>

БЛОГ НА HUSL

Как можно реализовать анимацию волны по нижней границы инпута?

Ответы (1 шт):