基于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; }
  }

至此，一个包含抖动和滚动特效的手持弹幕功能就实现了。

功能并不复杂，开始我是想着用canvas画出来，但是在小程序里canvas这样的原生组件层级比较高，要是想切换特效写个修改配置的弹窗啥的，不太好弄。所以就研究了一下用css3写出来了，在这里我只想说：“css3 牛哔———！！！”


小程序内更多配置效果预览

最近自己做了个小程序，手持弹幕这个功能也加进去了，而且实现了更多功能，还能把自己配置好的内容分享给好友，欢迎大家扫码体验，支持…

总结 第一次写博客，删删减减整了一下午，也不太会写文章，但还是硬着头皮写完了，毕竟人总要学会自己长大......

到此这篇关于基于JS简单实现手持弹幕功能+文字抖动特效代码的文章就介绍到这了,更多相关js手持弹幕文字抖动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 简单实现JavaScript弹幕效果

    简单实现JavaScript弹幕效果

    不知大家有没有感受到,弹幕又是另一出好戏!! 不过我个人还是比较排斥看电视的时候被出来的弹幕打扰.今天我们来写一个简单的弹幕.简单到什么程度呢?看下效果: 由图可以看出,我们的呆毛html结构确实是非常简单啦. 就是由一个div.一个input框另加一个button组成. <div id="box" class="box"></div> <input type="text" id="txt" /&

  • JavaScript直播评论发弹幕切图功能点集合效果代码

    JavaScript直播评论发弹幕切图功能点集合效果代码

    一.代码 html+js <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="styl

  • JS实现的视频弹幕效果示例

    JS实现的视频弹幕效果示例

    本文实例讲述了JS实现的视频弹幕效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>斗鱼

  • 基于JavaScript实现弹幕特效

    基于JavaScript实现弹幕特效

    本文实例为大家分享了js实现弹幕特效的具体代码,供大家参考,具体内容如下 此处使用HBuilder编译,最简单的弹幕效果,希望各位前辈不吝指教. 注意用的是jquery-2.0.3.js <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css&

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

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

    前段时间抖音上有个抖动弹幕挺火的,于是决定仿写一个,话不多说,先看效果- 效果展示 GIF图看着有点模糊,但实际效果还是不错的. 第一眼看上去也不知道该咋做,那就先把要实现的功能拆解一下吧. 生成一个铺满全屏的黑色背景,写上文字,然后内容居中 实现无缝滚动 实现文字抖动特效 旋转90度(默认横屏展示) 代码如下 .html <div class="barrage-box"> <div class="text">抖动字幕</div>

  • 基于JS+Canvas的lucky-canvas 抽奖功能

    基于JS+Canvas的lucky-canvas 抽奖功能

    目录 ucky-canvas 介绍 lucky-canvas 功能特点 自由配置 多端适配 响应式 代码块展示 效果图展示 代码如下 抽奖一 抽奖二 抽奖三 ucky-canvas 介绍 一个基于 Js + Canvas 的[大转盘 & 九宫格 & 老虎机]抽奖, 致力于为 web 前端提供一个功能强大且专业可靠的组件, 只需要通过简单配置即可实现自由化定制, 帮助你快速的完成产品需求. lucky-canvas 功能特点 自由配置 奖品 / 文字 / 图片 / 颜色 / 按钮均可自由配置

  • JS简单实现表格排序功能示例

    本文实例讲述了JS简单实现表格排序功能的方法.分享给大家供大家参考,具体如下: 思路:遍历每个li,并把它们存放到数组中去,然后通过sort()方法进行排序,再插入 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt

  • 基于JS实现checkbox全选功能实例代码

    基于JS实现checkbox全选功能实例代码

    需求:要求实现点击全选选中所有菜单,再次点击全选取消选中.此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧! 效果图如下: 点击全选之前: 点击全选之后: 再次点击全选之后: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l

  • JS简单表单验证功能完整示例

    JS简单表单验证功能完整示例

    本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

  • 基于JS实现二维码名片生成的示例代码

    基于JS实现二维码名片生成的示例代码

    目录 演示 技术栈 源码 css js 演示 技术栈 这里用到了一个二维码生成库qrcode.js下面是简单介绍: //初始化QRCode对象 var qrcode = new QRCode(document.getElementById("qrcode")); //也可以在初始化QRCode对象,传入更多参数 var qrcode = new QRCode(document.getElementById("qrcode"),{ width: 128, height

  • 基于JS编写开心消消乐游戏的示例代码

    基于JS编写开心消消乐游戏的示例代码

    目录 展示 游戏背景 游戏规则 源码部分 对关卡的地图设置 介绍一下游戏中的一些功能 展示 游戏背景 一天晚上,天空中掉下一颗神奇的豌豆种子,正好落在了梦之森林的村长屋附近,种子落地后吸收了池塘的水分,迅速成长,一夜之间变成参天大藤蔓…… 第二天早上,村民们醒来后看到巨大的藤蔓都惊呆了,聚在一起议论纷纷.有人说他似乎看到村长的房子在高耸入云的藤蔓上,房子似乎还在上升,有人号召说应该爬上去救村长,玩家需要爬到藤曼顶部救出村长 游戏规则 把三个颜色相同的小动物连成一条直线,即可消除.达到指定的目标通

  • 基于js与flash实现的网站flv视频播放插件代码

    本文实例讲述了基于js与flash实现的网站flv视频播放插件代码.分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1

  • 如何通过js实现图片预览功能【附实例代码】

    如何通过js实现图片预览功能【附实例代码】

    实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • 使用 js 简单的实现 bind、call 、aplly代码实例

    这篇文章主要介绍了使用 js 简单的实现 bind.call .aplly代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Function.prototype._call = function(obj,...arg){ var me = this; var k = Symbol("test"); //生成唯一的 key obj[k] = me; var result = obj[k](...arg); delete obj[k

随机推荐