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


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制作动感导航条示例
Jan 26 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
html+css实现环绕倒影加载特效
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
在数据量大(超过10万)的情况下
2007/01/15 PHP
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
jQuery 使用手册(一)
2009/09/23 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
利用Python实现kNN算法的代码
2019/08/16 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
人力资源主管职责范本
2014/03/05 职场文书
新品发布会主持词
2014/04/02 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
入团介绍人意见范文
2015/06/04 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
详解Python中*args和**kwargs的使用
2022/04/07 Python