css 文字左右抖动效果

html 复制代码
<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>
相关推荐
到底起什么网名才能不重名6 小时前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
sunbyte8 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
码哥DFS11 小时前
Flex布局原理
前端·css·css3
小飞悟14 小时前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
晴殇i16 小时前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
Liudef061 天前
2048小游戏实现
javascript·css·css3
小桥风满袖1 天前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
Hilaku1 天前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
每天开心1 天前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
撰卢1 天前
如何提高网站加载速度速度
前端·javascript·css·html