CSS動畫是網頁開發中必不可少的一部分，它可以用來營造出更生動、更有趣的頁面效果。其中，開寶箱的動效是一種非常有趣的動畫效果，今天我們就來學習一下如何用CSS實現它。

.box {
position: relative;
width: 100px;
height: 100px;
margin: 100px auto;
}
.box:hover .lid {
animation: openLid 0.5s forwards;
}
.box:hover .shine {
animation: shine 1s linear infinite;
}
.lid {
position: absolute;
top: -100px;
left: -10px;
width: 120%;
height: 100px;
border-bottom: 10px solid #d4af37;
background-color: #ffd700;
transform-origin: bottom center;
}
.shine {
position: absolute;
top: -30px;
right: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
animation: shine 1s linear infinite;
opacity: 0;
box-shadow: 0 0 20px #fff;
transform: translateX(-50%);
}
@keyframes openLid {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-110deg);
}
}
@keyframes shine {
0% {
opacity: 0;
}
50% {
opacity: 1;
transform: scale(1.2);
}
100% {
opacity: 0;
}
}

首先，我們需要創建一個盒子(box)來模擬寶箱，并設置相應的寬度、高度和位置。我們還需要在CSS中添加:hover偽類，以便在鼠標懸停在盒子上時觸發開啟的動效。

然后，我們將創建一個蓋子(lid)，并將它相對于盒子進行絕對定位。它的初始位置必須將它置于盒子上方，使用transform-origin 屬性將變換的原點設置為底部中心，以便向上旋轉蓋子。我們使用@keyframes和transform屬性創建了一個名為openLid的動畫，將蓋子朝上旋轉。

接著，我們需要添加一個白光(shine)效果，用于模擬盒子開啟時所發光的效果。我們在蓋子上方創建一個圓形元素，將它進行絕對定位，并使用transform屬性讓它在蓋子上方保持垂直。我們還使用animation屬性，為它添加名為shine的動畫，讓它保持閃爍效果。

最終，我們使用@keyframes為shine動畫創建動畫關鍵幀，通過改變元素的透明度和大小，讓白光閃爍一段時間。最后，我們將所有動畫效果都應用于:hover狀態下的.box。 就這樣，你就可以擁有一個驚艷的開寶箱動效啦！