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>
相关推荐
浪裡遊36 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
拾光拾趣录2 小时前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
Codebee2 小时前
OneCode图生代码技术深度解析:从可视化设计到注解驱动实现的全链路架构
css·人工智能·算法
zhanshuo2 小时前
i18next + 原生JS 双引擎:打造前端多语言系统最佳实践
前端·javascript·css
十盒半价3 小时前
前端性能优化避坑指南:从回流重绘到页面渲染全解析
前端·css·trae
青皮桔16 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺16 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
牧杉-惊蛰19 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
哎呦你好20 小时前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
islandzzzz21 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html