使div在较小设备上移动的打字机

<div class="typing-effect">Hello World</div>

.typing-effect {
  white-space: nowrap;
  overflow: hidden;
  animation: typing 8s steps(12) infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

window.addEventListener('resize', function() {
  moveDiv();
});

function moveDiv() {
  var windowWidth = window.innerWidth;
  var divWidth = document.querySelector('.typing-effect').offsetWidth;

  if (windowWidth < divWidth) {
    var maxTranslateX = windowWidth - divWidth;
    var randomTranslateX = Math.floor(Math.random() * (maxTranslateX + 1));
    document.querySelector('.typing-effect').style.transform = 'translateX(' + randomTranslateX + 'px)';
  } else {
    document.querySelector('.typing-effect').style.transform = 'none';
  }
}

// 初始加载时调用一次
moveDiv();