基于JS簡單實現(xiàn)手持彈幕功能+文字抖動特效代碼

更新時間：2021年03月31日 12:03:00 作者：aimengmei

這篇文章主要介紹了基于JS簡單實現(xiàn)手持彈幕功能+文字抖動特效代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前段時間抖音上有個抖動彈幕挺火的，于是決定仿寫一個，話不多說，先看效果…

效果展示

在這里插入圖片描述

GIF圖看著有點模糊，但實際效果還是不錯的。

第一眼看上去也不知道該咋做，那就先把要實現(xiàn)的功能拆解一下吧。

生成一個鋪滿全屏的黑色背景，寫上文字，然后內(nèi)容居中
實現(xiàn)無縫滾動
實現(xiàn)文字抖動特效
旋轉(zhuǎn)90度（默認(rèn)橫屏展示）

代碼如下

.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; }
 }

至此，一個包含抖動和滾動特效的手持彈幕功能就實現(xiàn)了。

功能并不復(fù)雜，開始我是想著用canvas畫出來，但是在小程序里canvas這樣的原生組件層級比較高，要是想切換特效寫個修改配置的彈窗啥的，不太好弄。所以就研究了一下用css3寫出來了，在這里我只想說：“css3 牛嗶———?。?！”

小程序內(nèi)更多配置效果預(yù)覽

最近自己做了個小程序，手持彈幕這個功能也加進(jìn)去了，而且實現(xiàn)了更多功能，還能把自己配置好的內(nèi)容分享給好友，歡迎大家掃碼體驗，支持…

在這里插入圖片描述

總結(jié) 第一次寫博客，刪刪減減整了一下午，也不太會寫文章，但還是硬著頭皮寫完了，畢竟人總要學(xué)會自己長大......

到此這篇關(guān)于基于JS簡單實現(xiàn)手持彈幕功能+文字抖動特效代碼的文章就介紹到這了,更多相關(guān)js手持彈幕文字抖動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

純JS開發(fā)baguetteBox.js響應(yīng)式畫廊插件
這篇文章主要介紹了純JS開發(fā)baguetteBox.js響應(yīng)式畫廊插件,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-06-06
小程序scroll-view安卓機隱藏橫向滾動條的實現(xiàn)詳解
這篇文章主要介紹了小程序scroll-view安卓機隱藏橫向滾動條的實現(xiàn)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
JS閉包原理及其使用場景解析
這篇文章主要介紹了JS閉包原理及其使用場景解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-12-12
js實現(xiàn)無限級樹形導(dǎo)航列表效果代碼
這篇文章主要介紹了js實現(xiàn)無限級樹形導(dǎo)航列表效果代碼,通過一個封裝的JS類實現(xiàn)無限樹形導(dǎo)航的效果,非常簡單實用,需要的朋友可以參考下
2015-09-09
小程序?qū)崿F(xiàn)選擇題選擇效果
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)選擇題選擇效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
javascript中的undefined和not defined區(qū)別示例介紹
這篇文章主要介紹了javascript中的undefined和not defined區(qū)別,需要的朋友可以參考下
2014-02-02
淺聊一下JavaScript中的LHS和RHS查詢
在日常編碼中,我們通常關(guān)注代碼的邏輯和功能,但很少深入思考編譯器在幕后的工作,今天我們將學(xué)習(xí)一下LHS（Left-Hand Side）和RHS（Right-Hand Side）查詢,它們在JavaScript編譯和執(zhí)行中的關(guān)鍵作用,以及在我們的日常開發(fā)中是如何發(fā)揮作用的,需要的朋友可以參考下
2023-11-11
ES6知識點整理之函數(shù)對象參數(shù)默認(rèn)值及其解構(gòu)應(yīng)用示例
這篇文章主要介紹了ES6知識點整理之函數(shù)對象參數(shù)默認(rèn)值及其解構(gòu)應(yīng)用,結(jié)合實例形式分析了ES6函數(shù)對象參數(shù)相關(guān)使用技巧,需要的朋友可以參考下
2019-04-04
javascript 彈出的窗口返回值給父窗口具體實現(xiàn)
這篇文章主要介紹了javascript 彈出的窗口返回值給父窗口具體實現(xiàn)，有需要的朋友可以參考一下
2013-11-11
那些項目中常見的TypeScript錯誤總結(jié)
這篇文章主要給大家總結(jié)介紹了一些項目中常見的TypeScript錯誤的相關(guān)資料,如果你想查看所有的錯誤信息和錯誤碼,可以瀏覽TypeScript的源代碼倉庫,當(dāng)然隨著?ts?版本的更新,官網(wǎng)也會逐漸增加更多新的類型錯誤,需要的朋友可以參考下
2022-03-03