Javascript[23天] JS各种抽奖效果实践

0

[23天] JS各种抽奖效果实践

阅读:221 时间:2022年06月08日

几种常见的抽奖效果俄罗斯大转盘跑马灯老虎机翻纸牌刮刮乐俄罗斯大转盘效果:实现思路:主要为css transform属性配合 rotate()旋转函数实现效果,加JS计算旋转的角度达到精确控制。实现思路简易Demo代码:俄罗斯大转盘.zip跑马灯效果:实现思路:...

几种常见的抽奖效果

  • 俄罗斯大转盘

  • 跑马灯

  • 老虎机

  • 翻纸牌

  • 刮刮乐

俄罗斯大转盘

效果:

chrome-capture (10).gif

实现思路:

主要为css transform属性配合 rotate()旋转函数实现效果,加JS计算旋转的角度达到精确控制。

实现思路简易Demo代码:

俄罗斯大转盘.zip

跑马灯

效果:

chrome-capture (9).gif

实现思路:

使用css grid布局加JS控制

实现思路简易Demo代码:

choujiang-pmd.zip

老虎机

效果:

chrome-capture (10).gif.

实现思路:

使用css transform: translateY()控制上滚动画效果

实现思路简易Demo代码:

choujiang-lhj.zip


翻纸牌

这个同样是css transform 3d的实现,很简单

chrome-capture (17).gif

DEMO代码:

choujiang-fp.zip


刮刮乐

chrome-capture (18).gif

这个主要是用canvas画布api加鼠标事件绘制实现。需要canvas基础知识。

Demo代码:

choujiang-ggl.zip



发现一个JS+Canvas的抽奖实现(没用过,有需要自行尝试): https://100px.net/

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^