基于jQuery实现的双11天猫拆红包抽奖效果
本文实例讲述了jQuery实现的双11天猫拆红包抽奖效果代码,是一款基于jquery+css3实现的鼠标点击红包摇一摇抽奖代码,具有点击抽奖后红包摇动并弹出抽奖结果信息的功能,分享给大家供大家参考。具体如下:
运行效果截图如下:
具体代码如下:
HTML部分:
<div class="opacity" style="display: none;"></div> <div class="red"><img src="asd23.png"></div> <div class="windows" style="display: none;"> <div class="text"><a href="aa.html">恭喜抽中棒棒糖一枚!</a></div> <a href="saved_resource.html"> <div class="close"><img src="close.png"></div> </a> </div>
说明:
.opacity 是抽中奖的遮罩层;
.red 是抽奖图片;
.windows 是抽中奖的界面
CSS部分:
@-webkit-keyframes shake { 0%{ -webkit-transform: rotate(2deg) translate3d(0,0,0) } 50%{ -webkit-transform: rotate(-2deg) translate3d(0,0,0) } 100%{ -webkit-transform: rotate(2deg) translate3d(0,0,0) } }
摇奖的过程,就是利用CSS的transform :rotate。配合animation;
.red { width:300px; height:345px; border-radius:15px; 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%; }
这里,我们让旋转的起点为图片的底部中心。
transform-origin:50%100%; -webkit-transform-origin:50%100%;
jQuery部分:
$(document).ready(function(){ $(".red").click(function(){ $(this).addClass("shake"); setTimeout(function(){ $(".red").removeClass("shake"); $(".windows").fadeIn(); $(".opacity").fadeIn(); },2000); }); $(".close").click(function(){ $(this).parent().fadeOut(); $(".opacity").fadeOut(); $(".windows").css("display","none"); }) });
点击按钮,添加shake类。加个定时器,2s后去掉shake类。
demo演示:双11天猫拆红包抽奖效果
demo下载:点进来下载
这就是为大家准备的双十一红包,在即将到来的双十二中大家可以动手实现双12拆红包抽奖功能。
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17