html网页弹幕特效

### 实现HTML网页中的弹幕特效

为了创建一个具有弹幕效果的HTML页面，可以利用JavaScript和CSS来控制文本动画。下面是一个简单而有效的实现方法。

#### HTML结构定义
首先，在HTML文件中设置基本框架并预留用于显示弹幕消息的空间：

<div id="barrage-container"></div>
<input type="text" id="messageInput"/>
<button onclick="addBarrage()">发送</button>

此部分提供了输入框让用户能够提交想要展示的信息以及按钮触发事件[^1]。

#### CSS样式设计
接着通过CSS为这些即将移动的消息设定外观属性，比如字体大小、颜色等，并准备好了它们将要遵循的路径规则：

#barrage-container {
    position: relative;
    width: 100%;
    height: 300px; /* 可调整 */
    overflow: hidden;
}

.barrage-item {
    position: absolute;
    top: random(0, 80); /* 随机高度 */
    right: -200px;
    font-size: 24px;
    color: white;
    background-color: rgba(0, 0, 0, .7);
    padding: 5px 10px;
    border-radius: 5px;
}

这里设置了容器尺寸与溢出隐藏特性以防止超出边界的内容被看见；对于每条独立的评论，则赋予绝对定位以便于后续操作其位置变化。

#### JavaScript逻辑编写
最后借助JavaScript完成核心功能——动态添加新的弹幕元素到DOM树上，并启动定时器模拟连续不断的滚动行为：

function addBarrage() {
    const container = document.getElementById('barrage-container');
    let messageText = document.getElementById('messageInput').value;

    if (!messageText.trim()) return;

    // 创建一个新的 div 来表示单个弹幕项
    var newMessageDiv = document.createElement("DIV");
    newMessageDiv.className = "barrage-item";
    newMessageDiv.style.top = Math.floor(Math.random() * (container.clientHeight - 30)) + 'px';
    newMessageDiv.textContent = messageText;

    // 将新创建好的 DOM 节点加入到父级节点下
    container.appendChild(newMessageDiv);

    animateBarrageItem(newMessageDiv);
    
    function animateBarrageItem(item){
        item.style.right = window.innerWidth+'px';// 设置初始右侧距离
        
        setTimeout(function(){
            item.style.transition = 'right 10s linear'; // 添加过渡效果
            
            item.style.right = '-'+item.offsetWidth+'px'; // 移动至左侧外侧
            
            // 动画结束后移除该元素
            item.addEventListener('transitionend', () => { 
                container.removeChild(item);
            });
            
        }, 100); // 延迟执行使浏览器有时间渲染更新后的样式
    }
}

上述脚本实现了当用户点击“发送”按键后会读取当前表单项内的文字内容作为一条新的弹幕追加进来，同时为其配置好随机垂直坐标值并通过调用`animateBarrageItem()`函数开启水平方向上的位移过程直至完全离开视窗范围为止。