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초 후에 Shake 클래스를 제거합니다.

데모 시연: 더블11 티몰 빨간 봉투 개봉 복권 추첨 효과

데모 다운로드: 다운로드하려면 여기를 클릭하세요

모두를 위해 준비한 더블 11 빨간 봉투입니다. 다가오는 더블 12에서는 더블 12 기간 동안 빨간 봉투를 열고 복권을 추첨하는 기능을 실감할 수 있습니다.