gogoend / blog

blogs, ideas, etc.
MIT License
9 stars 2 forks source link

了解一下 bilibili 不挡脸弹幕的前端实现 - CSS Mask #29

Open gogoend opened 4 years ago

gogoend commented 4 years ago

先开个头

实在不知道该说怎样的开场白。但不得不说,浏览器的图形处理能力可以说是越来越强了,就拿CSS3来说,从当年的transform、transition、animation以及filter,到本文所介绍的mask,我总有一种感觉:某一天浏览器应该能够替代Ae、Flash或是Ps,借助HTML、SVG、Canvas以及WebGL等可视化技术,即可创造出所见即所得的CG内容。(主要是吧,Ae的渲染真的。。。太!慢!了!)

示例

css/mask-start.html - 目前仅在FireFox 78下能够正常运行,Chrome 83下样式不生效。