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


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图片边框border-image的用法
Jun 30 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 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语法速查表
2006/12/06 PHP
PHP与SQL注入攻击[一]
2007/04/17 PHP
php强制下载类型的实现代码
2011/04/21 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
Python解析nginx日志文件
2015/05/11 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
愚人节活动策划方案
2014/03/11 职场文书
租赁意向书范本
2014/04/01 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
优秀团支部申报材料
2014/12/26 职场文书
入党转正申请报告
2015/05/15 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技