js+css实现弹幕效果 
时间: 2023-05-15 14:04:47 浏览: 27
可以使用CSS3的animation和@keyframes属性来实现弹幕效果,具体实现方法可以参考以下代码:
HTML:
```
<div class="danmu">这是一条弹幕</div>
```
CSS:
```
.danmu {
position: absolute;
top: 0;
left: 100%;
white-space: nowrap;
animation: danmu 10s linear infinite;
}
@keyframes danmu {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
```
这段代码会让弹幕从右侧进入屏幕,沿着屏幕横向滚动,直到离开屏幕左侧。可以通过调整animation的duration属性来控制弹幕滚动的速度。
相关问题
CSS+Javascrip实现弹幕的效果
CSS和JavaScript都可以实现弹幕效果,下面是其中一种实现方式:
CSS实现:
1. 定义一个弹幕容器,设置宽度和高度,并设置overflow为hidden,保证弹幕在容器内滚动。
```css
.barrage-container {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
```
2. 定义弹幕样式,包括字体大小、颜色、位置、动画等。
```css
.barrage-item {
position: absolute;
font-size: 16px;
color: #fff;
white-space: nowrap;
animation: move 10s linear;
}
@keyframes move {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
```
JavaScript实现:
1. 获取弹幕容器和弹幕数据,创建弹幕元素并添加到容器中。
```javascript
const container = document.querySelector('.barrage-container');
const data = [
{ text: '弹幕1', time: 1 },
{ text: '弹幕2', time: 2 },
{ text: '弹幕3', time: 3 },
];
data.forEach(item => {
const div = document.createElement('div');
div.innerText = item.text;
div.className = 'barrage-item';
div.style.top = Math.floor(Math.random() * container.clientHeight) + 'px';
div.style.animationDelay = item.time + 's';
container.appendChild(div);
});
```
2. 监听弹幕容器的动画结束事件,将弹幕元素从容器中移除。
```javascript
container.addEventListener('animationend', event => {
if (event.target.classList.contains('barrage-item')) {
container.removeChild(event.target);
}
});
```
通过以上代码实现,可以实现一个简单的弹幕效果。
写一个html+css+js代码实现弹幕效果
以下是一个简单的实现弹幕效果的 HTML、CSS、JavaScript 代码:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹幕效果</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
color: white;
font-size: 24px;
font-family: Arial, sans-serif;
}
#danmu {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.danmu-item {
position: absolute;
white-space: nowrap;
pointer-events: auto;
}
</style>
</head>
<body>
<div id="danmu"></div>
<script src="danmu.js"></script>
</body>
</html>
```
CSS 代码:
```
.danmu-item {
animation: danmu 10s linear;
}
@keyframes danmu {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
```
JavaScript 代码:
```
var danmu = document.getElementById('danmu');
function createDanmu(text) {
var item = document.createElement('div');
item.className = 'danmu-item';
item.innerText = text;
item.style.top = Math.floor(Math.random() * (danmu.clientHeight - item.clientHeight)) + 'px';
danmu.appendChild(item);
setTimeout(function() {
item.remove();
}, 10000);
}
setInterval(function() {
createDanmu('这是一条弹幕');
}, 1000);
```
这段代码会在页面上创建一个全屏的黑色背景,并在页面上方不断滚动显示“这是一条弹幕”的文本。可以通过修改 `createDanmu` 函数的参数来显示不同的文本。
相关推荐











