模拟视频小弹幕。

最新推荐文章于 2022-08-22 08:44:16 发布

cy_baicai

最新推荐文章于 2022-08-22 08:44:16 发布

阅读量421

点赞数

分类专栏：新博客

本文链接：https://blog.csdn.net/cy_baicai/article/details/79172313

版权

这篇博客通过HTML、CSS和JavaScript展示了如何创建一个简单的网页弹幕效果。利用JavaScript的DOM操作，动态生成并移动弹幕元素，同时将弹幕内容追加到文本区域展示。示例中还包含了随机颜色和速度的设定，以及预设弹幕列表的播放。

摘要由CSDN通过智能技术生成

之前博客地址被csdn吃了，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹幕</title>
</head>
<style>
    /* //css */
    * {
        box-sizing: border-box;
        outline: none;
    }

    p {
        margin: .5em;
        word-break: break-all;
    }

    .container {
        position: relative;
        width: 700px;
        height: 500px;
        margin: auto;
        padding-right: 200px;
    }

    .content {
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
    }

    .content-opt {
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 100%;
    }

    .content-text {
        height: calc(100% - 30px);
        margin-bottom: 30px;
        border: 1px solid #ccc;
        overflow: auto;
    }

    .content-input {
        position: abs