Double 11 Tmall pembukaan sampul merah dan kesan lukisan berdasarkan jQuery

Double 11 Tmall pembukaan sampul merah dan kesan lukisan berdasarkan jQuery_jquery

WBOY

Lepaskan： 2016-05-16 15:28:24

asal

1562 orang telah melayarinya

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

Salin selepas log masuk

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.