在網站設計中，動畫對于用戶體驗具有重要的作用。想象一下，當用戶瀏覽網站時，一個神秘的盲盒在屏幕上出現，然后逐漸揭開面紗，最后揭示出令人驚嘆的內容。這樣的動畫效果能夠吸引用戶的注意力，增強網站的互動性。本文將介紹如何使用CSS開啟盲盒動畫，以達到驚艷的視覺效果。

/* 定義盲盒動畫 */
@keyframes unbox-animation {
0% { transform: rotateY(0); }
50% { transform: rotateY(90deg); }
100% { transform: rotateY(0); }
}
/* 設置盲盒樣式 */
.box {
width: 200px;
height: 200px;
border: 5px solid #000;
display: flex;
justify-content: center;
align-items: center;
perspective: 800px; /* 設置透視距離 */
}
/* 設置盲盒內部樣式 */
.box .inner {
transform-style: preserve-3d; /* 保持內部元素的3D效果 */
transition: transform 1s;
}
/* 定義鼠標懸停效果 */
.box:hover .inner {
transform: rotateY(180deg);
}

首先，我們要為盲盒定義一個動畫。這里使用了CSS3中的@keyframes規則，它能夠定義CSS動畫關鍵幀。我們定義了一個名為unbox-animation的動畫，其中通過rotateY()函數來實現盒子的旋轉效果。接下來，我們需要為盲盒設置樣式。這里我們定義了class為box的樣式，包括盒子的尺寸、邊框顏色、居中等。同時設置了perspective屬性，這是CSS3中用來設置透視距離的屬性，它能夠讓我們看到3D效果。在盒子內部，我們將class為inner的元素的transform-style屬性設置為preserve-3d，以保持其3D效果。最后，我們通過:hover偽類為盲盒添加了一個鼠標懸停效果，即將盒子內部的元素進行180度旋轉。

在HTML文件中，我們可以通過如下代碼來調用這個盲盒動畫效果：

<div class="box">
<div class="inner" style="animation: unbox-animation 2s;">
<img src="https://xxxx.com/image.jpg" alt="盲盒內部內容" />
</div>
</div>

我們在