CodePen Embed - CSS 抖动效果


<input id="name" type="text" placeholder="输入英文" pattern="[A-Za-z]*"/>

input:invalid {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.4em red;
}

 @keyframes shake {
   0% { margin-left: 0rem; }
   25% { margin-left: 0.5rem; }
   75% { margin-left: -0.5rem; }
   100% { margin-left: 0rem; }
}

Run Pen

This Pen is owned by ManKeung on CodePen.

See more by @mankeung on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.