CSS实现输入弹幕并发送且弹幕从页面左侧出现效果
时间: 2024-02-20 20:00:29 浏览: 19
可以通过CSS、JavaScript和HTML实现输入弹幕并发送,同时实现弹幕从页面左侧出现的效果。以下是一个简单的实现方式:
HTML代码:
```html
<div id="danmu-container"></div>
<form>
<input id="danmu-input" type="text" placeholder="输入弹幕">
<button id="send-button" type="submit">发送</button>
</form>
```
CSS代码:
```css
#danmu-container {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 100%;
overflow: hidden;
}
.danmu {
position: absolute;
font-size: 20px;
white-space: nowrap;
animation: danmu 10s linear;
}
@keyframes danmu {
from {
left: -100%;
}
to {
left: 100%;
}
}
```
JavaScript代码:
```javascript
function sendDanmu(content) {
var danmu = document.createElement('div');
danmu.className = 'danmu';
danmu.innerText = content;
document.getElementById('danmu-container').appendChild(danmu);
setTimeout(function() {
danmu.remove();
}, 10000);
}
var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
var input = document.getElementById('danmu-input');
var content = input.value.trim();
if (content) {
sendDanmu(content);
input.value = '';
}
});
```
使用`sendDanmu`函数来发送弹幕,将其与表单提交事件绑定,例如:
```javascript
var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
var input = document.getElementById('danmu-input');
var content = input.value.trim();
if (content) {
sendDanmu(content);
input.value = '';
}
});
```
这样就可以实现输入弹幕并发送,同时实现弹幕从页面左侧出现的效果了。