抖动效果

鼠标移上去触发抖动

 <div class="shape shake">鼠标移上去抖动</div>
 <style scoped>
 .shape {
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid red;
        }
 .shake:hover {
            animation: shake 800ms ease-in-out;
        }
  @keyframes shake { 
          /* 水平抖动，核心代码 */
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(+2px, 0, 0); }
            30%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(+4px, 0, 0); }
            50% { transform: translate3d(-4px, 0, 0); }
        }
</style>

点击触发抖动废话不多说直接代码：

 <div :class="[this.floft?'shape shake' :'shape']">抖动</div>
 <button @click="shake">点击</button>``
 shake:function(){
        this.floft=true;
				setTimeout(()=>{ 
          this.floft=false
        }, 800)
    }`