本文將為大家介紹如何使用CSS創建一個圖片開門效果圖。

<div class="door">
<div class="left-door"></div>
<div class="right-door"></div>
</div>
<style>
.door {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
background-color: #DDD;
}
.left-door, .right-door {
width: 50%;
height: 100%;
position: absolute;
top: 0;
background-image: url('door.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
transition: transform 1s ease-in-out;
}
.left-door {
left: 0;
}
.right-door {
right: 0;
}
.door:hover .left-door {
transform: rotateY(90deg);
}
.door:hover .right-door {
transform: rotateY(-90deg);
}
</style>

首先在HTML中創建一個包含左右兩扇門的div容器，并設置好對應的CSS樣式。對于左右兩扇門，我們也要為它們添加CSS樣式，包括寬高、定位、背景圖等屬性。但是我們暫時不需要把左右兩扇門現在就完全展現出來，所以我們需要將組合門體形式的div容器設置為overflow:hidden。

現在我們可以通過將鼠標懸停在門體上來觸發其展開的效果。因此設置門體的:hover狀態下的左右兩扇門的旋轉效果，以達到類似開門的效果。

最后展示的結果即為一幅具有圖片開門效果的圖像。可以在其中選擇不同的圖片作為門體的背景圖來展示各種不同的開門效果。