首页 前端知识 css3实现页面元素抖动效果

css3实现页面元素抖动效果

2024-02-23 11:02:53 前端知识 前端哥 473 446 我要收藏

html

<div id="shake" class="shape">horizontal shake</div>

js(vue3)

  function shake(elemId) {
    const elem = document.getElementById(elemId)
    console.log('获取el', elem)

    if (elem) {
      elem.classList.add('shake')
      setTimeout(() => {
        elem.classList.remove('shake')
      }, 800)
    }
  }

  onMounted(() => {
    setTimeout(() => {
      console.log('进来settimeout')
      shake('shake')
    }, 5000)
  })

css

  .shape {
    margin: 50px;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid black;
  }
  .shake {
    animation: shake 800ms ease-in-out;
  }
  @keyframes shake {
    /* 水平抖动,核心代码 */
    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);
    }
  }

参考链接:https://juejin.cn/post/6957517187049324552

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2574.html
标签
评论
发布的文章

程序员的中秋节

2024-03-09 09:03:01

js中几种追加元素的方法

2024-03-08 10:03:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!