JavaScript CSS解析B站的弹幕可以不挡人物原理及技巧

目录
  • 正文
  • demo
  • Experimental:  这是一个实验中的功能

正文

那天在B站看视频的时候偶然发现当字幕遇到人物的时候就被裁切了，不会挡住人物，觉得很神奇，于是决定一探究竟。

高端的效果，往往只需要采用最朴素的实现方式，忙碌了两个小时，陈师傅打开了F12，豁然开朗。一张图片+一个属性，直接搞定。

demo

为了印证我的想法，我决定自己写一个demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .video {
      width: 668px;
      height: 376px;
      position: relative;
      -webkit-mask-image: url("mask.svg");
      -webkit-mask-size: 668px 376px;
    }
    .bullet {
      position: absolute;
      font-size: 20px;
    }
  </style>
</head>
<body>
<div class="video">
  <div class="bullet" style="left: 100px; top: 0;">元芳，你怎么看</div>
  <div class="bullet" style="left: 200px; top: 20px;">你难道就是传说中的奶灵</div>
  <div class="bullet" style="left: 300px; top: 40px;">你好，我是胖灵</div>
  <div class="bullet" style="left: 400px; top: 60px;">这是第一集，还没有舔灵</div>
</div>
</body>
</html>

效果是这样的

加一个红背景，看的清楚一些

至此我们就实现了B站同款的不遮挡人物的弹幕。至于这张图片是怎么来的，肯定是AI识别出来然后生成的，一张图片也就一两K，一次加载很多张也不会造成很大的负担。

最后来看看这个神奇的css属性吧

developer.mozilla.org/zh-CN/docs/…

Experimental:  这是一个实验中的功能

所以在开发需求的时候可以把它当成一个亮点使用，但是不能强依赖于这个属性做需求。

它还有一系列的属性，有兴趣的话可以挨个试一下。

