欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2021年03月31日 12:03:00   作者：aimengmei  
這篇文章主要介紹了基于JS簡單實現(xiàn)手持彈幕功能+文字抖動特效代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

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

效果展示

在這里插入圖片描述

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

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

  1. 生成一個鋪滿全屏的黑色背景，寫上文字，然后內(nèi)容居中
  2. 實現(xiàn)無縫滾動
  3. 實現(xiàn)文字抖動特效
  4. 旋轉(zhuǎn)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; }
 }

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

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

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

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

在這里插入圖片描述

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

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

相關文章

  • JavaScript對象解構(gòu)的用法實例解析

    JavaScript對象解構(gòu)的用法實例解析

    解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z法將數(shù)組和對象的屬性賦給各種變量,下面這篇文章主要給大家介紹了關于JavaScript對象解構(gòu)用法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-01-01
  • 微信小程序環(huán)境下將文件上傳到OSS的方法步驟

    微信小程序環(huán)境下將文件上傳到OSS的方法步驟

    這篇文章主要介紹了微信小程序環(huán)境下將文件上傳到OSS的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • Javascript作用域(局部和全局作用域)詳細介紹

    Javascript作用域(局部和全局作用域)詳細介紹

    作用域是當前的執(zhí)行上下文，值和表達式在其中“可見”或可被訪問，本文主要介紹了Javascript局部作用域和全局作用域，文中有詳細的代碼示例，具有一定的參考價值,需要的朋友可以借鑒一下
    2023-06-06
  • DLL+ ActiveX控件+WEB頁面調(diào)用例子

    DLL+ ActiveX控件+WEB頁面調(diào)用例子

    因項目需要，開始學習并研究VC、DLL及ActiveX控件，網(wǎng)上資料找了很多，但沒一個可用的或者說沒一個例子可理解并運行的。沒辦法，自己研究吧。功夫不負有心人，終有小成了，呵呵，現(xiàn)在把自己學習總結(jié)了一下，獻給需要的人。
    2010-08-08
  • JS深度拷貝Object Array實例分析

    JS深度拷貝Object Array實例分析

    這篇文章主要介紹了JS深度拷貝Object Array,結(jié)合實例形式分析了JavaScript深度拷貝的原理,需要的朋友可以參考下
    2016-03-03
  • JavaScript三種方法解決約瑟夫環(huán)問題的方法

    JavaScript三種方法解決約瑟夫環(huán)問題的方法

    約瑟夫環(huán)問題又稱約瑟夫問題或丟手絹問題，是一道經(jīng)典的算法問題，本篇將以循環(huán)鏈表、有序數(shù)組、數(shù)學遞歸三種方式來解決約瑟夫環(huán)問題。感興趣的可以了解一下
    2021-09-09
  • 微信小程序自定義計時器功能

    微信小程序自定義計時器功能

    這篇文章主要為大家詳細介紹了微信小程序自定義計時器功能，設置一個時間，可以開始倒計時、暫停，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-09-09
  • javascript 動態(tài)table添加colspan\rowspan 參數(shù)的方法

    javascript 動態(tài)table添加colspan\rowspan 參數(shù)的方法

    動態(tài)的給某個表對象添加列屬性和行屬性，采用obj.setAttribute("rowspan",n)(即rowspan=n)不能生效。
    2009-07-07
  • javascript中select下拉框的用法總結(jié)

    javascript中select下拉框的用法總結(jié)

    這篇文章主要為大家介紹了javascript中select下拉框的用法，select在開發(fā)中經(jīng)常被用到，用于進行選項選擇,需要的朋友可以參考下
    2016-01-01
  • JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例

    JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例

    這篇文章主要介紹了JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-03-03

最新評論