css 文字左右抖动效果

 

<template>
  <div class="box">
    <div class="shake shape">抖动特效交字11</div>
  </div>
</template>

<script setup></script>

<style scope>
.shape {
    margin: 50px;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid black;
 }


.shake:hover {
    animation: shakeAnimal 800ms ease-in-out;
}
@keyframes shakeAnimal { /* 水平抖动，核心代码 */
    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>