当前位置：首页 > CSS

css制作弹幕

2026-02-27 08:22:52CSS

CSS制作弹幕效果

弹幕效果可以通过CSS动画和HTML结合实现，以下是一个完整的实现方法：

HTML结构

创建一个包含弹幕内容的容器：

css制作弹幕

<div class="danmu-container">
  <div class="danmu">第一条弹幕</div>
  <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;
  white-space: nowrap;
  color: #fff;
  font-size: 16px;
  text-shadow: 1px 1px 2px #000;
  animation: danmu-move 10s linear;
}

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

随机位置

通过JavaScript为每条弹幕设置不同的垂直位置：

css制作弹幕

document.querySelectorAll('.danmu').forEach(el => {
  const top = Math.random() * 250;
  el.style.top = `${top}px`;
});

高级优化

增加弹幕颜色和速度变化：

.danmu:nth-child(3n) {
  color: #ff0;
}

.danmu:nth-child(3n+1) {
  color: #f0f;
}

.danmu:nth-child(3n+2) {
  animation-duration: 8s;
}

动态添加弹幕

使用JavaScript动态添加新弹幕：

function addDanmu(text) {
  const container = document.querySelector('.danmu-container');
  const danmu = document.createElement('div');
  danmu.className = 'danmu';
  danmu.textContent = text;
  danmu.style.top = `${Math.random() * 250}px`;
  container.appendChild(danmu);

  setTimeout(() => {
    danmu.remove();
  }, 10000);
}