使用 mask 實現視訊彈幕人物遮罩過濾
` 元素,和實際情況一致。虛擬碼大概是這樣: ```HTML 6666 ... 6666 ``` 為了模擬實際情況,我們再用一個 div 新增一個實際的人物,如果不做任何處理,其實就是我們看視訊開啟彈幕的感受,人物被視訊所遮擋: ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/abec054828be4865aff36bb2bb5f9eba~tplv-k3u1fbpfcp-watermark.image) 注意,這裡我添加了一個人物亞索,並且用 animation 模擬了簡單的運動,在運動的過程中,人物是被彈幕給遮擋住的。 接下來,就可以請出 mask 了。 我們利用 mask 製作一個 `radial-gradient` ,使得人物附近為 `transparent`,並且根據人物運動的 animation,給 mask 的 `mask-position` 也新增上相同的 animation 即可。最終可以得到這樣的效果: ```CSS .g-barrage-container { position: absolute; mask: radial-gradient(circle at 100px 100px, transparent 60px, #fff 80px, #fff 100%); animation: mask 10s infinite alternate; } @keyframes mask { 100% { mask-position: 85vw 0; } } ``` ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70b61b0ce29f4e60ad1c736ae498e650~tplv-k3u1fbpfcp-watermark.image) 實際上就是給放置彈幕的容器,新增一個 `mask` 屬性,把人物所在的位置標識出來,並且根據人物的運動不斷的去變換這個 mask 即可。我們把 mask 換成 background,原理一看就懂。 ### 把 mask 替換成 background 示意圖: ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2418bbd6f3d449d7bfddd4fd93da53e0~tplv-k3u1fbpfcp-watermark.image) background 透明的地方,即 mask 中為 transparent 的部分,實際就是彈幕會被隱藏遮罩的部分,而其他白色部分,彈幕不會被隱藏,正是完美的利用了 mask 的特性。 其實這項技術和視訊本身是無關的,我們只需要根據視訊計算需要遮蔽掉彈幕的位置,得到相應的 mask 引數即可。如果去掉背景和運動的人物,只保留彈幕和 mask,是這樣的: ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/663a15a6087f4a12b8c57b3f0efca80f~tplv-k3u1fbpfcp-watermark.image) **需要明確的是,使用 mask,不是將彈幕部分給遮擋住,而是利用 `mask`,指定彈幕容器之下,哪些部分正常展示,哪些部分透明隱藏**。 最後,完整的 Demo 你可以戳這裡: [CodePen Demo -- mask 實現彈幕人物遮罩過濾](https://codepen.io/Chokcoco/pen/MWbyjoX) ## 實際生產環境中的運用 當然,上面我們簡單的還原了利用 mask 實現彈幕遮罩過濾的效果。但是實際情況比上述的場景複雜的多,因為人物英雄的位置是不確定的,每一刻都在變化。所以在實際生產環境中,mask 圖片的引數,其實是由後端實時對視訊進行處理計算出來的,然後傳給前端,前端再進行渲染。 對於運用了這項技術的直播網站,我們可以審查元素,看到包裹彈幕的容器的 mask 屬性,每時每刻都在發生變化: ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a26980af15d04dcfabe058fe70a95816~tplv-k3u1fbpfcp-watermark.image) 返回回來的其實是一個 SVG 圖片,大概長這個樣子: ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4f8be98ed18d46cba5d0c939f031e2dc~tplv-k3u1fbpfcp-watermark.image) 這樣,根據視訊人物的實時位置變化,不斷計算新的 mask,再實時作用於彈幕容器之上,實現遮罩過濾。 ## 最後 本文到此結束,希望對你有幫助 :),本文介紹了 CSS mask 的一個實際生產環境中,非常有意義的一次實踐,也表明很多新的 CSS 技術,運用得當,還是能給業務帶來非常有益的幫助的。 更多精彩 CSS 技術文章彙總在我的 [Github -- iCSS](https://github.com/chokcoco/iCSS) ,持續更新,歡迎點個 star 訂閱收藏。 如果還有什麼疑問或者建議,可以多多交流,原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望