快捷導(dǎo)航

基于JS簡(jiǎn)單實(shí)現(xiàn)手持彈幕功能+文字抖動(dòng)特效代碼

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

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

前段時(shí)間抖音上有個(gè)抖動(dòng)彈幕挺火的，于是決定仿寫(xiě)一個(gè)，話不多說(shuō)，先看效果…

效果展示

在這里插入圖片描述

GIF圖看著有點(diǎn)模糊，但實(shí)際效果還是不錯(cuò)的。

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

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

代碼如下

.html

 <div class="barrage-box">
  <div class="text">抖動(dòng)字幕</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;
 }

 /* 文字滾動(dòng) */
 @keyframes aniMove {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
 }
 
 /* 抖動(dòng)字幕效果 */
 @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; }
 }

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

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

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

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

在這里插入圖片描述

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

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

您可能感興趣的文章:

相關(guān)文章

JavaScript對(duì)象解構(gòu)的用法實(shí)例解析
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z(yǔ)法將數(shù)組和對(duì)象的屬性賦給各種變量,下面這篇文章主要給大家介紹了關(guān)于JavaScript對(duì)象解構(gòu)用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-01-01
微信小程序環(huán)境下將文件上傳到OSS的方法步驟
這篇文章主要介紹了微信小程序環(huán)境下將文件上傳到OSS的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
Javascript作用域(局部和全局作用域)詳細(xì)介紹
作用域是當(dāng)前的執(zhí)行上下文，值和表達(dá)式在其中“可見(jiàn)”或可被訪問(wèn)，本文主要介紹了Javascript局部作用域和全局作用域，文中有詳細(xì)的代碼示例，具有一定的參考價(jià)值,需要的朋友可以借鑒一下
2023-06-06
DLL+ ActiveX控件+WEB頁(yè)面調(diào)用例子
因項(xiàng)目需要，開(kāi)始學(xué)習(xí)并研究VC、DLL及ActiveX控件，網(wǎng)上資料找了很多，但沒(méi)一個(gè)可用的或者說(shuō)沒(méi)一個(gè)例子可理解并運(yùn)行的。沒(méi)辦法，自己研究吧。功夫不負(fù)有心人，終有小成了，呵呵，現(xiàn)在把自己學(xué)習(xí)總結(jié)了一下，獻(xiàn)給需要的人。
2010-08-08
JS深度拷貝Object Array實(shí)例分析
這篇文章主要介紹了JS深度拷貝Object Array,結(jié)合實(shí)例形式分析了JavaScript深度拷貝的原理,需要的朋友可以參考下
2016-03-03
JavaScript三種方法解決約瑟夫環(huán)問(wèn)題的方法
約瑟夫環(huán)問(wèn)題又稱約瑟夫問(wèn)題或丟手絹問(wèn)題，是一道經(jīng)典的算法問(wèn)題，本篇將以循環(huán)鏈表、有序數(shù)組、數(shù)學(xué)遞歸三種方式來(lái)解決約瑟夫環(huán)問(wèn)題。感興趣的可以了解一下
2021-09-09
微信小程序自定義計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義計(jì)時(shí)器功能，設(shè)置一個(gè)時(shí)間，可以開(kāi)始倒計(jì)時(shí)、暫停，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
$javascript 動(dòng)態(tài)table添加colspan\rowspan 參數(shù)的方法$
javascript 動(dòng)態(tài)table添加colspan\rowspan 參數(shù)的方法
動(dòng)態(tài)的給某個(gè)表對(duì)象添加列屬性和行屬性，采用obj.setAttribute("rowspan",n)(即rowspan=n)不能生效。
2009-07-07
javascript中select下拉框的用法總結(jié)
這篇文章主要為大家介紹了javascript中select下拉框的用法，select在開(kāi)發(fā)中經(jīng)常被用到，用于進(jìn)行選項(xiàng)選擇,需要的朋友可以參考下
2016-01-01
JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例
這篇文章主要介紹了JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03