主页 / 问题 / 1263817
Accepted
Alexei
Asked:2022-03-30 18:47:09 +0000 UTC2022-03-30 18:47:09 +0000 UTC

如何沿输入的底部边框实现波浪动画？

  • 772

如何沿输入的底部边框实现波浪动画？我需要当我点击文本输入时，一个波浪沿着它的下边界通过。

以下是本网站的内容： https ://www.cloudmill.ru/contacts/

我对实现这一点的最简单、简洁的方法感兴趣。

感谢您的关注。

javascript

1 个回答

  1. Best Answer

    这是您的示例中最简化的方法：

    .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>

    • 5

相关问题