在春節(jié)等各種重大慶典或活動(dòng)中，開(kāi)紅包是不可或缺的部分。為了增加用戶體驗(yàn)，我們可以在網(wǎng)頁(yè)上添加開(kāi)紅包的特效。CSS可以輕松實(shí)現(xiàn)這個(gè)功能。

.red-envelope {
position: relative;
display: inline-block;
width: 120px;
height: 120px;
background-image: url("red-envelope.png");
background-size: cover;
transition-property: all;
transition-duration: 1s;
transition-timing-function: cubic-bezier(.25,.1,.25,1);
cursor: pointer;
}
.red-envelope:hover {
transform: scale(1.2);
box-shadow: 0 0 40px rgba(230, 50, 50, 0.8);
}
.red-envelope:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
transform: translate(-50%, -50%);
background-image: url("red-envelope-open.png");
background-size: cover;
opacity: 0;
transition: all .3s ease-out;
}
.red-envelope:hover:after {
opacity: 1;
}

使用以上代碼，我們可以創(chuàng)建一個(gè)顯示紅包的元素。當(dāng)用戶將鼠標(biāo)懸停在這個(gè)元素上時(shí)，紅包會(huì)放大并帶有一個(gè)紅色的陰影。當(dāng)用戶單擊該元素時(shí)，可以觸發(fā)其他事件，例如跳轉(zhuǎn)到另一個(gè)頁(yè)面或顯示一個(gè)神秘的祝福。