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>
相关推荐
BillKu12 小时前
vue3 样式 css、less、scss、sass 的说明
css·less·sass·scss
乖女子@@@14 小时前
css3新增-网格Grid布局
前端·css·css3
Sapphire~17 小时前
重学前端013 --- 响应式网页设计 CSS网格布局
前端·css
二十雨辰18 小时前
歌词滚动效果
前端·css
dllmayday1 天前
FontForge 手工扩展 iconfont.ttf
css·qt
BUG创建者1 天前
html获取16个随机颜色并不重复
css·html·css3
面向星辰1 天前
html中css的四种定位方式
前端·css·html
Async Cipher1 天前
CSS 权重(优先级规则)
前端·css
草字2 天前
css flex布局,设置flex-wrap:wrap换行后,如何保证子节点被内容撑高后,每一行的子节点高度一致。
前端·javascript·css
在芜湖工作的二狗子2 天前
如何用AI Agent提高程序员写作效率
css