js+css实现弹幕效果

可以使用CSS3的animation属性和JavaScript的DOM操作来实现弹幕效果。具体实现方式可以参考以下代码：

HTML代码：

<div id="danmu-container"></div>

CSS代码：

#danmu-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.danmu {
  position: absolute;
  top: 0;
  white-space: nowrap;
  font-size: 16px;
  color: #fff;
  animation: danmu 10s linear;
}

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

JavaScript代码：

function createDanmu(text) {
  var danmu = document.createElement('div');
  danmu.className = 'danmu';
  danmu.innerText = text;
  danmu.style.top = Math.floor(Math.random() * 180) + 'px';
  document.getElementById('danmu-container').appendChild(danmu);
  setTimeout(function() {
    danmu.parentNode.removeChild(danmu);
  }, 10000);
}

setInterval(function() {
  var text = '这是一条弹幕';
  createDanmu(text);
}, 1000);

以上代码实现了每秒钟生成一条随机位置的弹幕，并在10秒后自动消失。可以根据需要调整弹幕的样式和动画效果。