js怎样实现文字抖动效果 4种抖动动画让文本更具表现力

<style>
  .shake {
    position: relative; /* 关键：设置相对定位，让抖动在其原始位置上进行 */
  }
</style>

<span id="shakeText" class="shake">抖动的文字</span>

<script>
  const shakeText = document.getElementById('shakeText');

  function shake() {
    const randomX = Math.floor(Math.random() * 5) - 2; // 左右抖动范围：-2px ~ 2px
    const randomY = Math.floor(Math.random() * 5) - 2; // 上下抖动范围：-2px ~ 2px

    shakeText.style.transform = `translate(${randomX}px, ${randomY}px)`;

    // 50毫秒后停止抖动，归位
    setTimeout(() => {
      shakeText.style.transform = 'translate(0, 0)';
    }, 50);
  }

  setInterval(shake, 100); // 每100毫秒抖动一次
</script>

<style>
  .shake {
    animation: shakeAnimation 0.5s infinite; /* 动画持续0.5秒，无限循环 */
  }

  @keyframes shakeAnimation {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }

  .stop-shake {
    animation: none; /* 停止动画 */
  }
</style>

<span id="shakeText" class="shake">抖动的文字</span>

<button id="toggleShake">停止抖动</button>

<script>
  const shakeText = document.getElementById('shakeText');
  const toggleShakeButton = document.getElementById('toggleShake');

  toggleShakeButton.addEventListener('click', () => {
    if (shakeText.classList.contains('shake')) {
      shakeText.classList.remove('shake');
      shakeText.classList.add('stop-shake');
      toggleShakeButton.textContent = '开始抖动';
    } else {
      shakeText.classList.remove('stop-shake');
      shakeText.classList.add('shake');
      toggleShakeButton.textContent = '停止抖动';
    }
  });
</script>

<style>
  .shake {
    position: relative;
    display: inline-block; /* 确保文字占据空间 */
  }
</style>

<span id="shakeText" class="shake">抖动的文字</span>

<script>
  const shakeText = document.getElementById('shakeText');

  document.addEventListener('mousemove', (event) => {
    const mouseX = event.clientX;
    const mouseY = event.clientY;

    const textRect = shakeText.getBoundingClientRect();
    const textCenterX = textRect.left + textRect.width / 2;
    const textCenterY = textRect.top + textRect.height / 2;

    const distanceX = mouseX - textCenterX;
    const distanceY = mouseY - textCenterY;

    // 根据距离计算抖动幅度，距离越大，抖动越厉害
    const shakeAmount = Math.sqrt(distanceX * distanceX + distanceY * distanceY) / 50; // 调整除数控制抖动幅度

    const randomX = Math.floor(Math.random() * shakeAmount) - shakeAmount / 2;
    const randomY = Math.floor(Math.random() * shakeAmount) - shakeAmount / 2;

    shakeText.style.transform = `translate(${randomX}px, ${randomY}px)`;

    // 稍微延迟一下，避免抖动过于剧烈
    setTimeout(() => {
      shakeText.style.transform = 'translate(0, 0)';
    }, 20);
  });
</script>