css制作弹幕

使用CSS制作弹幕效果

弹幕效果可以通过CSS动画和HTML结合实现，核心是利用@keyframes控制元素从右向左移动。以下是一个基础实现方案：

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

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

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

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

多轨道弹幕实现

通过设置不同动画延迟和轨道位置，可实现多条弹幕不重叠：

.danmu:nth-child(1) { top: 20%; animation-delay: 0s; }
.danmu:nth-child(2) { top: 40%; animation-delay: 2s; }
.danmu:nth-child(3) { top: 60%; animation-delay: 4s; }

随机弹幕样式增强

使用CSS变量和随机函数增强视觉效果：

.danmu {
  --hue: calc(var(--rand) * 360);
  color: hsl(var(--hue), 100%, 70%);
  text-shadow: 0 0 5px currentColor;
  animation-duration: calc(8s + var(--rand) * 4s);
}

/* 通过JavaScript动态设置--rand变量 */

性能优化建议

使用will-change属性提升动画性能：

.danmu {
  will-change: transform;
}

考虑使用transform代替left属性进行位移，后者会触发重排：

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

高级弹幕特性

实现碰撞检测需要JavaScript配合，但纯CSS可通过以下方式模拟：

.danmu {
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

通过媒体查询调整移动速度：

@media (max-width: 768px) {
  @keyframes move {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
  }
}