用JS+CSS打造你自己的弹幕王国，让网页动起来！

这是一个使用JavaScript和CSS创建弹幕王国的简单示例。这里只展示核心的JavaScript代码，CSS代码将会在这个例子中直接内联给出。

// 获取弹幕容器和按钮
const banner = document.getElementById('banner');
const button = document.getElementById('button');
 
// 弹幕生成函数
function createBalloon() {
  const balloon = document.createElement('div');
  balloon.classList.add('balloon');
  
  // 随机大小和颜色
  balloon.style.width = `${Math.random() * 100 + 50}px`;
  balloon.style.height = `${Math.random() * 50 + 20}px`;
  balloon.style.backgroundColor = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
  
  // 随机上升速度
  balloon.style.animationDuration = `${Math.random() * 2 + 2}s`;
  
  // 将弹幕添加到弹幕容器中
  banner.appendChild(balloon);
  
  // 3秒后移除弹幕
  setTimeout(() => balloon.remove(), 3000);
}
 
// 按钮点击事件监听
button.addEventListener('click', createBalloon);

以上代码中，createBalloon函数会创建一个新的弹幕元素，并给它设置随机的尺寸和颜色，以及随机的上升动画时长。然后将其添加到弹幕容器中，并在3秒后将其移除。通过点击按钮，触发这个函数，实现弹幕的生成和消失。