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

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

具体代码如下：

超文本标记语言部分：

' div class='不透明度style=' display : none '/div div class=' red ' img src=' http : ASD 23。png '/div div class=' windows ' style=' display : none；div class='text'a href='aa.html '恭喜抽中棒棒糖一枚！/a/diva href=' saved _ resource。html ' div class=' close ' img src=' http : close。png '/div/a/div说明：不透明是抽中奖的遮罩层；红色是抽奖图片；窗子是抽中奖的界面半铸钢钢性铸铁(铸造半钢)部分：

@-网络套件-关键帧摇动{0%{-webkit-transform:旋转(2deg)平移3d(0，0，0)}50%{-webkit-transform:旋转(-2deg)平移3d(0，0，0)}100%{-webkit-transform:旋转(2deg)平移3d(0，0，0)}}摇奖的过程，就是利用半铸钢钢性铸铁(铸造半钢)的变换：旋转。配合动画；红色{ width :300 px h8 :345 px border-radius :15 px；box-shadow :1 px1px 20 px # 666；位置：固定；前：50%；左侧：50%;飞越：隐藏；边距-左侧：-150像素；页边距-顶部：-172像素；transform-origin:500%；-webkit-transform-origin:500%；}这里，我们让旋转的起点为图片的底部中心。

transform-origin:500%；-webkit-transform-origin:500%；jQuery部分：

$(文档)。ready(function(){$(')).红色')。单击(function(){$(this)).addCLaSS(' shake ')；setTimeout(函数(){$(')。红色')。移除CLaSS(' shake ')；$('.windows ').fadeIn()；$('.不透明度')。fadeIn()；},2000);});$('.关闭')。单击(function(){$(this)).父项()。淡出()；$('.不透明度')。淡出()；$('.windows ').css('display '，' none ')；})});点击按钮，添加摇动类。加个定时器，2s后去掉摇动类。

演示演示：双11天猫拆红包抽奖效果

演示下载：点进来下载

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