代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏弹幕</title>
    <style>
        /* 页面主体样式，确保无边距、无内边距、无滚动条，高度为100%，背景色为黑色 */
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            background-color: black;
        }
        /* 弹幕容器样式，绝对定位，覆盖整个页面，不允许鼠标事件 */
        .danmu-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        /* 单条弹幕样式，绝对定位，内容不换行，白色字体，24px大小，加粗 */
        .danmu {
            position: absolute;
            white-space: nowrap;
            color: white;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<!-- 弹幕容器元素 -->
<div class="danmu-container" id="danmuContainer"></div>

<script>
    // 获取弹幕容器元素
    const danmuContainer = document.getElementById('danmuContainer');

    /**
     * 创建并添加一条弹幕
     * @param {string} text 弹幕文本内容
     */
    function createDanmu(text) {
        const danmu = document.createElement('div');
        danmu.className = 'danmu';
        danmu.textContent = text;

        // 设置弹幕的位置和初始位置
        const startTop = Math.random() * (window.innerHeight - 30); // 防止弹幕超出窗口
        danmu.style.top = `${startTop}px`;
        danmu.style.left = `${window.innerWidth}px`;

        danmuContainer.appendChild(danmu);

        // 设置弹幕的移动时间
        const duration = 10 + Math.random() * 10; // 弹幕移动时间 10-20 秒

        // 动画效果：从右向左移动到视图外
        danmu.animate([
            { transform: `translateX(-${window.innerWidth + danmu.clientWidth}px)` }
        ], {
            duration: duration * 1000,
            easing: 'linear',
            iterations: 1,
            fill: 'forwards'
        }).onfinish = () => {
            danmuContainer.removeChild(danmu);
        };
    }

    /**
     * 开始发送弹幕
     */
    function startDanmu() {
        // 每隔1秒添加一条弹幕
        setInterval(() => createDanmu('Ciallo～(∠・ω< )⌒★'), 1000);
    }

    // 启动弹幕
    startDanmu();
</script>
</body>
</html>
预览

看这里或者这儿
目录CONTENT

纯JS弹幕效果

代码

预览

评论区
