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>
相关推荐
像风一样自由202011 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css
拾光拾趣录13 小时前
HTML行内元素与块级元素
前端·css·html
奶丝兔蜜柚14 小时前
物理像素&逻辑像素&DPR
css
还是大剑师兰特20 小时前
CSS面试题及详细答案140道之(41-60)
前端·css·大剑师·css面试·css示例
精神小伙2号21 小时前
css position
前端·css·html
PanZonghui1 天前
移动端适配全景指南:从原理到实战的完整解决方案
前端·javascript·css
PanZonghui1 天前
告别布局困惑:彻底搞懂CSS标准盒模型与IE盒模型
前端·css
qq_589568101 天前
javaweb学习开发代码_HTML-CSS-JS
前端·javascript·css·javaweb
北北~Simple2 天前
css 如何实现大屏4个占位 中屏2个 小屏幕1个
前端·css
han_2 天前
CSS关键字:initial、revert、unset傻傻分不清
前端·css·html