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

CSS与JS是前端开发中最重要的两个技术之一，二者配合使用可以实现许多酷炫的效果，比如文字弹幕。文字弹幕是一种在网页上添加滚动文本效果的方式，适用于直播、评论等场景。实现文字弹幕有多种方式，其中比较常...

CSS与JS是前端开发中最重要的两个技术之一，二者配合使用可以实现许多酷炫的效果，比如文字弹幕。文字弹幕是一种在网页上添加滚动文本效果的方式，适用于直播、评论等场景。

实现文字弹幕有多种方式，其中比较常见的是通过CSS3中的过渡效果和动画效果来实现。代码如下：

.barrage{
  position: absolute;
  display: inline-block;
  white-space: nowrap;
  color: #fff;
}
@keyframes move{
  100%{
    transform: translateX(-100%);
  }
} 

上述代码中的.barrage定义了弹幕的样式，通过position属性设为absolute可以使弹幕独立于页面其他元素，display属性设为inline-block和white-space属性设为nowrap可以保证弹幕在一行内滚动显示，color属性用于设置弹幕文本颜色。而@keyframes定义了弹幕的滚动动画效果，其中move为自定义动画名称，100%表示动画完成度。

实现文字弹幕还可以使用JS动态生成DOM结构来实现，比如使用setInterval定时器，每隔一段时间动态生成一个新的div元素，通过该元素的样式来控制弹幕的滚动和显示效果。关键代码如下：

setInterval(function(){
  var div = document.createElement('div');
  var text = document.createTextNode('弹幕内容');
  div.appendChild(text);
  document.body.appendChild(div);
  div.style.position = 'absolute';
  div.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';
  div.style.left = '100%';
  var endPos = -div.offsetWidth;
  var duration = Math.random() * 10000 + 10000;
  div.style.transition = 'all ' + duration + 'ms linear';
  div.style.left = endPos + 'px';
  setTimeout(function(){
    document.body.removeChild(div);
  }, duration);
}, 2000); 

上述代码中的setInterval用于定时生成新的弹幕元素，其中Math.floor(Math.random() * window.innerHeight)用于随机生成弹幕出现的位置，div.offsetWidth用于获取弹幕宽度来计算弹幕的结束位置，duration用于设置弹幕滚动的时间，setTimeout用于在弹幕滚动完毕后删除弹幕元素。

综上所述，CSS与JS可以结合实现文字弹幕效果，具体实现可以根据需求选择适合的方式。