原生JS实现移动端弹幕（虎牙，斗鱼简易版）

话不多说，老规矩，先上Demo 点此预览

---

实现思路：

• 从输入框获取输入信息
• 生成弹幕节点
• 弹幕从屏幕一侧逐帧移动到另一侧
• 移动完毕，删除弹幕节点

- 首先是界面布局的实现CSS

*{
   
           padding: 0;
           margin: 0;
       }
        html,body{
   
            height: 100%;
            user-select: none;
        }
        .screen{
   
            overflow: hidden;
            position: relative;
            height: 100%;
            background-color: rgba(249, 249, 249, 0.78);
        }
        .top{
   
            position: absolute;
            top:0;
            height: 80px;
            width: 100%;
            line-height: 80px;
            background-color: #ffffff;
            text-align: center;
            font-size: 35px;
            font-weight: bold;
            color: rgba(2, 2, 5, 0.87);
            box-shadow: 17px -5px 40px #6d6a6a8f
        }
        .top span{
   
            position: absolute;
            left: 55px;
            color: #7c22d6;
            font-size: 25px;
        }
        .send{
   
            position:absolute;
            bottom: 0;
            width:100%;
            height:240px;
            line-height:240px;
            background-color: #ffffff;
            text-align: center;
            box-shadow: 17px 11px 40px #6d6a6a8f;
        }
        .input{
   
            position: absolute;
            left:50%;
            top:50%