基于jQuery实现的双11天猫拆红包抽奖效果

前端之家收集整理的这篇文章主要介绍了基于jQuery实现的双11天猫拆红包抽奖效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery实现的双11天猫拆红包抽奖效果代码,是一款基于jquery+css3实现的鼠标点击红包摇一摇抽奖代码,具有点击抽奖后红包摇动并弹出抽奖结果信息的功能分享给大家供大家参考。具体如下: 运行效果截图如下:

具体代码如下:

HTML部分:

说明: .opacity 是抽中奖的遮罩层; .red 是抽奖图片; .windows 是抽中奖的界面

CSS部分:

摇奖的过程,就是利用CSS的transform :rotate。配合animation;

Box-shadow:1px1px20px#666; position: fixed; top:50%; left:50%; overflow: hidden; margin-left:-150px; margin-top:-172px; transform-origin:50%100%; -webkit-transform-origin:50%100%; }

这里,我们让旋转的起点为图片底部中心。

jQuery部分:

点击按钮,添加shake类。加个定时器,2s后去掉shake类。

demo演示:

demo下载:

这就是为大家准备的双十一红包,在即将到来的双十二中大家可以动手实现双12拆红包抽奖功能

猜你在找的jQuery相关文章