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


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 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
时尚的CSS3进度条效果
Feb 22 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 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查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
python使用Tkinter显示网络图片的方法
2015/04/24 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
django+mysql的使用示例
2018/11/23 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
三年级音乐教学反思
2014/01/28 职场文书
卫生安全检查制度
2014/02/04 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
汽车转让协议书范本
2014/12/07 职场文书
旅游项目合作意向书
2015/05/08 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS