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


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 相关文章推荐
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 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非阻塞模式
2016/03/03 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
jquery下checked取值问题的解决方法
2012/08/09 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
Python合并多个装饰器小技巧
2015/04/28 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
Golang与python线程详解及简单实例
2017/04/27 Python
Python中修改字符串的四种方法
2018/11/02 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
企划经理的岗位职责
2013/11/17 职场文书
销售找工作求职信
2013/12/20 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
个人作风建设总结
2014/10/23 职场文书
奖励通知
2015/04/22 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python