用js和css实现弹幕效果

可以使用CSS3的animation属性和JavaScript的DOM操作来实现弹幕效果。首先，使用CSS3的animation属性定义弹幕的动画效果，然后使用JavaScript动态创建弹幕元素，并设置其样式和动画属性。具体实现方法可以参考以下代码：

CSS代码：

.bullet {
position: absolute;
top: 0;
white-space: nowrap;
animation: bulletMove 10s linear;
}

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

JavaScript代码：

// 创建弹幕元素
var bullet = document.createElement('div');
bullet.className = 'bullet';
bullet.textContent = '这是一条弹幕';

// 设置弹幕样式
bullet.style.color = '#fff';
bullet.style.fontSize = '16px';
bullet.style.left = '100%';
bullet.style.top = Math.floor(Math.random() * window.innerHeight) + 'px';

// 将弹幕添加到页面中
document.body.appendChild(bullet);

// 监听弹幕动画结束事件，结束后移除弹幕元素
bullet.addEventListener('animationend', function() {
document.body.removeChild(bullet);
});