常常看一些 LOL 比賽直播的小夥伴,確定都知道,在一些彈幕網站(Bilibili、虎牙)中,當人物與彈幕出如今一塊兒的時候,彈幕會「巧妙」的躲到人物的下面,看着很是的智能。前端
簡單的一個截圖例子:git
其實,這裏是運用了 CSS 中的 MASK 屬性實現的。github
以前在多篇文章都提到了 mask,比較詳細的一篇是 -- 奇妙的 CSS MASK,本文不對 mask 的基本概念作過多講解,向下閱讀時,若是對一些 mask 的用法感到疑惑,能夠再去看看。後端
這裏只簡單介紹下 mask 的基本用法:svg
最基本,使用 mask 的方式是藉助圖片,相似這樣:網站
{ /* Image values */ mask: url(mask.png); /* 使用位圖來作遮罩 */ mask: url(masks.svg#star); /* 使用 SVG 圖形中的形狀來作遮罩 */ }
固然,使用圖片的方式後文會再講。藉助圖片的方式其實比較繁瑣,由於咱們首先還得準備相應的圖片素材,除了圖片,mask 還能夠接受一個相似 background 的參數,也就是漸變。url
相似以下使用方法:spa
{ mask: linear-gradient(#000, transparent) /* 使用漸變來作遮罩 */ }
那該具體怎麼使用呢?一個很是簡單的例子,上述咱們創造了一個從黑色到透明漸變色,咱們將它運用到實際中,代碼相似這樣:code
下面這樣一張圖片,疊加上一個從透明到黑色的漸變,視頻
{ background: url(image.png) ; mask: linear-gradient(90deg, transparent, #fff); }
應用了 mask 以後,就會變成這樣:
這個 DEMO,能夠先簡單瞭解到 mask 的基本用法。
這裏獲得了使用 mask 最重要結論:添加了 mask 屬性的元素,其內容會與 mask 表示的漸變的 transparent 的重疊部分,而且重疊部分將會變得透明。
值得注意的是,上面的漸變使用的是 linear-gradient(90deg, transparent, #fff)
,這裏的 #fff
純色部分其實換成任意顏色均可以,不影響效果。
瞭解了 mask 的用法後,接下來,咱們運用 mask,簡單實現視頻彈幕中,彈幕碰到人物,自動被隱藏過濾的例子。
首先,我簡單的模擬了一個召喚師峽谷,以及一些基本的彈幕:
方便示意,這裏使用了一張靜態圖,表示了召喚師峽谷的地圖,並不是真的視頻,而彈幕則是一條一條的 <p>
元素,和實際狀況一致。僞代碼大概是這樣:
<!-- 地圖 --> <div class="g-map"></div> <!-- 包裹全部彈幕的容器 --> <div class="g-barrage-container"> <!-- 全部彈幕 --> <div class="g-barrage">6666</div> ... <div class="g-barrage">6666</div> </div>
爲了模擬實際狀況,咱們再用一個 div 添加一個實際的人物,若是不作任何處理,其實就是咱們看視頻打開彈幕的感覺,人物被視頻所遮擋:
注意,這裏我添加了一我的物亞索,而且用 animation 模擬了簡單的運動,在運動的過程當中,人物是被彈幕給遮擋住的。
接下來,就能夠請出 mask 了。
咱們利用 mask 製做一個 radial-gradient
,使得人物附近爲 transparent
,而且根據人物運動的 animation,給 mask 的 mask-position
也添加上相同的 animation 便可。最終能夠獲得這樣的效果:
.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; } }
實際上就是給放置彈幕的容器,添加一個 mask
屬性,把人物所在的位置標識出來,而且根據人物的運動不斷的去變換這個 mask 便可。咱們把 mask 換成 background,原理一看就懂。
background 透明的地方,即 mask 中爲 transparent 的部分,實際就是彈幕會被隱藏遮罩的部分,而其餘白色部分,彈幕不會被隱藏,正是完美的利用了 mask 的特性。
其實這項技術和視頻自己是無關的,咱們只須要根據視頻計算須要屏蔽掉彈幕的位置,獲得相應的 mask 參數便可。若是去掉背景和運動的人物,只保留彈幕和 mask,是這樣的:
須要明確的是,使用 mask,不是將彈幕部分給遮擋住,而是利用 mask
,指定彈幕容器之下,哪些部分正常展現,哪些部分透明隱藏。
最後,完整的 Demo 你能夠戳這裏:
CodePen Demo -- mask 實現彈幕人物遮罩過濾
固然,上面咱們簡單的還原了利用 mask 實現彈幕遮罩過濾的效果。可是實際狀況比上述的場景複雜的多,由於人物英雄的位置是不肯定的,每一刻都在變化。因此在實際生產環境中,mask 圖片的參數,實際上是由後端實時對視頻進行處理計算出來的,而後傳給前端,前端再進行渲染。
對於運用了這項技術的直播網站,咱們能夠審查元素,看到包裹彈幕的容器的 mask 屬性,每時每刻都在發生變化:
返回回來的實際上是一個 SVG 圖片,大概長這個樣子:
這樣,根據視頻人物的實時位置變化,不斷計算新的 mask,再實時做用於彈幕容器之上,實現遮罩過濾。
本文到此結束,但願對你有幫助 😃,本文介紹了 CSS mask 的一個實際生產環境中,很是有意義的一次實踐,也代表不少新的 CSS 技術,運用得當,仍是能給業務帶來很是有益的幫助的。
更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ,持續更新,歡迎點個 star 訂閱收藏。
若是還有什麼疑問或者建議,能夠多多交流,原創文章,文筆有限,才疏學淺,文中如有不正之處,萬望告知。