使用css实现一个弹幕的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Danmu - 弹幕</title>
    <style>
        body {
            background-color: #000;
            overflow: hidden; /* 隐藏溢出,防止滚动条 */
        }

        .danmu-container {
            position: relative;
            width: 100%;
            height: 300px; /* 设置弹幕容器的高度 */
            overflow: hidden;
        }

        .danmu {
            position: absolute;
            white-space: nowrap; /* 防止文字换行 */
            color: white;
            font-size: 16px;
            transition: transform 5s linear; /* 动画过渡效果,持续时间5秒,线性 */
        }

        /* 添加一些样式,让弹幕更好看 */
        .danmu.positive {
            color: lightgreen;
        }

        .danmu.negative {
            color: lightcoral;
        }
    </style>
</head>
<body>

    <div class="danmu-container" id="danmu-container"></div>

    <script>
        const danmuContainer = document.getElementById('danmu-container');
        const danmuList = [
            "Hello, world!",
            "This is a danmu message.",
            "Awesome!",
            "Cool!",
            "弹幕测试",
            "你好世界!",
            "666666",
            "太棒了!",
            "不好看",  //negative example
            "不喜欢"   //negative example
        ];

        function createDanmu() {
            const danmu = document.createElement('div');
            danmu.classList.add('danmu');

            // 随机选择弹幕内容
            const randomIndex = Math.floor(Math.random() * danmuList.length);
            danmu.textContent = danmuList[randomIndex];

             // 添加正面或负面样式
            if (danmu.textContent.includes("不")) {
                danmu.classList.add('negative');
            } else {
                danmu.classList.add('positive');
            }


            // 随机设置弹幕的垂直位置
            const top = Math.random() * (danmuContainer.clientHeight - danmu.clientHeight);
            danmu.style.top = top + 'px';

            // 设置弹幕的初始位置在容器右侧
            danmu.style.right = '-200px'; // 初始位置在屏幕外
            danmuContainer.appendChild(danmu);

            // 使用setTimeout模拟动画结束后的移除
            setTimeout(() => {
                danmu.remove();
            }, 5000); // 5秒后移除

            // 动画效果,将弹幕从右向左移动
            setTimeout(() => {  // 使用setTimeout避免transform属性立即生效
                danmu.style.transform = `translateX(-${danmuContainer.clientWidth + danmu.clientWidth}px)`;
            }, 0);
        }

        // 每隔一段时间创建一个新的弹幕
        setInterval(createDanmu, 500); // 每500毫秒创建一个弹幕
    </script>

</body>
</html>

关键点和改进说明:

  • overflow: hidden;: 在body.danmu-container上都使用了 overflow: hidden,防止弹幕超出容器范围以及出现滚动条。
  • 绝对定位: 使用position: absolute; 将弹幕绝对定位在容器内。
  • white-space: nowrap;: 防止弹幕文本换行。
  • transition: 使用transition: transform 5s linear; 实现弹幕的动画效果,使弹幕平滑地从右向左移动。 5s 是动画持续时间,linear 表示线性过渡,速度均匀。
  • 动态创建弹幕: 使用 JavaScript 动态创建 div 元素作为弹幕,并设置其文本内容、位置和样式。
  • 随机位置: 使用 Math.random() 随机生成弹幕的垂直位置。
  • 动画: 通过设置 transform: translateX(-${danmuContainer.clientWidth + danmu.clientWidth}px); 使弹幕从右向左移动,
posted @ 2024-12-10 09:47  王铁柱6  阅读(86)  评论(0编辑  收藏  举报