CSS中，打開禮物是指通過懸停或點(diǎn)擊，讓包裝被撕開展示出禮物內(nèi)容的效果。這種效果通常應(yīng)用于電商或節(jié)日促銷網(wǎng)站中，可以增強(qiáng)頁面的趣味性和用戶互動(dòng)性。

實(shí)現(xiàn)打開禮物的效果需要在HTML中嵌套兩個(gè)div元素，一個(gè)用于包裝禮物，一個(gè)用于展示禮物內(nèi)容。CSS樣式中需要設(shè)置初始狀態(tài)、鼠標(biāo)懸停狀態(tài)和點(diǎn)擊狀態(tài)的樣式。

.gift-wrap {
position: relative;
}
.gift-wrap .gift {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all .5s ease-in-out;
}
.gift-wrap:hover .gift,
.gift-wrap.clicked .gift {
opacity: 1;
}

上述樣式中，.gift-wrap設(shè)置為相對(duì)定位，.gift設(shè)置為絕對(duì)定位。.gift的opacity屬性初始值為0，鼠標(biāo)懸?；螯c(diǎn)擊時(shí)變?yōu)?，使用transition屬性實(shí)現(xiàn)平滑過渡。.gift-wrap:hover和.gift-wrap.clicked分別表示鼠標(biāo)懸停和點(diǎn)擊狀態(tài)，改變.gift的opacity值。

在HTML代碼中，需要在包裝禮物的div元素內(nèi)嵌套一個(gè)展示禮物內(nèi)容的div元素，并通過JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊事件。

<div class="gift-wrap" onclick="this.classList.toggle('clicked')">
<img src="gift-wrap.png" alt="獎(jiǎng)盒">
<div class="gift">
<img src="gift.png" alt="禮物">
<p>恭喜您獲得一份神秘禮物！</p>
</div>
</div>

代碼中，通過this.classList.toggle('clicked')實(shí)現(xiàn)點(diǎn)擊狀態(tài)的切換。因?yàn)樵黾恿薐S代碼，所以需要在HTML代碼中引入JS文件。

總的來說，打開禮物的效果可以使用CSS樣式和JS實(shí)現(xiàn)，通過增加趣味性和互動(dòng)性提升用戶體驗(yàn)，是電商或節(jié)日促銷網(wǎng)站中常見的效果之一。