基于JS實現手持彈幕功能+文字抖動特效的方法

這篇文章主要介紹了基于JS實現手持彈幕功能+文字抖動特效的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

效果展示

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

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

1. 生成一個鋪滿全屏的黑色背景，寫上文字，然后內容居中

2. 實現無縫滾動

3. 實現文字抖動特效

4. 旋轉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; }
  }

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“基于JS實現手持彈幕功能+文字抖動特效的方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!