Double 11 Tmall pembukaan sampul merah dan kesan lukisan berdasarkan jQuery_jquery

Contoh dalam artikel ini menerangkan kod kesan lukisan loteri sampul merah 11 Tmall yang dilaksanakan oleh jQuery Ia adalah kod loteri klik tetikus goncang dan goncang yang dilaksanakan berdasarkan jquery css3. Ia mempunyai fungsi menggoncang sampul merah dan memaparkan maklumat keputusan loteri selepas mengklik loteri , dikongsi dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut:

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

Arahan:
.opacity ialah lapisan topeng yang menang; .merah ialah gambar loteri; .windows ialah antara muka untuk memenangi hadiah

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

Proses loteri adalah menggunakan CSS transform :rotate. Bekerjasama dengan animasi;

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

Di sini, kita biarkan titik permulaan putaran menjadi bahagian tengah bawah imej.

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

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

Klik butang untuk menambah kelas goncang. Tambah pemasa dan alih keluar kelas goncang selepas 2 saat.

Demonstrasi demo:

Kesan cabutan loteri pembukaan sampul merah Ganda 11 Tmall

Muat turun demo:

Klik di sini untuk memuat turun

Ini adalah sampul merah Double 11 yang disediakan untuk semua orang Dalam Double 12 yang akan datang, anda boleh mula menyedari fungsi membuka sampul merah dan menarik loteri semasa Double 12.