[分享]css与js文字弹幕效果

CSS与JS都可以实现文字弹幕效果，本文将分别介绍它们的实现方法。

//CSS实现文字弹幕效果  
.barrage {
  position: absolute;
  top: 50%;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(0, -50%);
  animation: move 5s linear infinite;
}

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

CSS实现文字弹幕效果主要是利用position:absolute;将弹幕定位到页面的中央，然后使用animation来控制弹幕的运动方式。关键是利用transform属性来实现弹幕的水平运动。

//JS实现文字弹幕效果
const barrageBox = document.querySelector('.barrage-box');
const input = document.querySelector('.text-input');
const btn = document.querySelector('.btn');

btn.addEventListener('click', () => {
  const barrage = document.createElement('span');
  barrage.classList.add('barrage');
  barrage.innerText = input.value;
  barrageBox.appendChild(barrage);
  animateBarrage(barrage);
});

function animateBarrage(node) {
  const random = Math.floor(Math.random() * 3 - 1);
  const duration = 5000 + random * 1000;
  const distance = window.innerWidth + 100 + node.offsetWidth;
  const randomY = Math.floor(Math.random() * window.innerHeight);
  node.style.top = `${randomY}px`;
  node.style.transition = `transform ${duration}ms linear`;
  node.style.transform = `translateX(-${distance}px)`;
  node.addEventListener('transitionend', () => {
    node.remove();
  });
}

JS实现文字弹幕效果主要是利用DOM操作动态添加弹幕节点，并且使用CSS的transform属性来控制弹幕的运动方式。关键是使用transition属性来实现弹幕的运动轨迹和持续时间，以及transitionend事件来控制弹幕节点的移除。