使用css实现一个弹幕的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Danmu - 弹幕</title>
<style>
body {
background-color: #000;
overflow: hidden; /* 隐藏溢出,防止滚动条 */
}
.danmu-container {
position: relative;
width: 100%;
height: 300px; /* 设置弹幕容器的高度 */
overflow: hidden;
}
.danmu {
position: absolute;
white-space: nowrap; /* 防止文字换行 */
color: white;
font-size: 16px;
transition: transform 5s linear; /* 动画过渡效果,持续时间5秒,线性 */
}
/* 添加一些样式,让弹幕更好看 */
.danmu.positive {
color: lightgreen;
}
.danmu.negative {
color: lightcoral;
}
</style>
</head>
<body>
<div class="danmu-container" id="danmu-container"></div>
<script>
const danmuContainer = document.getElementById('danmu-container');
const danmuList = [
"Hello, world!",
"This is a danmu message.",
"Awesome!",
"Cool!",
"弹幕测试",
"你好世界!",
"666666",
"太棒了!",
"不好看", //negative example
"不喜欢" //negative example
];
function createDanmu() {
const danmu = document.createElement('div');
danmu.classList.add('danmu');
// 随机选择弹幕内容
const randomIndex = Math.floor(Math.random() * danmuList.length);
danmu.textContent = danmuList[randomIndex];
// 添加正面或负面样式
if (danmu.textContent.includes("不")) {
danmu.classList.add('negative');
} else {
danmu.classList.add('positive');
}
// 随机设置弹幕的垂直位置
const top = Math.random() * (danmuContainer.clientHeight - danmu.clientHeight);
danmu.style.top = top + 'px';
// 设置弹幕的初始位置在容器右侧
danmu.style.right = '-200px'; // 初始位置在屏幕外
danmuContainer.appendChild(danmu);
// 使用setTimeout模拟动画结束后的移除
setTimeout(() => {
danmu.remove();
}, 5000); // 5秒后移除
// 动画效果,将弹幕从右向左移动
setTimeout(() => { // 使用setTimeout避免transform属性立即生效
danmu.style.transform = `translateX(-${danmuContainer.clientWidth + danmu.clientWidth}px)`;
}, 0);
}
// 每隔一段时间创建一个新的弹幕
setInterval(createDanmu, 500); // 每500毫秒创建一个弹幕
</script>
</body>
</html>
关键点和改进说明:
overflow: hidden;
: 在body
和.danmu-container
上都使用了overflow: hidden
,防止弹幕超出容器范围以及出现滚动条。- 绝对定位: 使用
position: absolute;
将弹幕绝对定位在容器内。 white-space: nowrap;
: 防止弹幕文本换行。transition
: 使用transition: transform 5s linear;
实现弹幕的动画效果,使弹幕平滑地从右向左移动。5s
是动画持续时间,linear
表示线性过渡,速度均匀。- 动态创建弹幕: 使用 JavaScript 动态创建
div
元素作为弹幕,并设置其文本内容、位置和样式。 - 随机位置: 使用
Math.random()
随机生成弹幕的垂直位置。 - 动画: 通过设置
transform: translateX(-${danmuContainer.clientWidth + danmu.clientWidth}px);
使弹幕从右向左移动,