js+css实现弹幕效果
时间: 2023-05-21 09:06:55 浏览: 184
要实现弹幕效果,可以使用CSS3的动画效果和JavaScript的DOM操作。下面是一个简单的示例代码:
```HTML
<!DOCTYPE html>
<html>
<head>
<title>弹幕示例</title>
<style type="text/css">
.bullet {
position: absolute;
top: 0;
font-size: 16px;
color: #fff;
background-color: red;
padding: 6px 12px;
border-radius: 20px;
white-space: nowrap;
animation: bullet 8s linear infinite;
}
@keyframes bullet {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
<script type="text/javascript">
window.onload = function() {
// 创建一个弹幕元素
function createBullet(text) {
var bullet = document.createElement('div');
bullet.className = 'bullet';
bullet.innerText = text;
document.body.appendChild(bullet);
setTimeout(function() {
document.body.removeChild(bullet);
}, 8000);
}
// 发送弹幕
document.getElementById('send').addEventListener('click', function() {
var text = document.getElementById('text').value;
if(text) {
createBullet(text);
document.getElementById('text').value = '';
}
});
}
</script>
</head>
<body>
<input type="text" id="text" placeholder="请输入内容">
<button id="send">发送</button>
</body>
</html>
```
这段代码使用了CSS3的动画和JavaScript的DOM操作来实现弹幕效果。具体来说,创建了一个类名为“bullet”的div元素,并给它添加了弹幕的样式,然后定义了一个名为“bullet”的动画,将弹幕从右侧滑动到左侧。页面加载完成后,创建了一个“createBullet()”函数,用于创建弹幕元素并添加到页面中,同时使用setTimeout()函数删除弹幕元素。最后,使用addEventListener()函数来监听发送按钮的点击事件,执行createBullet()函数创建新的弹幕元素。
阅读全文