前段時間抖音上有個抖動彈幕挺火的，于是決定仿寫一個，話不多說，先看效果…
效果展示
GIF圖看著有點模糊，但實際效果還是不錯的。
第一眼看上去也不知道該咋做，那就先把要實現(xiàn)的功能拆解一下吧。
- 生成一個鋪滿全屏的黑色背景，寫上文字，然后內(nèi)容居中
- 實現(xiàn)無縫滾動
- 實現(xiàn)文字抖動特效
- 旋轉(zhuǎn)90度（默認(rèn)橫屏展示）
代碼如下
.html
|
1
2
3
|
<div class="barrage-box"> <div class="text">抖動字幕</div></div> |
.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
.barrage-box { width: 100vh; height: 100vw; transform-origin: 50vw 50vw; transform: rotate(90deg); white-space: nowrap; display: flex; justify-content: center; align-items: center; background-color: #000; overflow: hidden; animation: aniShake 0.5s linear infinite; } .text { width: 100%; font-size: 50px; color: #FFF; animation: aniMove 5s linear infinite; animation-fill-mode: forwards; } /* 文字滾動 */ @keyframes aniMove { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* 抖動字幕效果 */ @keyframes aniShake { 0%, 33% { text-shadow: 3px -3px 0px #FE008E, -5px 5px 0px #00FFFF; } 34%, 66% { text-shadow: 5px -5px 0px #FE008E, -3px 3px 0px #00FFFF; } 67%, 100% { text-shadow: 3px -3px 0px #00FFFF, -5px 5px 0px #FE008E; } } |
至此，一個包含抖動和滾動特效的手持彈幕功能就實現(xiàn)了。
功能并不復(fù)雜，開始我是想著用canvas畫出來，但是在小程序里canvas這樣的原生組件層級比較高，要是想切換特效寫個修改配置的彈窗啥的，不太好弄。所以就研究了一下用css3寫出來了，在這里我只想說：“css3 牛嗶———?。?！”
小程序內(nèi)更多配置效果預(yù)覽
最近自己做了個小程序，手持彈幕這個功能也加進去了，而且實現(xiàn)了更多功能，還能把自己配置好的內(nèi)容分享給好友，歡迎大家掃碼體驗，支持…
總結(jié) 第一次寫博客，刪刪減減整了一下午，也不太會寫文章，但還是硬著頭皮寫完了，畢竟人總要學(xué)會自己長大......
到此這篇關(guān)于基于JS簡單實現(xiàn)手持彈幕功能+文字抖動特效代碼的文章就介紹到這了,更多相關(guān)js手持彈幕文字抖動內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/qq_37359558/article/details/115301053
