用htmlcss写一个弹幕效果
时间: 2023-10-01 20:11:53 浏览: 88
该效果需要使用JavaScript来实现,以下是一个简单的弹幕效果示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>弹幕效果</title>
<meta charset="UTF-8">
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
#container div {
position: absolute;
top: 0;
font-size: 16px;
white-space: nowrap;
animation: move 10s linear;
animation-iteration-count: infinite;
opacity: 0;
}
@keyframes move {
0% {
transform: translateX(100%);
opacity: 0;
}
50% {
transform: translateX(-100%);
opacity: 1;
}
100% {
transform: translateX(-100%);
opacity: 0;
}
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var container = document.getElementById("container");
var messages = ["Hello", "World", "Lorem ipsum dolor sit amet", "consectetur adipiscing elit", "sed do eiusmod tempor incididunt", "ut labore et dolore magna aliqua", "Ut enim ad minim veniam", "quis nostrud exercitation ullamco", "laboris nisi ut aliquip ex ea commodo consequat"];
setInterval(function() {
var message = messages[Math.floor(Math.random() * messages.length)];
var div = document.createElement("div");
div.innerText = message;
container.appendChild(div);
setTimeout(function() {
div.remove();
}, 10000);
}, 1000);
</script>
</body>
</html>
```
CSS样式:
- `body` 元素设置了背景颜色、字体和隐藏滚动条
- `#container` 元素作为弹幕容器,设置了宽度、高度和隐藏溢出内容
- `#container div` 元素用于显示弹幕,设置了绝对位置、顶部位置、字体大小、禁止换行、动画效果、透明度
JavaScript代码:
- 首先获取弹幕容器 `#container` 的 DOM 元素
- 定义一个数组 `messages`,用于存储弹幕消息的内容
- 使用 `setInterval` 函数定时向弹幕容器中添加新的弹幕消息
- 在每次添加弹幕消息时,从 `messages` 数组中随机选择一条消息,并创建一个新的 `div` 元素来显示该消息
- 将新的弹幕消息添加到弹幕容器中,并设置一个定时器在 10 秒后将其从容器中移除
该效果的具体实现细节可以根据需要进行调整和改进。