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


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的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 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创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
利用php输出不同的心形图案
2016/04/22 PHP
jquery tools之tooltip
2009/07/25 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
python中返回矩阵的行列方法
2018/04/04 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
使用tensorflow实现线性回归
2018/09/08 Python
Python File(文件) 方法整理
2019/02/18 Python
解决python 文本过滤和清理问题
2019/08/28 Python
python3多线程知识点总结
2019/09/26 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
保荐人的岗位职责
2013/11/19 职场文书
正规的求职信范文分享
2013/12/11 职场文书
高中生自我评语大全
2014/01/19 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
委托收款证明
2015/06/23 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技