jQuery_jquery に基づく Double 11 Tmall 赤い封筒の開封と描画効果

この記事の例は、jQuery で実装されたダブル 11 Tmall 赤い封筒の抽選エフェクト コードを説明しています。これは、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 変換 :rotate を使用します。アニメーションとの連携

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

ボタンをクリックしてシェイククラスを追加します。タイマーを追加し、2 秒後にシェイク クラスを削除します。

デモデモンストレーション: Double 11 Tmall 赤封筒開封抽選効果

デモのダウンロード: ダウンロードするにはここをクリックしてください

これは皆さんのために用意されたダブル 11 の赤い封筒です。今度のダブル 12 では、ダブル 12 中に赤い封筒を開けてくじを引く機能を実感できるようになります。