Doppelter 11 kleiner roter Umschlagöffnungs- und Zeicheneffekt basierend auf jQuery_jquery

Das Beispiel in diesem Artikel beschreibt den von jQuery implementierten Double-11-Tmall-Lotterie-Shake-Code für rote Umschläge, der auf der Basis von jquery css3 implementiert wird und nachdem Sie auf die Lotterie geklickt haben, werden die Informationen zu den Lotterieergebnissen angezeigt und als Referenz für alle freigegeben. Die Details lauten wie folgt:
Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt:

HTML-Teil:

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

Anleitung:
.opacity ist die beste Maskenebene .red ist das Lotteriebild;
.windows ist die Schnittstelle zum Gewinnen von Preisen

CSS-Teil:

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

Der Lotterieprozess besteht darin, CSS transform :rotate zu verwenden. Mit der Animation zusammenarbeiten;

.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%;
}

Hier legen wir den Startpunkt der Drehung in der unteren Mitte des Bildes fest.

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

jQuery-Teil:

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

Klicken Sie auf die Schaltfläche, um die Shake-Klasse hinzuzufügen. Fügen Sie einen Timer hinzu und entfernen Sie die Shake-Klasse nach 2 Sekunden.

Demo-Demonstration:

Double 11 Tmall Red Envelope Opening Lotto Draw Effect

Demo-Download:

Klicken Sie hier zum Herunterladen

Dies ist der rote Umschlag für Double 11, der für alle vorbereitet ist. Im kommenden Double 12 können Sie beginnen, die Funktion des Öffnens des roten Umschlags und der Ziehung der Lotterie während Double 12 zu erkennen.