抖音弹幕玩法汉字找不同让鼠标指针自动漂浮的实现原理及代码

如下图,抖音直播间弹幕互动玩法,为了增强用户的视觉感知体验,在里面加了一个鼠标,来让用户感知到自己在操作。下一节我们将背景音乐也给加上去。

我们实现的方案是用anime.js动画,来让一个图片在指定区域范围内随机漂浮动。实现的结果如下图:

抖音弹幕玩法汉字找不同让鼠标指针自动漂浮的实现原理及代码_第1张图片

主要代码如下图

dom结构 

抖音弹幕玩法汉字找不同让鼠标指针自动漂浮的实现原理及代码_第2张图片

js代码片断

抖音弹幕玩法汉字找不同让鼠标指针自动漂浮的实现原理及代码_第3张图片

你可能感兴趣的:(anime.js,js动画,抖音弹幕)