css3实现页面元素抖动效果

html

<div id="shake" class="shape">horizontal shakediv>
1

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)
  })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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);
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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