CSS是一種非常強大的網頁樣式表語言，使用CSS可以實現各種各樣的動畫效果，今天我們來介紹一種用CSS實現打開箱子動畫的方法。

.box {
position: relative;
width: 120px;
height: 120px;
perspective: 1000px;
}
.box__lid {
position: absolute;
top: 0;
width: 100%;
height: 50%;
background-color: brown;
transform-origin: top;
transform: rotateX(-90deg);
transition: transform 1s ease-in-out;
}
.box__bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
background-color: brown;
transform-origin: bottom;
transform: rotateX(90deg);
transition: transform 1s ease-in-out;
}
.box:hover .box__lid {
transform: rotateX(0deg);
}
.box:hover .box__bottom {
transform: rotateX(0deg);
}

首先我們要先使用一個父級容器來包含我們的箱子，應該為其設置perspective屬性來創建一個3D平面。然后我們設置兩個容器分別為箱子的頂部和底部。我們為頂部和底部容器設置初始的transform屬性讓它們旋轉90度，隨后在hover狀態下更改它們的transform讓它們沿著X軸旋轉到0度。設置transition屬性來實現動態效果。

這就是如何使用CSS實現打開箱子動畫。使用CSS進行動態效果的設計可以幫助網站增加互動性和視覺吸引力。