WeChat Red Packet (微信红包)

This project is created for testing my ability to design website.

我第一个含中文的仓库（我是**人:joy:）

I have spent half an hour to develop the first version of the red packet.

The most interesting part is when you clicked the 開 button, it made a 3D animation, which I implemented this way:

.packet-opening{
	animation: openbtn 2.5s linear;
}
@keyframes openbtn{
	0% {
		transform: rotateY(0deg);
	}
	50% {
		transform: rotateY(180deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}

To handle click event, I do such stuff in JavaScript

function open_packet(){
	var p=document.getElementById("packet-btn");
	p.classList.add("packet-opening");
	setTimeout(function(){
		p.classList.remove("packet-opening");
	},2500);
}

Then I added onclick="open_packet()" on the 開 button element.

<div title="开红包" id="packet-btn" class="packet-yellow-bg circle" onclick="open_packet()">
	<h1>開</h1>
</div>

TravorLZH/WeChatRedPacket

WeChat Red Packet (微信红包)