html+css 实现弹幕滚动效果
时间: 2023-05-17 11:02:40 浏览: 412
可以使用 CSS3 的动画实现弹幕滚动效果,具体实现方法可以参考以下代码:
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%);
}
}
```
这段代码中,`.danmu` 类设置了绝对定位,`top` 属性设置为 0,`left` 属性设置为 100%,使弹幕从右侧进入。`white-space: nowrap` 属性使文本不换行。`animation` 属性设置了动画名称、持续时间、动画速度和动画次数。
`@keyframes` 规则定义了动画的关键帧,从右侧进入到左侧出去。`transform: translateX()` 属性使元素在水平方向上移动。
当弹幕滚动到左侧时,会重新从右侧进入,形成无限滚动的效果。
相关问题
js+css实现弹幕效果
可以使用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属性来控制弹幕滚动的速度。
写一个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` 函数的参数来显示不同的文本。