模拟视频弹幕

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

微aa

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

阅读量173

点赞数 3

分类专栏： css js html 文章标签： js css html

本文链接：https://blog.csdn.net/ttttqqqqq/article/details/107798356

版权

本文介绍了如何使用JavaScript、CSS和HTML来模拟视频中的弹幕效果，提供了一段可以直接运行的代码，读者可以复制并查看实现的弹幕展示效果。

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

当我们在看视频时，总是会遇到一个弹幕的选项，现在我们模拟一下，来写一个
直接copy代码就可以看到效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 60%;
            // 高度不能直接写百分比
            height: 80vh;
            border: 1px solid black;
            margin:  50px auto;
            position: relative;
            overflow: hidden;
        }
        footer{
            width: 100%;
            text-align: center;
        }
        input,button{
            line-height: 25px;
        }
        button{
            width: 80px;
        }
        p{
            position:absolute;
            // 文字宽度给为18%
            width:18%;
            height:200px;