css弹幕制作

CSS弹幕制作方法

使用CSS实现弹幕效果可以通过动画和定位技术完成。以下是具体实现步骤：

HTML结构

<div class="danmu-container">
  <div class="danmu">这是一条弹幕</div>
  <div class="danmu">另一条弹幕</div>
</div>

CSS样式

.danmu-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background-color: #000;
}

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

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

弹幕高级功能实现

随机高度

.danmu {
  top: calc(100% * random());
}

不同速度

.danmu {
  animation-duration: calc(8s + random() * 4s);
}

多行弹幕

.danmu:nth-child(1) { top: 10%; }
.danmu:nth-child(2) { top: 30%; }
.danmu:nth-child(3) { top: 50%; }

动态添加弹幕

通过JavaScript动态添加弹幕元素：

function addDanmu(text) {
  const danmu = document.createElement('div');
  danmu.className = 'danmu';
  danmu.textContent = text;
  danmu.style.top = `${Math.random() * 100}%`;
  danmu.style.animationDuration = `${8 + Math.random() * 4}s`;
  document.querySelector('.danmu-container').appendChild(danmu);

  // 动画结束后移除元素
  danmu.addEventListener('animationend', function() {
    danmu.remove();
  });
}

弹幕样式优化

添加阴影效果

.danmu {
  text-shadow: 1px 1px 2px #000;
}

不同颜色弹幕

.danmu.color1 { color: #ff0000; }
.danmu.color2 { color: #00ff00; }
.danmu.color3 { color: #0000ff; }

弹幕边框

.danmu {
  padding: 2px 8px;
  border-radius: 10px;
  background-color: rgba(0,0,0,0.5);
}

这些方法组合使用可以创建出丰富多彩的CSS弹幕效果，根据实际需求调整参数即可实现不同风格的弹幕展示。