文本字段轮廓颤动

文本字段轮廓颤动是一种用于增强用户界面交互体验的动画效果。它通常在输入框未被填充时展示一个灰色轮廓，当用户开始输入时，轮廓会微小地颤动，以此提醒用户有些信息需要输入。

实现方式

文本字段轮廓颤动的实现方式通常是基于 CSS 动画实现的。在输入框周围创建一个类似于轮廓的边框，并通过 CSS 进行样式设置。接着，为该边框应用一个简短的动画，使其轻微摆动。可以使用 CSS 动画库 中提供的类来实现这种动画效果。

以下是一个简单的 HTML 和 CSS 代码示例，展示了如何实现文本字段轮廓颤动：

<div class="form-group">
  <label for="inputField">Your Name</label>
  <input type="text" class="form-control" id="inputField" placeholder="Enter your name">
</div>

<style>
  .form-group {
    position: relative;
    margin-bottom: 1.5rem;
  }

  .form-group label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1rem;
    color: #999;
    pointer-events: none;
    transition: all 0.2s ease-out;
  }

  .form-group input.form-control {
    border: none;
    border-bottom: 2px solid #ccc;
    padding: 0.5rem 0;
    font-size: 1.25rem;
  }

  .form-group input:focus ~ label,
  .form-group input:not(:placeholder-shown) ~ label {
    top: -1rem;
    font-size: 0.9rem;
    color: #428bca;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.5);
  }

  .form-group input:focus ~ .border,
  .form-group input:not(:placeholder-shown) ~ .border {
    animation: border-shake 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }

  @keyframes border-shake {
    0% {
      transform: translateX(-3px) rotateZ(-6deg);
    }
    20% {
      transform: translateX(3px) rotateZ(6deg);
    }
    40% {
      transform: translateX(-3px) rotateZ(-3deg);
    }
    60% {
      transform: translateX(2px) rotateZ(3deg);
    }
    80% {
      transform: translateX(-1px) rotateZ(-1deg);
    }
    100% {
      transform: translateX(0) rotateZ(0);
    }
  }

  /* Add some additional styles to make things look nice */
  body {
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 1.5rem;
  }

  h1,
  h2 {
    font-weight: 700;
  }
</style>

结语

文本字段轮廓颤动是一种简单却有效的交互设计，对于提高用户体验和界面可用性有非常明显的作用。实现方式非常简单，只需要几行 HTML 和 CSS 代码就可以实现。