JS简单实现手持弹幕功能+文字抖动特效代码

本文介绍如何在小程序中利用CSS3实现手持弹幕功能，包含文字抖动与无缝滚动特效。通过旋转屏幕、Flex布局及关键帧动画，解决原生Canvas层级过高问题，提供配置分享等实用功能。

效果展示

尽管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手持弹幕文字抖动内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

基于JS与CSS3实现手持弹幕及文字抖动特效

效果展示

具体代码实现如下

实用工具推荐