简单实现一个手持弹幕功能+文字抖动特效


Posted in HTML / CSS onMarch 31, 2021

前段时间抖音上有个抖动弹幕挺火的,于是决定仿写一个,话不多说,先看效果…


效果展示

简单实现一个手持弹幕功能+文字抖动特效

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这样的原生组件层级比较高,要是想切换特效写个修改配置的弹窗啥的,不太好弄。

HTML / CSS 相关文章推荐
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
CSS3实现头像旋转效果
Mar 13 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 #HTML / CSS
Web前端:CSS最强总结 附详细代码
血轮眼轮回眼特效 html+css
css3 filter属性的使用简介
Mar 31 #HTML / CSS
使用canvas实现雪花飘动效果的示例代码
利用html+css实现菜单栏缓慢下拉效果的示例代码
CSS实现多个元素在盒子内两端对齐效果
You might like
php define的第二个参数使用方法
2013/11/04 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
python实现html转ubb代码(html2ubb)
2014/07/03 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
物业接待员岗位职责
2015/04/15 职场文书