<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>