如果你想讓你的網站更加有趣，為什么不嘗試一些動畫效果呢？今天我想分享一種 CSS 開門效果圖，讓你的網站內容“打開門戶”。
這個效果圖使用 CSS3 的 transform 和 transition 屬性來實現，同時也涉及到了一些基本的 HTML 和 CSS。以下是這個效果圖的代碼：

<div class="door">
<div class="door-leaf door-leaf-left"></div>
<div class="door-leaf door-leaf-right"></div>
</div>

首先，我們需要一個 HTML 元素來表示門本身。這個代碼片段中我們使用了一個 div 元素，并給它添加了一個名為“door”的 class。
接下來，我們需要繪制出這個門的兩個葉子。我們又使用了兩個 div 元素，并分別為它們添加了“door-leaf”和“door-leaf-left”或“door-leaf-right”的 class，用來表示這是門的左半部分還是右半部分。
接下來，我們需要用 CSS 來設置這個門的大小和位置，以及它的顏色等其它屬性。這里我們只列出關鍵代碼：

.door {
width: 200px;
height: 400px;
position: relative;
}
.door-leaf {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
background-color: #ddd;
}
.door-leaf-left {
left: 0;
transform-origin: right center;
}
.door-leaf-right {
right: 0;
transform-origin: left center;
}

“door”類元素的寬度和高度分別設置為 200 像素和 400 像素，并且我們使用了相對位置。
這里比較重要的是在門的左半部分和右半部分中分別設置了不同的 left/right 和 transform-origin 屬性，用來控制葉子的旋轉和實現開門效果。
最后，我們需要為這個門添加 CSS3 動畫特效。這里我們使用了 CSS 的 transition 屬性來實現分步過渡動畫效果。

.door:hover .door-leaf-left {
transform: rotateY(-60deg);
transition: transform 0.5s ease-in-out;
}
.door:hover .door-leaf-right {
transform: rotateY(60deg);
transition: transform 0.5s ease-in-out;
}

這里我們使用了 :hover 選擇器來觸發動畫效果。當用戶把鼠標懸停在門上時，左半部分的門葉子會往左旋轉，右半部分的門葉子則會往右旋轉，最終呈現出一道開門的效果。
這就是 CSS 開門效果圖的全部代碼了。你可以將這個代碼片段加入到自己的網站中，在內容開之前為訪問者打開一扇有趣的門吧！