Double 11 Tmall red envelope opening and drawing effect based on jQuery_jquery

The example in this article describes the double 11 Tmall red envelope lottery drawing effect code implemented by jQuery. It is a mouse click red envelope shake and shake lottery code implemented based on jquery css3. It has the function of shaking the red envelope and popping up the lottery result information after clicking the lottery. , shared with everyone for your reference. The details are as follows:
The screenshot of the running effect is as follows:

The specific code is as follows:

HTML part:

<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>

Instructions:
.opacity is the winning mask layer;
.red is the lottery picture;
.windows is the interface for winning prizes
CSS part:

@-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)
}
} 

The lottery process is to use CSS transform :rotate. Cooperate with 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%;
}

Here, we let the starting point of the rotation be the bottom center of the image.

    transform-origin:50%100%;
-webkit-transform-origin:50%100%;

jQuery part:

$(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");
})
});

Click the button to add the shake class. Add a timer and remove the shake class after 2 seconds.

Demo demonstration: Double 11 Tmall red envelope opening lottery draw effect

Demo download: Click here to download

This is the Double 11 red envelope prepared for everyone. In the upcoming Double 12, you can start to realize the function of opening the red envelope and drawing the lottery during Double 12.