Effet d'ouverture et de dessin d'enveloppe rouge Double 11 Tmall basé sur jQuery_jquery

L'exemple dans cet article décrit le code d'effet de dessin de loterie à enveloppe rouge double 11 Tmall implémenté par jQuery. Il s'agit d'un code de loterie shake and shake d'enveloppe rouge en clic de souris implémenté sur la base de jquery css3. et afficher les informations sur les résultats de la loterie après avoir cliqué sur la loterie, partagées avec tout le monde pour votre référence. Les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

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

Instructions :
.opacity est le calque de masque gagnant
.red est l'image de la loterie
.windows est l'interface pour gagner des prix
Partie 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)
}
} 

Le processus de loterie consiste à utiliser la transformation CSS :rotate. Coopérer avec l'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%;
}

Ici, nous laissons le point de départ de la rotation être le centre inférieur de l'image.

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

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

Cliquez sur le bouton pour ajouter la classe shake. Ajoutez une minuterie et supprimez la classe de shake après 2 secondes.

Démonstration : Effet de tirage de loterie d'ouverture d'enveloppe rouge Double 11 Tmall

Téléchargement de la démo : Cliquez ici pour télécharger

Il s'agit de l'enveloppe rouge Double 11 préparée pour tout le monde. Dans le prochain Double 12, vous pouvez commencer à réaliser la fonction d'ouverture de l'enveloppe rouge et de tirage à la loterie pendant Double 12.