js网页特效飘动

<div class="drifting-element">飘动元素</div>

.drifting-element {
  position: absolute;
  padding: 10px;
  background-color: #f00;
  color: white;
  animation: drift linear infinite;
}

@keyframes drift {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

document.addEventListener('DOMContentLoaded', function() {
  const element = document.querySelector('.drifting-element');
  let direction = 1; // 1 for right, -1 for left

  setInterval(() => {
    const currentPos = parseInt(element.style.left || 0, 10);
    element.style.left = `${currentPos + direction}px`;

    if (currentPos > window.innerWidth) {
      direction = -1;
    } else if (currentPos < -element.offsetWidth) {
      direction = 1;
    }
  }, 20);
});