css实现一个提示文字的抖动效果

代码

<style>
.errtips {
	  color:#e40438
      animation-name: errtips;
      animation-duration: 0.5s;
    }
    @keyframes errtips {
      10% {
        transform: translateY(1px);
      }
      20% {
        transform: translateY(-1px);
      }
      30% {
        transform: translateY(1px);
      }
      40% {
        transform: translateY(-1px);
      }
      50% {
        transform: translateY(1px);
      }
      60% {
        transform: translateY(-1px);
      }
      70% {
        transform: translateY(1px);
      }
      80% {
        transform: translateY(-1px);
      }
      90% {
        transform: translateY(1px);
      }
      100% {
        transform: translateY(0);
      }
    }
</style>
<div>
    <p class="errtips">抖动效果</p>
  </div>

这里用的是 css的动画来做的，通过在不同进度改变translateY的值来实现，在以后的开发时可以用到表单的验证上。