css弹幕制作
CSS弹幕制作方法
基础弹幕实现
使用CSS动画和绝对定位实现水平移动的弹幕效果。通过@keyframes定义弹幕从右向左移动的动画，将弹幕元素设置为绝对定位并应用动画。
.danmu {
position: absolute;
white-space: nowrap;
animation: move linear 10s;
color: white;
text-shadow: 1px 1px 2px black;
}
@keyframes move {
from {
transform: translateX(100vw);
}
to {
transform: translateX(-100%);
}
}随机位置生成
通过JavaScript动态生成弹幕元素并设置随机的垂直位置。使用Math.random()计算top值，确保弹幕分布在屏幕的不同高度。
function createDanmu(text) {
const danmu = document.createElement('div');
danmu.className = 'danmu';
danmu.textContent = text;
danmu.style.top = `${Math.random() * 80}vh`;
document.body.appendChild(danmu);
}弹幕速度和样式控制
为弹幕添加不同的速度和颜色样式。通过CSS变量或直接设置style属性来控制动画持续时间和颜色，实现多样化的弹幕效果。
.danmu.fast {
animation-duration: 5s;
}
.danmu.slow {
animation-duration: 15s;
}
.danmu.red {
color: #ff4d4f;
}弹幕池管理
使用数组存储弹幕元素并在动画结束后移除DOM节点。监听animationend事件清理已完成动画的弹幕，避免内存泄漏。
danmu.addEventListener('animationend', function() {
this.remove();
});响应式调整
通过CSS的vw单位和JavaScript的窗口大小监听实现响应式布局。确保弹幕在不同屏幕尺寸下都能正常显示和移动。
window.addEventListener('resize', function() {
// 重新计算弹幕位置
});高级优化技巧
使用CSS的will-change属性提升动画性能，对弹幕元素启用GPU加速。通过transform和opacity属性实现更流畅的动画效果。
.danmu {
will-change: transform;
backface-visibility: hidden;
}以上方法组合使用可以创建出流畅的CSS弹幕效果，适用于视频播放器、直播页面等场景。通过调整动画参数和样式可以实现不同风格的弹幕展示。
