js+css生成一个可以发弹幕的页面

可以使用HTML5的<canvas>标签和JavaScript来实现一个可以发弹幕的页面。具体实现方法可以参考以下链接：

https://www.cnblogs.com/zhuzhenwei/p/10580232.html

https://www.jianshu.com/p/5b8c7c1f1b1d

需要注意的是，弹幕的生成和显示需要使用定时器和动画效果来实现。同时，为了保证弹幕的可读性，需要对弹幕的颜色、字体大小、速度等进行调整。

相关问题

js+css实现弹幕效果

可以使用CSS3的animation属性和JavaScript的DOM操作来实现弹幕效果。具体实现方式可以参考以下代码：

HTML代码：

<div id="danmu-container"></div>

CSS代码：

#danmu-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

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

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

JavaScript代码：

function createDanmu(text) {
  var danmu = document.createElement('div');
  danmu.className = 'danmu';
  danmu.innerText = text;
  danmu.style.top = Math.floor(Math.random() * 180) + 'px';
  document.getElementById('danmu-container').appendChild(danmu);
  setTimeout(function() {
    danmu.parentNode.removeChild(danmu);
  }, 10000);
}

setInterval(function() {
  var text = '这是一条弹幕';
  createDanmu(text);
}, 1000);

以上代码实现了每秒钟生成一条随机位置的弹幕，并在10秒后自动消失。可以根据需要调整弹幕的样式和动画效果。

CSS实现页面左侧出现弹幕效果

可以使用CSS实现页面左侧出现弹幕的效果。以下是一个简单的实现方法：

1. 在HTML中，添加一个容器元素，用于显示弹幕：

<div id="danmaku-container"></div>

2. 在CSS中，使用以下代码来控制弹幕容器的位置和样式：

#danmaku-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 9999;
}

在上面的代码中，我们将弹幕容器设置为fixed定位，并将其宽度设置为页面宽度的50%，高度设置为100%。同时，我们使用`overflow: hidden`来隐藏弹幕容器中超出部分的内容，以保证弹幕的显示效果。最后，我们将弹幕容器的层级设置为最高，以保证其始终在页面顶部显示。

3. 在CSS中，使用以下代码来定义弹幕的样式：

.danmaku-item {
  position: absolute;
  top: 0;
  left: 50%;
  white-space: nowrap;
  font-size: 16px;
  color: #fff;
  animation: move linear forwards;
  animation-duration: 10s;
}

@keyframes move {
  from { left: 100%; }
  to { left: -100%; }
}

在上面的代码中，我们定义了一个`.danmaku-item`类，用于表示弹幕元素。我们将其定位到弹幕容器的右侧，使用`white-space: nowrap`来防止文字换行，并设置了弹幕的字体大小和颜色。同时，我们使用CSS动画来实现弹幕从右侧进入并向左移动的效果，持续时间为10秒。

4. 在JavaScript中，使用以下代码来动态生成和控制弹幕元素的出现和消失时机：

$(document).ready(function() {
  setInterval(function() {
    var danmaku = $("<div class='danmaku-item'>这是一条弹幕</div>");
    $("#danmaku-container").append(danmaku);
    setTimeout(function() {
      danmaku.remove();
    }, 10000);
  }, 5000);
});

在上面的代码中，我们使用`setInterval`来定期生成弹幕元素。我们首先创建一个新的弹幕元素，将其添加到弹幕容器中，并使用`setTimeout`来控制弹幕元素的显示时长。当弹幕元素显示完毕后，我们将其从弹幕容器中移除，以保证页面的性能和流畅性。

通过上述代码，我们可以实现一个简单的页面左侧出现弹幕的效果。需要注意的是，弹幕的样式和出现时间可以根据实际需求进行调整和修改。