以上就是JavaScript CSS解析B站的弹幕可以不挡人物原理及技巧的详细内容，更多关于JavaScript CSS弹幕不挡人的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 使用JavaScript和CSS实现简单的字符计数器

    使用JavaScript和CSS实现简单的字符计数器

    目录 项目基本结构 1.字符计数器的基本结构 2.添加标题 3.使用 textarea 创建一个输入框 4.看字数结果的位置 5.激活字符计数 javascript 完整源码下载 在本文中,你将学习如何使用 JavaScript 创建字符计数器.计数的数字可以在小显示屏中看到.如果你需要,可以在那个输入框中设置一个限制. 下面我给出了一个预览,可以帮助你了解这个 javascript 字符计数是如何工作的.如果您只想要源代码,可以在文末获取. 在线演示地址 项目基本结构 目录结构如下: 1.字符

  • JavaScript+CSS实现模态框效果

    本文实例为大家分享了JavaScript+CSS实现模态框效果的具体代码,供大家参考,具体内容如下 发现的问题 1)鼠标按下后拖动的瞬间,光标会脱离模态盒子跑到外面2)鼠标弹起事件不起作用 解决的思路 首先是因为代码里有用到offsetLeft和offsetTop这两个属性,所以考虑是不是模态框的定位出现了问题 . 又:设置关闭标签设置了绝对定位,那么loginBox作为其父级元素我将其设置为相对定位. 各个类型定位的介绍: 1.静态定位: position: static 默认,也就是文档流定

  • js+css实现计算器功能

    本文实例为大家分享了js+css实现计算器功能的具体代码,供大家参考,具体内容如下 目前仅实现了最基础的运算功能 (因为是js的运算内核,有些小数点计算并不准确,懒得去做去小数点后几位的操作) 一.最终呈现的视图效果 二.思路 代码量有点多,没办法.一开始只是无聊随便写的,没有构思,越写到后面越冗杂,自己又不想重新推翻去写. 三.代码逻辑 <style>         * {             margin: 0;             padding: 0;         }  

  • JavaScript+CSS实现唯美蝴蝶动画

    JavaScript+CSS实现唯美蝴蝶动画

    目录 演示 技术栈 源码 对部分蝴蝶的设定 飞动的设置 对蝴蝶形体的设置 演示 技术栈 关于svg标签在svg中关于图形的复用,是通过标签defs来解决的. 举个例子:在图形中红色圆圈 ● 还有黄色圆圈 ● 都是复用的元素.结构都是一样的,只是颜色和位置的差别. 关于figure: <figure标签规定独立的流内容(图像.图表.照片.代码等等). <figure元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的.如果被删除,则不应对文档流产生影响. 关于perspective-o

  • Python实现爬取某站视频弹幕并绘制词云图

    Python实现爬取某站视频弹幕并绘制词云图

    目录 前言 爬取弹幕 爬虫基本思路流程 导入模块 代码 制作词云图 导入模块 读取弹幕数据 前言 [课 题]: Python爬取某站视频弹幕或者腾讯视频弹幕,绘制词云图 [知识点]: 1. 爬虫基本流程 2. 正则 3. requests >>> pip install requests 4. jieba >>> pip install jieba 5. imageio >>> pip install imageio 6. wordcloud  >

  • 基于asyncio 异步协程框架实现收集B站直播弹幕

    前言 虽然标题是全站,但目前只做了等级 top 100 直播间的全天弹幕收集. 弹幕收集系统基于之前的B 站直播弹幕姬 Python 版修改而来.具体协议分析可以看上一篇文章. 直播弹幕协议是直接基于 TCP 协议,所以如果 B 站对类似我这种行为做反制措施,比较困难.应该有我不知道的技术手段来检测类似我这种恶意行为. 我试过同时连接 100 个房间,和连接单个房间 100 次的实验,都没有问题.>150 会被关闭链接. 直播间的选取 现在弹幕收集系统在选取直播间上比较简单,直接选取了等级 to

  • 客齐集OEM的CSS解析与开发经验

    客齐集OEM的CSS解析 这个OEM是客齐集推出来的,如果你有一个域名,那么你就可以定制自已的网站了.由于是要让站工自已定制,所以开放了HTML以及CSS.JS等代码.但默认的CSS是CSS是不能改的. 在写这个CSS时,我尽量用最少的标签,这样很站对CSS不是很熟的站长也可以定制.另外布局时和写CSS时,总的思想的就是从大的到小,从小到细. 这个布局和CSS是一次写成的,没有更改过,所以有一些地主还是可以优化的,这样的代码也不是最优的.但是,这样的布局的CSS是可以让站长定义成各式各样的.一会

  • 使用python tkinter开发一个爬取B站直播弹幕工具的实现代码

    使用python tkinter开发一个爬取B站直播弹幕工具的实现代码

    项目地址 https://github.com/jonssonyan... 开发工具 python 3.7.9 pycharm 2019.3.5 代码 import threading import time import tkinter.simpledialog from tkinter import END, simpledialog, messagebox import requests class Danmu(): def __init__(self, room_id): # 弹幕url

  • Python基于Tkinter开发一个爬取B站直播弹幕的工具

    Python基于Tkinter开发一个爬取B站直播弹幕的工具

    简介 使用Python Tkinter开发一个爬取B站直播弹幕的工具,启动后在弹窗中输入房间号即可,弹幕内容会保存在脚本文件同级目录下的.log扩展名的文件中 开发工具 python 3.7.9 pycharm 2019.3.5 实现代码 import threading import time import tkinter.simpledialog # 使用Tkinter前需要先导入 from tkinter import END, messagebox import requests # 全

  • JavaScript+CSS相册特效实例代码

    JavaScript+CSS相册特效实例代码

    嗯 就是这样一个例子,视频学到的一个特效,实际用处并不大,但是可以帮助理解JS语言和熟悉CSS3样式. 设计: 观察一张图片的变化,发现: 1.图片缩放(随机,并且不是同时运动) 1.从大到小 2.从小到大,透明度从1到0(在第一步运动完成后立马开始) 2.图片旋转(随机,并且不是同时运动的.需要在全部运动走完以后开始) 3. 因为每张图片是随机开始变换的,所以起始时间是不同的,这里可设置一个延迟器setTimeout,时间用random随机生成即可. 4. 中间需要用到自执行函数,因为setT

  • 绝对经典的滑轮新闻显示(javascript+css)实现

    绝对经典的滑轮新闻显示(javascript+css)很早就有了,今天又见到,拿出来大家分享一下... 效果如下图:screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this

  • JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果

    JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果

    本文实例讲述了JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果.分享给大家供大家参考.具体如下: 这里演示JavaScript+CSS仿Mootools竖排黑色动画菜单,并非使用了Mootools,但效果却和使用了Mootools差不多,动画效果平滑,操作舒服,给菜单增色不少. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mootools-style-demo/ 具体代码如下: <!DOCTYPE html

  • 理解 JavaScript 预解析

    事实上或某种现象证明并不是这样的,通过<JavaScript权威指南>及网上相关资料了解到,JavaScript有"预解析"行为.理解这一特性是很重要的,不然在实际开发中你可能会遇到很多无从解析的问题,甚至导致程序bug的存在.为了解析这一现象,也作为自己的一次学习总结,本文逐步引导你来认识JavaScript"预解析",如果我的见解有误,还望指正. (1)如果JavaScript仅是运行时自上往下逐句解析的,下面的代码能正确运行是可以理解的,因为我们先

  • JavaScript+CSS实现仿天猫侧边网页菜单效果

    JavaScript+CSS实现仿天猫侧边网页菜单效果

    本文实例讲述了JavaScript+CSS实现仿天猫侧边网页菜单效果.分享给大家供大家参考.具体如下: 这是一款自己写的仿天猫的菜单效果,二级分类的功能已经实现,但没有美化,留着用的朋友自己完善吧,JS功能已经实现,鼠标移在主分类上,二级分类向右伸出展开,目前淘宝网.天猫购物.京东都在用的导航菜单特效,测试时候请先点击一下菜单,主菜单就显示出来了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-ftamil-web-menu-st

随机推荐