Question

我一直在为这个（看似很简单的）网站做一个简单的小改进，我决定寻求帮助。

我希望我的联系表单字段的轮廓在焦点上围绕输入区域进行动画和绘制，如在此视频中http://tinypic.com/r/ofrb4h/9

我找到了一种方法来制作svg的动画，但不是如何把它放在我的表格之上，而且我只是不确定这是否是最好的方法。

以下是html代码和CodePen：

<div class="container-div">
  <svg xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 444 501" class="blue">
    <path class="outline-path" id="outline"
          fill="none" stroke="teal" stroke-width="3"
          d="M 385.00,193.50
             C 404.00,195.75 406.25,228.00 385.25,230.75
               385.25,230.75 67.00,230.25 67.00,230.25
               46.50,228.75 45.25,197.25 67.25,193.25
               67.25,193.25 385.00,193.50 385.00,193.50 Z" />
  </svg>
</div>

<form class="contact-form">
    <div class="form-group">
      <p>Name:</p> <label for="name">Full Name</label><input type="text"     class="form-inline  name-input" name="name" id="name" placeholder="Cal     Critter"oninput="nameFunction()"></input>
      <br>
      <p>Email:</p> <label for="email">Email</label><input type="email"     class="form-inline  email-input" name="email" id="email"     placeholder="reachme@email.com" oninput="emailFunction()"></input>
      <br>
      <p>Rough Budget:</p> <div class="selectdiv"><label     for="budget">Budget</label><select name="budget" id="budget" class="budget-    input" >
          <option class="select-dropdown" value="Less Than $5,000"     selected>Less Than $5,000</option>
          <option class="select-dropdown" value="$5,000 - $20,000">$5,000     - $20,000</option>
          <option class="select-dropdown" value="$20,000 -     $50,000">$20,000 - $50,000</option>
          <option class="select-dropdown" value="$50,000 -     $100,000">$50,000 - $100,000</option>
          <option class="select-dropdown" value="$100,000 -     $500,000">$100,000 - $500,000</option>
          <option class="select-dropdown" value="More Than $500,000">More     Than $500,000</option>
          <option class="select-dropdown" value="?">?</option>
        </select>
        </div>
      <br>
      <p>Message:</p> <label for="message">Message</label><textarea     class="form-inline  message-input" name="message" id="message" rows="10"     cols="30" placeholder="Tell us a little about your project here..."     oninput="messageFunction()"></textarea>
    </div>
    <button class="" type="submit">SEND</button>
  </form>

https://codepen.io/AshleyMSherwood/pen/bREawx

我真的很感激任何建议

提前致谢！

Answer 1

要触发焦点效果，您可以使用此代码。

var inputBox = document.querySelector('input');
inputBox.addEventListener('focus', function(){
   document.querySelector('path').classList.add('outline-path');
   document.querySelector('.container-div').style.display = "block";
})

添加此代码以消除对'模糊'的影响。

inputBox.addEventListener('blur', function(){
   document.querySelector('.container-div').style.display = "none";
   document.querySelector('path').classList.remove('outline-path');
})

在焦点上绘制SVG形状的动画最简洁的方法是什么？

1 个答案: