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.字符

  • JS+CSS实现图片预加载与背景图上中下切图

    图片预加载 为什么使用图片预加载 为什么会考虑使用图片预加载呢?你是否曾有个网站,在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……预加载将在这方面帮助你. 它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面.这样当用户滚动导航的时候,很漂亮而且流畅,没有延迟. 下面整理常用的图片预加载: 1.使用纯的css进行图片预加载 body:after { content: ""; display: block; position: absolute; background:

  • 如何通过JavaScript、css、H5实现简单的tab栏切换和复用功能

    目录 一.效果展示 二.实现的大致原理 三.H5的布局 四.CSS样式 五.JS代码内容 六.完整代码 总结 一.效果展示 二.实现的大致原理 1.我们先通过css 和h5布局得到最基本的tab栏样式(有代码参考) 2.在获得样式,给我们所需要点击的目标设置监听事件,在获取节点,设置一个自定义的节点属性index,通过它在获取点击出现样式的节点,在经过寻找元素,设置全取消,点击相应的节点出现的效果.这里获取节点方式,都是通过点击元素获取父元素,在获得子元素,同级获得兄弟元素,在获取兄弟元素的子元

  • 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

随机推荐