基于JS簡單實現手持彈幕功能+文字抖動特效代碼
更新時間：2021年03月31日 12:03:00 作者：aimengmei
這篇文章主要介紹了基于JS簡單實現手持彈幕功能+文字抖動特效代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
前段時間抖音上有個抖動彈幕挺火的，于是決定仿寫一個，話不多說，先看效果…
效果展示
GIF圖看著有點模糊，但實際效果還是不錯的。
第一眼看上去也不知道該咋做，那就先把要實現的功能拆解一下吧。
- 生成一個鋪滿全屏的黑色背景，寫上文字，然后內容居中
- 實現無縫滾動
- 實現文字抖動特效
- 旋轉90度（默認橫屏展示）
代碼如下
.html
<div class="barrage-box"> <div class="text">抖動字幕</div> </div>
.css
.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; }
}
至此，一個包含抖動和滾動特效的手持彈幕功能就實現了。
功能并不復雜，開始我是想著用canvas畫出來，但是在小程序里canvas這樣的原生組件層級比較高，要是想切換特效寫個修改配置的彈窗啥的，不太好弄。所以就研究了一下用css3寫出來了，在這里我只想說：“css3 牛嗶———?。?！”
小程序內更多配置效果預覽
最近自己做了個小程序，手持彈幕這個功能也加進去了，而且實現了更多功能，還能把自己配置好的內容分享給好友，歡迎大家掃碼體驗，支持…
總結 第一次寫博客，刪刪減減整了一下午，也不太會寫文章，但還是硬著頭皮寫完了，畢竟人總要學會自己長大......
到此這篇關于基于JS簡單實現手持彈幕功能+文字抖動特效代碼的文章就介紹到這了,更多相關js手持彈幕文字抖動內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
解構賦值允許你使用類似數組或對象字面量的語法將數組和對象的屬性賦給各種變量,下面這篇文章主要給大家介紹了關于JavaScript對象解構用法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了微信小程序環(huán)境下將文件上傳到OSS的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
作用域是當前的執(zhí)行上下文，值和表達式在其中“可見”或可被訪問，本文主要介紹了Javascript局部作用域和全局作用域，文中有詳細的代碼示例，具有一定的參考價值,需要的朋友可以借鑒一下2023-06-06
因項目需要，開始學習并研究VC、DLL及ActiveX控件，網上資料找了很多，但沒一個可用的或者說沒一個例子可理解并運行的。沒辦法，自己研究吧。功夫不負有心人，終有小成了，呵呵，現在把自己學習總結了一下，獻給需要的人。2010-08-08
這篇文章主要介紹了JS深度拷貝Object Array,結合實例形式分析了JavaScript深度拷貝的原理,需要的朋友可以參考下2016-03-03
JavaScript三種方法解決約瑟夫環(huán)問題的方法
約瑟夫環(huán)問題又稱約瑟夫問題或丟手絹問題，是一道經典的算法問題，本篇將以循環(huán)鏈表、有序數組、數學遞歸三種方式來解決約瑟夫環(huán)問題。感興趣的可以了解一下2021-09-09
這篇文章主要為大家詳細介紹了微信小程序自定義計時器功能，設置一個時間，可以開始倒計時、暫停，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
javascript 動態(tài)table添加colspan\rowspan 參數的方法
動態(tài)的給某個表對象添加列屬性和行屬性，采用obj.setAttribute("rowspan",n)(即rowspan=n)不能生效。2009-07-07
這篇文章主要為大家介紹了javascript中select下拉框的用法，select在開發(fā)中經常被用到，用于進行選項選擇,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了JS Array.from()將偽數組轉換成數組的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03