close
來源 | 掘金
作者|錢得樂
https://juejin.cn/post/7141012605535010823
高端的效果，往往只需要採用最樸素的實現方式，忙碌了兩個小時，陳師傅打開了 F12，豁然開朗。一張圖片 + 一個屬性，直接搞定。
為了印證我的想法，我決定自己寫一個 demo。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.video{width:668px;height:376px;position:relative;-webkit-mask-image:url("mask.svg");-webkit-mask-size:668px376px;}.bullet{position:absolute;font-size:20px;}</style></head><body><divclass="video"><divclass="bullet"style="left:100px;top:0;">元芳，你怎麼看</div><divclass="bullet"style="left:200px;top:20px;">你難道就是傳說中的奶靈</div><divclass="bullet"style="left:300px;top:40px;">你好，我是胖靈</div><divclass="bullet"style="left:400px;top:60px;">這是第一集，還沒有舔靈</div></div></body></html>複製代碼效果是這樣的：
加一個紅背景，看得更清楚一些：
至此，我們就實現了 B 站同款的不遮擋人物的彈幕。
至於這張圖片是怎麼來的，肯定是 AI 識別出來然後生成的，一張圖片也就一兩 K，一次加載很多張也不會造成很大的負擔。
最後，來看看這個神奇的 css 屬性mask-image吧：https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image。
這是一個實驗中的功能，此功能某些瀏覽器尚在開發中，在不同的瀏覽器中適合使用的前綴也不一樣。
在開發需求的時候可以把它當成一個亮點使用，但是不能強依賴於這個屬性做需求。
這裡還有一系列的屬性，有興趣的話可以挨個試一下。
全站熱搜
留言列表