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

最新推荐文章于 2022-05-26 10:36:21 发布
最新推荐文章于 2022-05-26 10:36:21 发布
阅读量3.8k 收藏 15
点赞数 8
分类专栏： 亿点点工具 文章标签： html5 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37359558/article/details/115301053
版权

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

前段时间抖音上有个抖动弹幕挺火的，于是决定仿写一个，话不多说，先看效果…

效果展示

在这里插入图片描述

GIF图看着有点模糊，但实际效果还是不错的。

第一眼看上去也不知道该咋做，那就先把要实现的功能拆解一下吧。

  1. 生成一个铺满全屏的黑色背景，写上文字，然后内容居中
  2. 实现无缝滚动
  3. 实现文字抖动特效
  4. 旋转90度（默认横屏展示）

代码如下

.html


  <div class="barrage-box">
      <div class="text">抖动字幕</div>
最低0.47元/天 解锁文章
aimengmei
关注
  • 8
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
专栏目录
手持弹幕（全屏文字滚动）
qq_36752481的博客
10-23 1548
手持弹幕（全屏文字滚动）效果测试（如图） 可以搜下小程序;滚屏神器 奉上小程序代码： wxml： <!--pages/02-23/demo1/newDanMu.wxml--> <view class="textBox" style="background-color:{{backgroundColor}}"> <view class='text' style="font-size: {{fontSize}}rpx; animation: anima...
小程序文字循环滚动动画（完美解决）
tongtongsong的博客
06-11 2369
解决问题： 1、文字循环播放特效 2、小程序退出、隐藏后台动画停止（已解决）
小程序文字变化动画
沫沫酱
05-03 3948
小程序中要求几处文案一直变化，并在最后固定一个文案，一开始想使用多个setInterval来控制这几处文案，但是发现多线程总是出问题，现在改成了一个线程来控制这几处文案的变化效果图：wxml文件： &lt;view class='detailTopTextCon'&gt; &lt;label class='detailTopText detailTopText1 detailTop...
小程序基本命令
aiven1637的博客
10-30 3263
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序实现无限滚动列表
10-17
主要为大家详细介绍了微信小程序实现无限滚动列表，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
炫酷手持滚动弹幕生成小工具微信小程序源码下载多样化模板
03-25
这是一款滚动弹幕生成微信小程序源码 让弹幕文字在手机屏幕上跑起来,LED弹幕 手机弹幕,告白神奇,等 支持多种模板,每一种模板都支持自定义颜色等等 字体跳动,字体表白等等 另外用户也可以支持自定义文字 自定义...
ead：实现一个多功能闹钟.doc
06-06
设计了一个主模块clock，实现了闹钟的基本功能，并调用了多个子模块，例如闹钟时间设定子模块alarm_time、计时子模块counter_time、译码显示子模块led、加法器子模块adder、16进制计数器子模块hexcounter、50MHz时钟...
jQuery+css3实现文字跟随鼠标的上下抖动
10-23
主要介绍了jQuery+css3实现文字跟随鼠标的上下抖动的相关资料,需要的朋友可以参考下
unity3D实现摄像机抖动特效
08-25
CameraShake类使用了一个基于随机数的抖动算法来实现摄像机抖动。该算法包括以下步骤： 1. 初始化摄像机的初始状态 2. 生成随机数来确定抖动的方向和幅度 3. 根据抖动的方向和幅度来计算摄像机的当前状态 4. 将摄像...
炫酷文字抖动动画网页特效.rar
最新发布
10-01
非常实用的特效代码，可以完美运行，可以二次修改！
小程序实现左右来回滚动字幕效果
10-17
主要为大家详细介绍了小程序实现左右来回滚动字幕效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
iOS实现图片抖动效果
01-03
本文实例为大家分享了iOS实现图片抖动效果的具体代码，供大家参考，具体内容如下 效果图： 核心代码： // // ViewController.m // 图标抖动 // // Created by llkj on 2017/8/29. // Copyright :copyright: 2017年 LayneCheung. All rights reserved. // #import ViewController.h #define angle2Rad(angle) ((angle) / 180.0 *M_PI) @interface ViewController () @property (weak,
LED Ticker View(iPhone源代码)
03-17
来源：Licence：Apache 2.0平台：iOS设备：iPhone / iPad作者：Jay Ayres     实现类似LED灯效果的点阵文字，文字可以循环滚动。可以由单色组成文字（即所有点均为一种颜色），也可以用多种颜色组成文字（即所有点有各种颜色）。    [优才 · Code4App]编译测试，适用环境：Xcode 4.5, iOS 4.3 以上。
js 特效 html 特效 文字抖动特效
10-11
js 特效 html 特效 文字抖动特效 js 特效 html 特效 文字抖动特效
微信图文弹幕代码
02-24
微信图文弹幕代码
手机手持滚动LED弹幕源码
qq_16390503的博客
06-22 3260
在日常追星，蹦迪或者演唱会上，怎么样才能最快最简单的获得他人注意呢？下面就由小编为你带来介绍。 小程序「LED手机滚动弹幕」 目前已有30万用户进行使用，具有抖音效果版本、3D文字版本、像素版本、闪烁跳跃版本、还有酷炫闪屏功能，无需下载，即可直接使用。扫码体验吧～ 大家可以测试下，有需要的小伙伴可以留言，看情况分享源码 ...
微信小程序 - 新闻动态 / 公告上下滚动列表（上下循环滚动，无限上下自动滚动列表）
王佳斌
05-26 5499
前言 本文实现了 无限上下自动滚动列表 组件，常见于新闻动态列表、公告等场景，可直接调用。 您可以自定义滚动间隔与显示多少个列表， 另外点击每项会触发事件，可用于跳转到详情页。 代码干净整洁，注释详细，具体如下图所示： 示例代码 推荐使用平台提供的一键复制功能，避免发生漏选难以排查。 随便找个页面，按照以下代码进行依次复制。 <!-- display-multiple-items: 显示的滑块数量(显示几个列表)，注意对应CSS也要更改，保持总高度与每项高度成"正比"，详见CSS文件。 -
微信小程序开发教程5：设置全局css样式
IT_Most的博客
11-10 4662
设置全局css样式 ...
微信小程序 Canvas做手持弹幕的一个发现
weixin_30469385的博客
03-16 3442
实现效果：        &lt;!--pages/gogogo/gogogo.wxml--&gt; &lt;canvas canvas-id='firstCanvas' style='position:absolute;z-index:25;width:100%;height:100%;'&gt;&lt;/canvas&gt; &lt;canvas canvas-id='secon...
css 实现文字抖动
05-31
以下是一个简单的例子： ```css /* 定义关键帧 */ @keyframes shake { 0% { transform: translate(0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate(-2px, -2px); } 20%, 40%, 60%, 80% { transform: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

aimengmei

每一份赞赏都是无声的鼓励...

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值