CSS3 開紅包

近年來，CSS3 技術的應用越來越廣泛。除了頁面布局、動畫效果等常規用途外，還能實現一些神奇的功能，例如：開紅包。

下面，我們就來學習如何使用 CSS3 技術開啟一份充滿驚喜的紅包。

/* 1. 首先，定義一個包裹紅包的盒子 */
.red-packet {
width: 200px;
height: 200px;
position: relative;
cursor: pointer;
}
/* 2. 給盒子添加背景圖片 */
.red-packet::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: url('https://img.alicdn.com/imgextra/i1/O1CN01Z8U0Ic2Dv5qz8aGpW_!!6000000003329-0-tps-600-600.png') no-repeat center;
background-size: contain;
}
/* 3. 鼠標懸停時，改變背景位置 */
.red-packet:hover::before {
background-position: 0 -200px;
}
/* 4. 定義紅包被打開的動畫 */
@keyframes open {
0% {
transform: rotateY(0);
}
50% {
transform: rotateY(90deg);
}
100% {
transform: rotateY(180deg);
}
}
/* 5. 定義打開動畫 */
.opened {
perspective: 800px;
}
.opened .red-packet {
animation: open 1s ease-out forwards;
}
/* 6. JS 控制動畫播放 */
var redPacket = document.querySelector('.red-packet');
redPacket.addEventListener('click', function() {
redPacket.parentNode.classList.add('opened');
});

以上就是 CSS3 開紅包的完整代碼。通過定義一個具有空間感的盒子，實現了紅包背景的位置變化，以及打開動畫的播放。同時，結合 JavaScript 控制動畫的觸發，讓用戶體驗更加流暢自然。

現在，你也可以嘗試使用 CSS3 技術來模擬一份紅包送給你的用戶，讓他們在體驗中感受到你的用心。