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


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中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 #HTML / CSS
Web前端:CSS最强总结 附详细代码
血轮眼轮回眼特效 html+css
css3 filter属性的使用简介
Mar 31 #HTML / CSS
使用canvas实现雪花飘动效果的示例代码
利用html+css实现菜单栏缓慢下拉效果的示例代码
CSS实现多个元素在盒子内两端对齐效果
You might like
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
用JS实现的一个include函数
2007/07/21 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
Python中格式化字符串的四种实现
2020/05/26 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
人力资源管理专业学生自我评价
2013/11/20 职场文书
社区党员先进事迹
2014/01/22 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
信息技术研修心得体会
2016/01/08 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