jQuery霓虹灯转盘抽奖弹窗
jQuery 的霓虹灯转盘加抽奖弹出层,挺适合搞活动页面的,视觉效果一下就拉满了。转盘的部分用 CSS 加上 jQuery 控制旋转角度,搭配个霓虹灯的动画,看着还挺带感的。抽奖完自动弹出中奖提示,配个 fadeIn 效果,交互也还不错。
jQuery 的事件绑定和动画控制,在这里用得挺顺溜。点击开始按钮,转盘转起来,停下后直接弹个奖品提示层。逻辑不复杂,代码也清爽,用rotate()
加个setTimeout
就搞定。
霓虹灯的动画写得也挺好,用@keyframes
定义光效,加上box-shadow
堆叠,闪烁的感觉一下就出来了。你想换颜色或者改频率,动下 CSS 就行。
还有一个细节不错,中奖提示弹窗用fadeIn()
和fadeOut()
做的,有点小弹窗的感觉,动效也不会太突兀。整个流程下来,体验还蛮流畅的。
如果你正好要做活动页,或者要搞个互动抽奖,这一套拿来就能用。代码也挺好改,想加次数限制、声音、奖品图都挺方便的。
下载地址
用户评论