CSS紅包打開特效是一種非常炫酷的效果，很受大家歡迎。這種效果可以在用戶點擊紅包時將其打開，并顯示出其中的內容。下面我們來看一下實現這種效果的CSS代碼。

.red-envelope {
position: relative;
width: 80px;
height: 80px;
background-image: url(red-envelope.png);
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
.red-envelope:hover {
transform: scale(1.2);
transition: all 0.2s ease-in-out;
}
.red-envelope.clicked {
animation: open-envelope 0.6s ease-in-out;
}
@keyframes open-envelope {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg) scale(1.2);
}
}
.red-envelope .content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
font-size: 24px;
text-align: center;
line-height: 80px;
background-color: rgba(255, 0, 0, 0.8);
visibility: hidden;
opacity: 0;
transition: all 0.2s ease-in-out;
}
.red-envelope.clicked .content {
visibility: visible;
opacity: 1;
}

代碼中，首先定義了一個紅包樣式，包括寬高、背景圖片、鼠標指針樣式等。當鼠標懸停在紅包上時，使用transform屬性放大紅包并添加過渡效果。當用戶點擊紅包時，添加一個.clicked類，并使用動畫將其打開，展示紅包中的內容。內容的樣式也被定義在代碼中，包括寬高、顏色、字體大小等。當紅包被打開后，內容使用visibility和opacity屬性顯示出來，并添加過渡效果。

通過這段代碼，我們可以快速實現一個炫酷的紅包打開效果，在網頁中增加趣味和動感。